Created
August 14, 2012 18:05
-
-
Save carolineschnapp/3351324 to your computer and use it in GitHub Desktop.
Lots of filters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Step 1: Add your filters --> | |
| <!-- The collection filter is entirely optional --> | |
| <!-- You can have as many as 3 of the product tags filters --> | |
| <ul class="clearfix"> | |
| <li class="clearfix filter"> | |
| <p>Shop by category</p> | |
| <select class="coll-picker"> | |
| <option value="all">All</option> | |
| {% for c in collections %} | |
| {% unless c.handle == 'all' %} | |
| {% if collection.handle == c.handle %} | |
| <option value="{{ c.handle }}" selected>{{ c.title }}</option> | |
| {% else %} | |
| <option value="{{ c.handle }}">{{ c.title }}</option> | |
| {% endif %} | |
| {% endunless %} | |
| {% endfor %} | |
| </select> | |
| </li> | |
| <li class="clearfix filter"> | |
| {% assign tags = 'Red, Green, Blue' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %} | |
| <p>Shop by color</p> | |
| <select class="coll-filter"> | |
| <option value="">All</option> | |
| {% for tag in tags %} | |
| {% if current_tags contains tag %} | |
| <option value="{{ tag | handle }}" selected>{{ tag }}</option> | |
| {% elsif collection.all_tags contains tag %} | |
| <option value="{{ tag | handle }}">{{ tag }}</option> | |
| {% endif %} | |
| {% endfor %} | |
| </select> | |
| </li> | |
| <li class="clearfix filter"> | |
| {% assign tags = 'Small, Medium, Large' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %} | |
| <p>Shop by size</p> | |
| <select class="coll-filter"> | |
| <option value="">All</option> | |
| {% for tag in tags %} | |
| {% if current_tags contains tag %} | |
| <option value="{{ tag | handle }}" selected>{{ tag }}</option> | |
| {% elsif collection.all_tags contains tag %} | |
| <option value="{{ tag | handle }}">{{ tag }}</option> | |
| {% endif %} | |
| {% endfor %} | |
| </select> | |
| </li> | |
| </ul> | |
| <!-- Step 2: Add this at the bottom of collection.liquid --> | |
| <script> | |
| /* Product Tag & Collection Filters - Good for any number of filters on any type of collection pages */ | |
| /* Give you product tag filter select element a class of coll-filter */ | |
| /* Give your collection select a class of coll-picker */ | |
| /* Brought to you by Caroline Schnapp */ | |
| var allFilters = jQuery('.coll-filter, .coll-picker'); | |
| allFilters.change(function() { | |
| var newTags = []; | |
| jQuery('.coll-filter').each(function() { | |
| if (jQuery(this).val()) { | |
| newTags.push(jQuery(this).val()); | |
| } | |
| }); | |
| if (newTags.length) { | |
| var query = newTags.join('+'); | |
| if (jQuery('.coll-picker').length) { | |
| window.location.href = '/collections/' + jQuery('.coll-picker').val() + '/' + query; | |
| } | |
| else { | |
| window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('tag', query); | |
| } | |
| } | |
| else { | |
| if (jQuery('.coll-picker').length) { | |
| window.location.href = '/collections/' + jQuery('.coll-picker').val(); | |
| } | |
| else { | |
| {% if collection.handle %} | |
| window.location.href = '/collections/{{ collection.handle }}'; | |
| {% elsif collection.products.first.type == collection.title %} | |
| window.location.href = '{{ collection.title | url_for_type }}'; | |
| {% elsif collection.products.first.vendor == collection.title %} | |
| window.location.href = '{{ collection.title | url_for_vendor }}'; | |
| {% endif %} | |
| } | |
| } | |
| }); | |
| </script> |
hello mam CAROLINE.. since the CODE here mam are SELECT OPTION.. do u have a checkbox version here mam CAROLINE? thnx... plsss...
In this code why colors or size options not available its just selected in all?
its code dropdowns not working too
@arpitaneware06, its year 2024. hehehe, new?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@carolineschnapp
I have an issue: when I select an option in one of the dropdown menu the other one does not update to reflect the new filtered products on the page so I get " Sorry, there are no products in this collection "
Can you please help I am not able to find where is the error but I saw that on your shopify wiki demo it works well.
Here is the link: http://amazimbo-2.myshopify.com/collections/all
Thank you