james-a of Underwaterpistol
12/1/2017 - 11:14 AM

Collection Filters

<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>