skip to Main Content

I have added multiple filters to my Shopify collections using tags.
If I select ‘Oak’ colour it will show all products in that collection that have the ‘Oak’ tag assigned to them. Which is great.

However, it still shows tags that are not assigned to the products that the collection has been filtered down to.

E.g I have a box that is one size, but because one of the products in the collection has ‘Small, Medium and Large’ tags applied to it those options are still available.

How can I get it so that the tags only show based on what has been filtered rather than what is available in the whole collection?

Here is my current code in ‘collection.liquid’:

<div class="coll-sidebar">
 <div class="coll-sidebar--content">
  <ul class="clearfix filters">
   <h1>Filter Products</h1>
   <li class="clearfix filter">
    {% assign tags = 'Blue, Grey, Black, Oak, Bronze, Pewter, Gunmetal, Utile, Mahongany' | split: ',' %}
     <label>Colour</label>
     <hr class="hr--sidebar">
     <select class="coll-filter">
      <option value="">All</option>
      {% for t in tags %}
      {% assign tag = t | strip %}
      {% if current_tags contains tag %}
      <option value="{{ tag | handle }}" selected>{{ tag }}</option>
      {% elsif collection.all_tags contains tag %}
      <option value="{{ tag | handle }}">{{ tag }}</option>
      {% endif %}
      {% endfor %}
    </select>
   </li>
   <li class="clearfix filter">
   {% assign tags = 'Egyptian Cotton, Silk, Satin' | split: ',' %}
   <label>Material</label>
   <hr class="hr--sidebar">
   <select class="coll-filter">
    <option value="">All</option>
    {% for t in tags %}
    {% assign tag = t | strip %}
    {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% elsif collection.all_tags contains tag %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %}
    {% endfor %}
  </select>
</li>
<li class="clearfix filter">
 {% assign tags = 'Small, Medium, Large' | split: ',' %}
 <label>Size</label>
 <hr class="hr--sidebar">
 <select class="coll-filter">
  <option value="">All</option>
  {% for t in tags %}
  {% assign tag = t | strip %}
  {% if current_tags contains tag %}
  <option value="{{ tag | handle }}" selected>{{ tag }}</option>
  {% elsif collection.all_tags contains tag %}
  <option value="{{ tag | handle }}">{{ tag }}</option>
  {% endif %}
  {% endfor %}
 </select>
</li>
 <li class="clearfix filter">
   {% assign tags = 'Under £5, £15-£100, £100-£250, £250-£750, £750-1000£, £1000' | split: ',' %}
      <label>Price Range</label>
      <hr class="hr--sidebar">
      <select class="coll-filter">
       <option value="">All</option>
       {% for t in tags %}
       {% assign tag = t | strip %}
       {% if current_tags contains tag %}
       <option value="{{ tag | handle }}" selected>{{ tag }}</option>
       {% elsif collection.all_tags contains tag %}
       <option value="{{ tag | handle }}">{{ tag }}</option>
       {% endif %}
       {% endfor %}
     </select>
    </li>
   </ul>
  </div>
 </div>

{% section 'collection-template' %}

And the JS for this is:

<script>
 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 %}
});

Thanks

2

Answers


  1. Chosen as BEST ANSWER

    I found the answer.

    Change {% elsif collection.all_tags contains tag %} to {% elsif collection.tags contains tag %}


  2. I found the answer.

    Change {% elsif collection.all_tags contains tag %} to {% elsif collection.tags contains tag %}

    It Works

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search