Filtering a collection with more than one product tag drop-down ... filters not updating like in demo

Shopify Partner
43 0 1

I'm using ths guide to help create filters for a 10K+ sku store ... https://help.shopify.com/themes/customization/collections/filtering-a-collection-with-multiple-tag-d...

Here is the demo store for this code: https://satterfield-pfeffer5655.myshopify.com/collections/all

The demo looks great and this is exactly what I am looking for. I installed the basic code and JS and it works well.

Only problem is that on the demo store, the filters update every time you select an option. For example, in the demo if you select "sunglasses" under the Shop by Category option, you then lose the option of "$50  -$100" in the Shop by Price option.

I would like irrelevant tags to be removed from the options but it looks like that is not standard out-of-the-box for this code, or is there something I am missing?

Here's a link to my demo page: https://roadwarriorracks.com/collections/jz-test-collection

Thanks!

0 Likes
Shopify Partner
43 0 1

Found the solution right after I asked the question!

Reading further down the article, I saw that you can switch between collections. In the demo, the Shop by Category option was going through different collections rather than filters.

I've adapted my code and here is what it looks like:

<ul class="clearfix filters">
  
  <li class="clearfix filter">
    <label>Select Manufacturer</label>
    <select class="coll-picker">
      <option value="all">All</option>
      {% for link in linklists.fit-guide-rhino-rack.links %}
      {% assign c = link.object %}
      {% if collection.handle == c.handle %}
      <option value="{{ c.handle }}" selected>{{ link.title }}</option>
      {% else %}
      <option value="{{ c.handle }}">{{ link.title }}</option>
      {% endif %}
      {% endfor %}
    </select>
  </li>
  
  <li class="clearfix filter">
    {% assign tags = '3 Series, Civic, Insight, Cherokee' | split: ',' %}
    <label>Select Model</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 = '1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018' | split: ',' %}
    <label>Select Year</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>

 

0 Likes
Highlighted
New Member
15 0 0

Thanks for your work! Unfortunately I cannot really derive something for my case. I am also just about to introduce multiple filters to my shop (using debut theme). But the instructions from the manual doesnt work for me. 

https://ramsign.de/collections/arrowhead-kollektion

I can integrate multiple filters, but none of them actually have a function when you click on an item.

Did you do some modifications to the javascript? Did you place it in Templates > Collection.liquid?

Thanks!

0 Likes