Product Filters

I am currently using product filters in the CS-Cart 2 beta, and one of the filter option has many options, well over a dozen.



By default CS-Cart only shows two or three items, then the user has to click the more link to see more, and even then, it doesn’t show all of the filter options.



I would like by default to show all product options so there are no ‘more’ and ‘view all’ links. Can someone explain to me how I can accomplish this? Is there a setting?



Thank you!

And also, the logic of product filter is not quite right.



Please check how magento and taobao.com did it.



Thanks.

[quote name=‘joe’]And also, the logic of product filter is not quite right.



Please check how magento and taobao.com did it.



Thanks.[/QUOTE]

Does anyone feel the same with me?

I agree with mister, can we make by default to see all product option in the first place?

And is there posible to select multiple options for 1 filter, for example multiple manufacturers?

Bump!



Does anyone have any idea on how to show more than just a few of the product filter options at once? I would like to show many more and not make the customer go to a specific ‘view all’ page.

I’m sorry about my bad english :wink:



I just tried some improvmnets about filters, you can publish more filters option with 2 constants in file: core/fn_catalog.php



define(‘FILTERS_RANGES_COUNT’, 2);

define(‘FILTERS_RANGES_MORE_COUNT’,4);



Also you must erase/chagne some lines in product_filters.tpl with class hidden.

[QUOTE]Does anyone feel the same with me?[/QUOTE]



Yes The Filters are not easy to setup, may be we need more documentation or a review of how they’re being created and shown.



For example, I’m having a problem importing the Product Features using the CSV import and showing them in the Product Filters. I have more than 5000 products with product features and manufacturers information, it would be a daunting task for me to re-enter those manually so that they show in the Filters.



So I hope we would get at least more documentation as to how to setup the filters. Or have it improved.

I wish cs-cart can make filters like in www.taobao.com!!!

[quote name=‘DonDan’]I’m sorry about my bad english :wink:



I just tried some improvmnets about filters, you can publish more filters option with 2 constants in file: core/fn_catalog.php



define(‘FILTERS_RANGES_COUNT’, 2);

define(‘FILTERS_RANGES_MORE_COUNT’,4);



Also you must erase/chagne some lines in product_filters.tpl with class hidden.[/QUOTE]



Has anyone tested this method? Does it work?

[quote name=‘mister’]Has anyone tested this method? Does it work?[/QUOTE]



It does work, I just tested it! :slight_smile:

It worked for me too.



do you guys know how I can have the Product Filter block show in a clean, horizontal way as shown in the attached mockup?



Screen shot 1 is for how it looks now (takes too much space vertically) and screen shot 2 is what I’m trying to achieve…

filter2cs.JPG

filter1cs.JPG

Perhaps I’m missing something, but I can’t figure out how to add additional features to filter with.



I would need filters for Colors, Decoration Method, Production Time, Eco Friendly, etc, etc, etc.



How do you set those up? Also…I like the idea of adding the filters above the product list.



Cheers,

Jeff

[quote name=‘gugga7’]It worked for me too.



do you guys know how I can have the Product Filter block show in a clean, horizontal way as shown in the attached mockup?



Screen shot 1 is for how it looks now (takes too much space vertically) and screen shot 2 is what I’m trying to achieve…[/QUOTE]



Tell me what is you CS version ? It’s possible to give you easy way :sunglasses:

Hello DonDan, I use the latest CS-cart 2.0 RC…

No takers I guess? :slight_smile:

Hi gugga7 sorry about the delay.



I’ll give you little example, you can customize according your needs.



in file skins/basic/customer/blocks/product_filters.tpl you have to add DIV , begin after 23 row “{foreach from=$items item=“filter” name=“filters”}” and end about 68 row before “{/foreach}”

[QUOTE]

{foreach from=$items item=“filter” name=“filters”}

[COLOR=“Red”]

[/COLOR]

{$filter.filter}


......
.....



  • [COLOR="Red"]
    [/COLOR]
    {/foreach}
    [/QUOTE]

    I set some attribute of DIV, float, margin etc. in css file skins/basic/customer/styles.css
    [QUOTE].flbl {
    float: left;
    margin-right:5px;
    }
    [/QUOTE]

    Don't forget to move in Blocks section filters box from left sidebox to top
    :)

    Thanks Dondan!



    Here is what I did:



    in product_filters.tpl


    [QUOTE]{foreach from=$filter_features item=“filter” name=“filters”}

    [COLOR=“Red”]

    [/COLOR]

    {$filter.filter}



      {foreach from=$filter.ranges name="ranges" item="range"}
    • $smarty.const.FILTERS_RANGES_COUNT}class="hidden"{/if}>
      ....
      ....
      ....
      ....

    • [COLOR="Red"]
    [/COLOR]
    {/foreach}[/QUOTE]



    in Styles.css

    ```php [COLOR="Red"].flbl {
    float: top;
    margin-right:5px;
    font-size: 8px;

    }[/COLOR]

    /* block "Product filters" */
    .product-filters ul {
    margin: 0px;
    }
    .product-filters li {
    margin: 4px;
    font-weight: bold;
    font-family: Tahoma;
    }
    .product-filters li p {
    margin: 3px 0px 0px 0px;
    text-align: right;
    }
    .product-filters .details {
    color: #959595;
    font-weight: normal;
    }
    .product-filters a {
    font-weight: normal;
    }
    .filters-tools {
    padding: 3px 3px 8px 0px;
    }
    .reset-filters, .reset-filters:link, .reset-filters:visited, .reset-filters:hover, .reset-filters:active {
    color: #b20101;
    background: url(images/icons/delete_icon.gif) no-repeat 0px 3px;
    padding-left: 12px;
    text-transform: lowercase;
    }
    /* /block "Product filters" */ ```

    I tried to change some parameters in the newly created css attribute .flme but nothing was reflected on the site. I'm not sure what changes I need to make to change the appearance to the attached mockup? :confused:

    filter2cs.JPG

    Pleas note: in class flbl, float must be left , just copy and paste in styles.css

    Also div class must be flbl

    not flme.


    [QUOTE].flbl {

    float: left;

    margin-right:5px;

    } [/QUOTE]



    After that see move filters box, you can see in attached image

    MoveFilters1.jpg

    Sorry fro the confusion, I corrected everything, I see some changes now but it’s not looking right. Please see attached screenshot. Were you able to make it look properly on your end? Thanks…

    discr1.JPG

    Works perfectly fine!



    Thanks DonDan, you rock! :stuck_out_tongue: