Created
June 29, 2015 17:59
-
-
Save schaeken/b3134fa169d3c4439cee to your computer and use it in GitHub Desktop.
Add the Supply filtering to other themes as a horizontal bar of dropdown lists. See the visual: http://snapify.shopify.com/30-15-45bo0-byoi2.jpg with the potential to be: http://snapify.shopify.com/30-50-v2h1u-wjtet.jpg
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
{% comment %} | |
Create this snippet! | |
A recursive loop to catch and filter out the different tag categories. | |
This is mainly for advanced tagging, but will also help us strip | |
out any tag categories from our tags (E.g. remove BRAND_ from BRAND_tag) | |
{% endcomment %} | |
{% if template contains 'collection' and collection.all_tags.size > 0 %} | |
{% assign c = 0 %} | |
{% for t in collection.all_tags %} | |
{% capture cat %}{{ cat }}{% capture temp_cat %}{% if t contains '_' %}{% assign cat_grp = t | split: '_' %}{{ cat_grp.first }}{% endif %}{% endcapture %}{% unless cat contains temp_cat %}{% if t contains '_' %}{% assign new_cat_grp = t | split: '_' %}{{ new_cat_grp.first }}{% endif %}{% unless forloop.last %}+{% endunless %}{% assign c = c | plus: 1 %}{% endunless %}{% endcapture %} | |
{% endfor %} | |
{% assign cat_array = cat | split: '+' %} | |
{% endif %} |
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
<div style="width:100%;"> | |
{% if collection.all_tags.size > 0 %} | |
{% include 'collection-tagbar' %} | |
{% endif %} | |
</div> |
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
{% include 'advanced-tag-loop' %} | |
{% comment %} | |
Loop through tag categories | |
{% endcomment %} | |
{% for cat_item in cat_array %} | |
{% comment %} | |
Ignore if tag category is empty | |
{% endcomment %} | |
{% unless cat_item == '' %} | |
<div class="browse-tags"> | |
<label>{{ cat_item }}</label> | |
<select class="advanced-filters"> | |
{% comment %} | |
Loop through collection tags | |
{% endcomment %} | |
<option value="">All</option> | |
{% for custom_tag in collection.all_tags %} | |
{% if custom_tag contains cat_item %} | |
{% comment %} | |
Strip out tag category prefix and add/remove link for tag filtering | |
{% endcomment %} | |
{% capture show_tag %}{{ custom_tag | remove: cat_item | remove: '_' }}{% endcapture %} | |
{% if current_tags contains custom_tag %} | |
<option class="advanced-filter active-filter" value="{{ custom_tag | handle }}" data-group="{{ cat_item }}" selected="selected" data-handle="{{ custom_tag | handleize }}">{{ show_tag | strip | capitalize }}</option> | |
{% else %} | |
<option class="advanced-filter" value="{{ custom_tag | handle }}" data-group="{{ cat_item }}">{{ show_tag | strip | capitalize }}</option> | |
{% endif %} | |
{% endif %} | |
{% endfor %} | |
</select> | |
</div> | |
{% endunless %} | |
{% endfor %} | |
<script> | |
/*$(function() { | |
var currentTags = '{{ current_tags }}', | |
filters = $('.advanced-filter'), | |
activeTag, | |
activeHandle; | |
filters.each(function() { | |
var el = $(this), | |
group = el.data('group'), | |
isActive = el.hasClass('active-filter'); | |
}); | |
filters.on('click', function(e) { | |
var el = $(this), | |
group = el.data('group'), | |
url = el.find('a').attr('href'); | |
// Continue as normal if we're clicking on the active link | |
if ( el.hasClass('active-filter') ) { | |
return; | |
} | |
// Get active group link (unidentified if there isn't one) | |
activeTag = $('.active-filter[data-group="'+ group +'"]'); | |
// If a tag from this group is already selected, remove it from the new tag's URL and continue | |
if ( activeTag && activeTag.data('group') === group ) { | |
e.preventDefault(); | |
activeHandle = activeTag.data('handle') + '+'; | |
// Create new URL without the currently active handle | |
url = url.replace(activeHandle, ''); | |
window.location = url; | |
} | |
}); | |
});*/ | |
var advancedFilters = jQuery('.advanced-filters'); | |
advancedFilters.change(function() { | |
var newTags = []; | |
var newURL = ''; | |
delete Shopify.queryParams.page; | |
advancedFilters.each(function() { | |
if (jQuery(this).val()) { | |
newTags.push(jQuery(this).val()); | |
} | |
}); | |
{% if collection.handle %} | |
newURL = '/collections/' + '{{ collection.handle }}'; | |
if (newTags.length) { | |
newURL += '/' + newTags.join('+'); | |
} | |
var search = jQuery.param(Shopify.queryParams); | |
if (search.length) { | |
newURL += '?' + search; | |
} | |
location.href = newURL; | |
{% else %} | |
if (newTags.length) { | |
Shopify.queryParams.constraint = newTags.join('+'); | |
} | |
else { | |
delete Shopify.queryParams.constraint; | |
} | |
location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20'); | |
{% endif %} | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment