advanced "search" customization for product listings

[easy3dsource]

Hello all,

I have a bit of a tall order for what I'd like to do with my product listing pages, and although I have an advanced knowledge of html and css, (and proficiency with jquery/js and php), I wanted to ask the community for advice / suggestions.

First, I'll state the basics:

-I'm running zc 1.3.9h
-I am using a custom template
-I have installed the product grid module to display products in a grid
-I have customized files as suggested in this thread in order for my downloadable products to show the buy now / shopping cart button on product listing pages.

With that out of the way, here's what I'm hoping to do:

On my product listing pages, I would like to create a header (which would presumably take the place of the "filter results by" section) that provides a list of descriptions that the user could click / unclick to filter the products listed on that page. For example, my site provides stock images of people, and I'd like them to be able to filter the results by multiple variables, such as "men, women, children, teenagers, shoppers" etc.

From my knowledge of jquery, I figure if I'm able to add classes to the individual divs of the products, I can create toggle events where clicking a particular description (men, women, etc) would hide / unhide, or change the opacity of divs with the associated classes.

I assume I would have to create custom fields / properties for the products, within which I can list the css classes to be applied. I found this thread, which I think will be the answer to that.

The next step, and this is where I need the most help, is that I imagine that I would need to create a custom php call in my product listing files that echo the value entered in the newly created custom field. Does anyone have a suggestion for this?

The final thing: when users click the add to cart/ buy now button in the product listing, I don't want them to be directed away from the page, and would imagine that the add to cart/buy now button just changes somehow so the user knows it's been added. I found this thread but it isn't quite what I need. When someone clicks to add a product to the cart, it refreshes the current page, and there's no indication that a particular product has been added. Is there a way to set it so that the add to cart / buy now button indicates that the product is already in the cart?

I know this is a pretty extensive request... I really hope someone is able to help, because I think having this process illustrated in the steps required would be greatly beneficial to a lot of people.

Thanks!

[kobra]

To start are these segregated into distinct cats or sub cats as you referenced

men, women, children, teenagers, shoppers

[easy3dsource]

This search function would be present at the deepest sub-category possible, and would only be applied within a single given category. Here's an example of one of the sections that would have this feature:

http://www.easy3dsource.com/People_T...ss_People_V._1

the category structure is: people textures/single images/ business people/ business people v.1

So, all the people at this URL (which are images listed under the business people v 1 product) would have this search system applied.

I would imagine that the "all products" page would have the same functionality, but I have yet to modify the templates to list the products in a grid as I have with the url I supplied.

[easy3dsource]

I guess the simpler way to answer that is no, those filters (men, women, children, etc.) are not product categories. They would merely be css classes applied to the individual divs of each product.

[easy3dsource]

Any suggestions? Anyone? I have an idea of the bit of code that I would need to edit in my product_list.php file, but I'm not sure how to make a custom php call within a segment that defines the css classes.... anyone have any advice on that?

[gjh42]

My feeling for the simplest way to apply individualized classes to products in the listing would start (loosely) from the concept of swguy's boilerplate technique for the product info page. This reads the description and substitutes the content of files for keywords in the description.
You could read the description for an HTML comment that contains a keyword followed by a string of classnames, then apply that string with the keyword stripped and enclosed by 'class="' and '"' to the parameters of the product.

You would just add to each product description something like
<!--SEARCH_CLASS women teenagers bicycles-->

[gjh42]

    //extract & apply search classes - gjh42 20110414
    $desc_raw = (zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']));
    $sc_start = strpos($desc_raw, '<!--SEARCH_CLASSES') + 18;
    $sc_length = strpos($desc_raw, '-->', $sc_start) - $sc_start;
    $search_classes = substr($desc_raw, $sc_start, $sc_length);

    // Following code will be executed only if Column Layout (Grid Layout) option is chosen
    if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
      $lc_text = implode('<br />', $product_contents);
      $list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back' . $search_classes . '"' . ' ' . 'style="width:' . $col_width . '%;"',
                                                 'text'  => $lc_text);
      $column ++; 

[gjh42]

    //extract & apply search classes - gjh42 20110414
    $desc_raw = zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']);
    $sc_present = strpos($desc_raw, '<!--SEARCH_CLASSES');
    $sc_start = (int)$sc_present + 18;
    $sc_length = strpos($desc_raw, '-->', $sc_start) - $sc_start;
    $search_classes = $sc_present === false? '': substr($desc_raw, $sc_start, $sc_length); 

Refinement to allow for search classes not being present.

[easy3dsource]

Hmm.... I think I follow you. So I'm assuming I'll first need to go and modify my files so that the products have an additional field (as mentioned previously) that allows me to enter the classes into the database, presumably as the database entry: SEARCH_CLASSES.

I would then be applying the value of this field as you mentioned so that it gets appended within the css class="" attribute. Is this correct so far? I'm going to make the modifications necessary to add the additional product fields later tonight, so hopefully I'll soon be able to implement your suggestion.

[easy3dsource]

I've been trying to make more sense of your solution:

I noticed you said that in the product description I should add this line:

<!--SEARCH_CLASS women teenagers bicycles-->

I know the product description input processes HTML, but just to be sure; this won't actually show up in the product description right? I'm assuming it will still be parsed, though.

Now that I understand this a little better, this is easier, since you don't actually have to add any additional database entries / product fields. I'll test this out first.