[FIXED] How to get shopify filter to only show tags available on products shown?

Issue

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

Solution

I found the answer.

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

Answered By - Allsops

Answer Checked By - Marie Seifert (PHPFixing Admin)