Filter By Product Type

fragranzaUk
Tourist
13 0 1

Hi,

I need some help in filtering products by product type. I use the code snippet from this forum from multiple discussions and mostly copy and paste the code. Most of the filter process works fine, the problem arises when I select multiple product types the result shows no product. 

My code is below : 

<div class="block-content clear-wrap">
        <ul class="filter-list filter-text ">
          {% for product_type in collection.all_types %}
          {% assign product_type_tag = product_type | handle %}
          {% if product_type_tag != '' %}
          {% if collection.all_tags contains product_type or collection.tags contains product_type %}
          <li>
            <input {% if current_tags contains product_type_tag or current_tags contains product_type %}checked{% endif %} name="type-filter" class="hidden coll-filter" type="{{type_input}}" id="hidden-{{ product_type | handle }}" value="{{ product_type | handle }}"/>
            <label for="hidden-{{ product_type | handle }}">{{product_type}}</label>
          </li>
          {% endif %}
          {% endif %}
          {% endfor %}
        </ul>
      </div>
  </div>

and JS 

<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]);
      }
    }
  }
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    var newURL = '';
    delete Shopify.queryParams.page;   
    collFilters.each(function() { 
      if (jQuery(this).val() && jQuery(this).is(':checked')) {
        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).replace(/\+/g, '%20');
    {% endif %}      
  });
 
</script>

 

When I select one product type the URL turn in to : 

https://xxx.com/collections/womens?constraint=eau-de-cologne

and it works fine, but when I select another product type, the URL turns in to :

https://xxx.com/collections/womens?constraint=eau-de-cologne+mist

and this one does not work, shows no result. 

Any idea what is wrong?

Thanks

 

 

0 Likes