Filtering All Collections using Product Tags

New Member
9 0 0

Hello!

I've been researching to the ends of the earth, but cannot find an answer to this. I want to be able to filter all collections using the product tags. As of right now, Shopify is only able to filter using tags after a collection has been selected. Here is the code I'm using for that, which I found in this article: https://docs.shopify.com/manual/configuration/store-customization/page-specific/collections/filter-a...

<div class="sort-by-wrapper filter">
  <label>Filter by:</label>
  <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %}
    {% endfor %}
  </select>
</div>
<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 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);
  {% endif %}
});
</script>

While it's fine for now, I would really love to be able to filter before a collection has been selected.

Thank you in advance!

0 Likes
New Member
1 0 0

This is ancient, but presumably the answer is to append the filter path to /collections/all when you're not on a collections page. Conceptually "all collections" doesn't make sense, while the collection of all products (collections/all) is the equivalent. 

0 Likes