How to add filter in Boundless Theme

New Member
2 0 0

Hi,

 

I am struggling to add filter to boundless theme. I am using the following code in collection.liquid page, I am able to get it to look right, but the java script does not work to filter the page. Any help will be greatly appreciated. The code is pasted below. I have zero knowledge of coding so will need detailed guidance if any one can help! 

 

This code is courtesy Tripster Developer:

 

{% comment %} Our basic motive is to breakdown our products in different filters in form of tags.Let your customers search products with "shop by category,shop by size and many more

Replace the given code below in your collection.liquid
{% endcomment %}

<ul class="clearfix filters">
  <li class="clearfix filter">
    {% assign tags = 'Blue, Grey, Black' | split: ',' %}
    <label>Shop by color</label>
    <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>Shop by size</label>
    <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>Shop by material</label>
    <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>
-----------------------------------------------------------------------------------------------------------------
{% comment
Javascript. Replace in collection liquid. if its not present than paste this code at the bottom of collection.liquid
{% endcomment %}

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

<style>
.filters { list-style-type: none; }
.filter { float: left; margin-right: 15px; }
.filter label { display: block; margin: 10px 0; }
.filter select { max-width: 200px; }
</style>

Thanks much!

Sapana

0 Likes