advanced "search" customization for product listings

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!

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

men, women, children, teenagers, shoppers

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_Textures/Single_Images/Business_People_Textures/Business_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.

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.

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?

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

    //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 ++;

    //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.

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.

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:

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.

I tried your suggestion but it's not working. I made the edits you suggested, then added that bit of code to the product description, but it doesn't seem to be appending anything to the css class attribute. Any thoughts on what can be done to make this work?

I also tried moving the $search_classes bit within the quotation marks of the css attribute, but the server doesn't process it, and it gets passed literally and shows up with a class of "$search_classes"

I've been looking around and am not having much luck finding a way to use php to dynamically create the class attributes.

Correct. The comment tags will hide the search class string in the product info page, and the listing pages strip out all HTML (including comments) so there will be nothing to display in the listing description. The HTML is still in the raw description, though, so it can be parsed by this code.

I didn't test the code, so it is possible there is a typo somewhere, or something that needs adjusting.
Add a debug line after the new code so we can see what is happening:

echo ' present='. $sc_present .' start='. $sc_start .' len='. $sc_length .'<br />';

Also, post the description you are using.
The actual code I wrote looks for

gjh42:

I didn't test the code, so it is possible there is a typo somewhere, or something that needs adjusting.
Add a debug line after the new code so we can see what is happening:

echo ' present='. $sc_present .' start='. $sc_start .' len='. $sc_length .'<br />';

Also, post the description you are using.
The actual code I wrote looks for

<!--SEARCH_CLASSES women teenagers bicycles-->

That was it. I had copied and pasted from your first post (prior to code), which only said <!--SEARCH_CLASS women teenagers bicycles-->

I should have looked that over more closely!

So the next thing I need to do to flesh out this search functionality is create an array of toggle-able search terms that hide or fade the divs with the corresponding classes. I presume this will be an easy jquery fix.

easy3dsource:

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?

One thing: this bit hasn't really been addressed. Anyone know of a solution for that? I would prefer that the customer has some sort of reference that they already have a product in their cart. It would be nice if this could be done without refreshing the page as well.

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?Not a setting, but it wouldn't be a big coding job to look up the product cart status and adjust the display accordingly. Not refreshing the page would require javascript; but the page needs to be refreshed for the PHP processing of the cart add.

If the "display cart after add" is set to false, there is supposed to be an alert banner (I think near the breadcrumbs) that the product was successfully added.

Also, the cart sidebox will display the product name and price when there is something in the cart. Locating this sidebox (when active) near the product add function may be sufficient.