Jquery Feature Dropdown

Well, I’m trying to figure out a way to make my features dropdown when they are clicked.



I’ve tried various jQuery show/hide scripts, but I don’t know jQuery or Javascript very well and haven’t been able to get anything to work.



I want something that works like the features at [url]http://watchshop.com/Citizen-Watches.html[/url] or the categories at [url]http://www.authoritysafes.com/gun-safes.html[/url]



I’d like to just do a scripts.post.tpl file for my My Changes addon and then I was planning on doing a new wrapper for my filters and integrating it that way.



What do you guys think? Does anyone have any suggestions on how to tackle this?



Thanks in advance.



Brandon

Since I am still not that familar with the my changes addon but pretty good with javascript, I can tell you how to do it by modifying the templates and then maybe someone can get you the rest of the way. Attached is the image for the expand/collapse as well.



In your /skins//customer/style.css add the below code:

ul.expand { padding:0; margin:0; list-style:none; }
ul.expand li { padding:0; margin:0; }
ul.expand li.trigger.top { margin-top:0; }
ul.expand li.trigger
{
background:url(images/icons/expand-collapse.jpg) 0 3px no-repeat;
cursor:pointer;
padding:0 0 0 20px;
margin:7px 0 0 0;
}
ul.expand li.trigger h4
{
color:#666;
}
ul.expand li.trigger.open h4
{
color:inherit;
}
ul.expand li.trigger.open
{
background-position:0 -997px;
}
ul.expand ul
{
list-style:disc inside;
line-height:18px;
padding:4px 0 6px 20px;
}




Then in your /skins//customer/blocks/product_filters.tpl add the code below to the very top of the file right under the comments:

{literal}

{/literal}




Also in product_filters.tpl

Replace

```php

{$filter.filter}


    ```
    with
    ```php

    • {$filter.filter}

      • ```

        Lastly in product_filters.tpl
        add
        ```php
    • ```
      after the {/foreach} (last /foreach on the page) in the lines below so it looks like so:
      ```php {/foreach}


    {if $smarty.foreach.ranges.iteration > $smarty.const.FILTERS_RANGES_COUNT} ```

    expand-collapse.jpg

Sample of what it looks like is attached to this post.

Snap_2011.03.01 00.39.15_002.png

that is very nice whisplash, thanks

Man, thank you very much Whiplash, that is awesome. I really appreciate you sharing that with us.



I went ahead and turned Whiplash’s code into an addon to make it easier for people.



The instructions are there. This is a pretty basic addon.



Again, thank you very much Whiplash.



Brandon

dropdown.zip

John,



Do you know how to make it so I can have more than one of these filters on a page?



I’m trying to set up manual filters and I’m trying to have more than one on a page. When I do this with your code, the filter drops down and then just goes back up.



When I only have one of these filters on a page, it works fine.



Thanks in advance.



Brandon

NP Brandon. You have helped me out quite a few times, just nice to return the favor. I originally had no intentions on using this script but it was growing on me as the night wore on. Great job on packaging it by the way.



Just remove or comment out the hideAll(); as I did below in red to fix this issue. The attached addon package includes this change as well as an image change. When I uploaded the expand-collapse.gif the forum changed it to jpg which modified the look of the image. This addon has the original gif I used and I updated the CSS file as well. In addition, I commented out the more functionality in the tpl file since you are already expanding or collapsing the filter.


{literal}

{/literal}

dropdown-1.zip

Hi John,



Thank you for the script. Works great!



Is it possible to show/unhide the list after a filter is selected in that list? This is easy for customers to see which filter they have set.

Yes John, thank you very much. Your solution worked perfect.



I did do this a little different though.



First in:



skins/my-skin/customer/addons/my_changes/hooks/index/scripts.post.tpl



I put:


{literal}

{/literal}




Then I created a wrapper like:



skins/my-skin/customer/blocks/wrappers/filter_box.tpl



In that file I put:


```php





{$title}



{$content|default:" "}





```

By doing it this way, I can just select the wrapper for any block and it will be a dropdown.

Brandon

[quote name=‘ghostrider’]Hi John,



Thank you for the script. Works great!



Is it possible to show/unhide the list after a filter is selected in that list? This is easy for customers to see which filter they have set.[/QUOTE]



I will take a look at this tonight.

[quote name=‘ghostrider’]Hi John,



Thank you for the script. Works great!



Is it possible to show/unhide the list after a filter is selected in that list? This is easy for customers to see which filter they have set.[/QUOTE]



OK So I have good news and bad news.



Bad News… I couldn’t get it to work with the existing addon code.



Good News… I re-wrote the whole addon from scratch and now it works. I have attached it to this post.



NOTE: You must uninstall the dropdown addon (if you installed it) prior to installing the Filter Slider.



Enjoy!!!





PS I added 2 screen shots. The first shot is the filter expanded the second is after I selected a filter item when the page reloaded the filter stayed expanded.



UPDATE: I had a small mistake in my css file that caused the image not to change for selected filters. I updated the package with a new CSS file.

Snap_2011.03.09 23.11.15_003.png

Snap_2011.03.09 23.11.39_004.png

filter_slider.zip

Thank you guys so much for your efforts. Excellent mod for filters.



Stu

Thanks guys. That is very neat!



–Ian

Love it, thanks for sharing.

thank you so much @brandonvd and @whisplash

this is so endless.com which is great!

Is the any way this could be adjusted to show a scrollable section and click rather then a dropdown a click ?



Also I added both these addons, the latest first and although they had different name the last one I added overwrote the first addon. I just wanted to see them side by side. Just thought I would say in case some one is a stupid a me :smiley:

Thanks for this great free addon!



I would like to ask if is it possible to select more features from the same filter, please.



For example:



Brands:

________

Canon

Seiko

Epson

HP

Toshiba



In this example I could choose only Canon and Epson and Toshiba and I will see related products.



Many thanks

Regards

Thank you and thank you so much @brandonvd and @whisplash

Great addon!

Thanks! Super addon



However I installed but it's not working for me. Maybe becaus I'm using 2.0.11. Or because I had some custom work done on the filters. CS cart added a filter based on global options for me.



Any ideas?



Thanks again!