Shopify Filter Snippets

custom.filter.buttons.tags.liquid

Tag Filter:
<ul class="subnav clearfix">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
    {% elsif collection.current_type %}
    <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
    {% elsif collection.current_vendor %}
    <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
    {% endif %}
  </li>
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
  <li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li>
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}
</ul>

custom.filter.buttons.vendors.liquid

Sort By Vendor:
<ul class="subnav clearfix">
{% assign vendor_list = '' %}
{% for product in collection.all_products %}
{% if vendor_list contains product.vendor %}
{% else %}
  <li>
{% comment %}
   
  <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
     {% endcomment %}
<a title="{{ product.vendor }}">{{ product.vendor }}</a>
  
  </li>
{% capture temp %}{{ vendor_list }}{{ product.vendor }}{% endcapture %}{% assign vendor_list = temp %}
{% endif %}
{% endfor %}
</ul>

custom.filter.list.types.liquid

Shop:
<!-- https://sunnyradios.com/collections/types?q=Antennas -->
<ul>
  {% for product_type in shop.types %}
  {% assign type_handle = product_type | handleize %}
  {% assign type_collection = collections[type_handle] %}
  <li class="{% if product.type == product_type %}current{% endif %}">
    {% if type_collection == empty %}{{ product_type | link_to_type  }}
    {% else %}{{ type_collection.title | link_to: type_collection.url }}
    {% endif %}
  </li>
  {% endfor %}
</ul>

custom.filter.list.vendors.liquid

{% if collection.url != blank %}
<h4>Shop by vendor:</h4>
<ul>
	{% for product_vendor in collection.all_vendors %}
	<li>
		{% if current_tags contains product_vendor %}
		<a class="active" href="{{ collection.url }}">{{ product_vendor }}</a>
		{% else %}
		<a href="{{ collection.url }}/{{ product_vendor | handle }}">{{ product_vendor }}</a>
		{% endif %}
	</li>
	{% endfor %}
</ul>
{% endif %}

filter-script.liquid

<script>
/* Product Tag Filters - Good for any number of filters on any type of collection page. */
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]);
    }
  }
}
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
  var newTags = [];
  var newURL = '';
  collFilters.each(function() {
    if (jQuery(this).val()) {
      newTags.push(jQuery(this).val());
    }
  });

  if (newTags.length) {
    Shopify.queryParams.constraint = newTags.join('+');
  }
  else {
    delete Shopify.queryParams.constraint;
  }
  location.search = jQuery.param(Shopify.queryParams);

});
</script>