<ul class="clearfix filters">
<li class="filter">
<label for="">Shop by subject</label><br>
<select class="coll-filter styled-select tags-dropdown">
<option value="">All</option>
{% for tag in collection.all_tags %}
{% if tag contains 'subject' %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | link_to_remove_tag: tag | | remove: 'subject -' }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tag | link_to_add_tag: tag | | remove: 'subject -' }}</option>
{% endif %}
{% endif %}
{% endfor %}
</select>
<li>
<li class="filter">
<label for="">Shop by style</label><br>
<select class="coll-filter styled-select tags-dropdown">
<option value="">All</option>
{% for tag in collection.all_tags %}
{% if tag contains 'style' %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | link_to_remove_tag: tag | | remove: 'style -' }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tag | link_to_add_tag: tag | | remove: 'style -' }}</option>
{% endif %}
{% endif %}
{% endfor %}
</select>
<li>
<li class="filter">
<label for="">Shop by size</label><br>
<select class="coll-filter styled-select tags-dropdown">
<option value="">All</option>
{% for tag in collection.all_tags %}
{% if tag contains 'size' %}
{% if current_tags contains tag %}
<option value="{{ tag | handle }}" selected>{{ tag | link_to_remove_tag: tag | | remove: 'size -' }}</option>
{% else %}
<option value="{{ tag | handle }}">{{ tag | link_to_add_tag: tag | | remove: 'size -' }}</option>
{% endif %}
{% endif %}
{% endfor %}
</select>
<li>
</ul>
<script>
/* Product Tag Filters - Good for any number of filters on any type of collection page.
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. */
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('.coll-picker').change(function() {
if (jQuery(this).val()) {
location.href = '/collections/' + jQuery(this).val();
}
else {
location.href = '/collections/all';
}
});
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
delete Shopify.queryParams.page;
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
var 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);
{% endif %}
});
</script>