Hiding filter group with one option

Shopify Partner
32 0 0

I've got multiple filter groups and collections setup within the Supply theme and I'm really happy with how it's all working apart from one (admittedly minor) annoyance.

If the customer starts at the top level of my collections then they have multiple filters like "Size: S,M,L", "Season:Winter,Summer" "Colour: Red,Orange,Blue" etc etc.

Once they've drilled down a bit or come in via a sub-collection list they see a series of filters that basically have no choices as every product they're seeing has that tag.

What I'd like to do is to not display the filters that have only one option in the sidebar and, if that means there are none at all, then don't display the sidebar to give more room for products.

I know my way around in terms of programming, CSS etc but liquid is all new to me and although I'm very happy with what I've managed to achieve so far I'm struggling a bit with this to see how to do it without processing all the collections and tags a few times which I'm worried will cause performance issues.

Any help would be very gratefully recieved as I would love to launch the shop on January 1st and this is the only thing left that is bugging me.

0 Likes
Shopify Staff
Shopify Staff
370 0 32

Hello Adrian, Ben here - your Shopify Guru! 

  Without seeing your code I am not sure how you are getting the options and building your filters. But it sounds like a you could use a simple logical statement for the size of the array.

{% if collection.all_vendors.size > 1 %}
    Your selector code here ..
{% endif %}

This would work if our building a selection box to filter by vendor on a collection page. You can use the .size filter on other objects as well. Our documentation can be found here:

https://docs.shopify.com/themes/liquid-documentation/filters/array-filters#size

 

I hope this helps! Feel free to reach out if you have any further questions :)

Cheers,
Ben C - Shopify Guru
Support@Shopify.com

 

0 Likes
Shopify Partner
32 0 0

Thanks for the reply Ben.

It's the standard code in the Supply theme coupled with the standard tag group feature in that theme. I've changed a few things to cope with the grouped collection method I've created but that doesn't affect the tag code or sidebar in any way.

It's this code in the collection-sidebar.liquid snippet that I'm interested in changing:

{% if settings.collection_sidebar_filters == 'groups' %}
  {% if collection.all_tags.size > 0 %}

    <div class="grid-uniform">
      {% comment %}
        Loop through tag categories
      {% endcomment %}
      {% for cat_item in cat_array %}
        <div class="grid-item small--one-half medium--one-third">
          <h3>{{ cat_item }}</h3>
          <ul class="advanced-filters">
            {% comment %}
              Loop through collection tags
            {% endcomment %}
            {% for tag in collection.all_tags %}
              {% assign cat = tag | split: '_' | first %}
              {% if cat != tag and cat_item == cat %}
                {% comment %}
                  Strip out tag category prefix and add/remove link for tag filtering
                {% endcomment %}
                {% if current_tags contains tag %}
                  <li class="advanced-filter active-filter" data-group="{{ cat_item }}" data-handle="{{ tag | handle }}">{{ tag | remove_first: cat_item | remove_first: '_' | link_to_remove_tag: tag }}</li>
                {% else %}
                  <li class="advanced-filter" data-group="{{ cat_item }}" data-handle="{{ tag | handle }}">{{ tag | remove_first: cat_item | remove_first: '_' | link_to_add_tag: tag }}</li>
                {% endif %}
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      {% endfor %}
    </div>

cat_array contains all the group tags for the products on the collection page. So for example it may have 3 in there. Size, Colour, Age but within that ({% for tag in collection.all_tags %}) there might only be one matching tag for Size and Age but three for colour.

In that case I only want to show the tags for Colour in the sidebar. As by the time the code gets to the loop where it's checking for matching tags the divs, headers and ul classes have already been output I need to remove those tags earlier in the operation.

I can see how to do it by doing the loop twice and building a new array but that seems very inefficient and I was wondering if there's a better way of doing it.

0 Likes
Shopify Partner
32 0 0

Not sure what happened to the reply I posted yesterday. This forum seems very strange. It's constantly blocking me out and losing posts.

Anyway. The parts of the theme that I'm interested in changing are standard Supply theme parts with no changes by me. The snippet in question is "collection-sidebar.liquid"

It has a loop around the cat_array variable which is built from all the tags that have a group prefixed to them. It then loops around all the tags in the collections comparing against the cat_array and working out which tags go in which group.

What I want to do is to not display any group that has only one tag in it. At the moment the code builds the HTML as it goes along so as far as I can see I would have to put some code in to process the cat_array and remove any groups in it that only have one tag.

It's keep tracking of a simple count variable to see how many times I've been through the "tag in collection.all_tags" loop that I'm struggling with. I assign a variable and then try to add one to it with the plus filter and the pre-processor complains that the variable is an unknown tag when I upload the snippet. I change the code around to get rid of that message and then it outputs the value of one to the browser instead.

There's something fundemental I'm missing in the concept of a templating language like liquid regarding variables, tags, capture, filters etc.

0 Likes
New Member
5 0 0

This is an old post, but since it's the only one that comes up when I search for 'hide filter group with only one option' I thought it might be useful to post the solution I came up with.

 

Note, this works, but I feel it's not yet complete, because once you select a filter option, that filter group then disappears from view.    I am yet to figure out how to differentiate between filter groups with only one option to begin with and those with a specific option selected.  My code includes filtering only on products in stock, which I posted about here. (at least I did post a solution there until it was removed, I don't know why).

 

My advanced-tag-loop.liquid template is as follows:

 

{% comment %}
  A loop to catch and filter out the different tag categories.
  This is mainly for advanced tagging, but will also help us strip
  out any tag categories from our tags (E.g. remove BRAND_ from BRAND_tag)
{% endcomment %}
{% if request.page_type == 'collection' and collection.all_tags.size > 0 %}

  {% assign stockedProductsTags = '' %}
  {% assign newStockedProductsTags = '' %} 
  {% for product in collection.products %}
    {% if product.available %}
      {% for tag in product.tags %}
        {% capture stockedProductsTags %}{% unless stockedProductsTags == blank  %}{{ stockedProductsTags }}|{% endunless %}{{ tag }}{% endcapture %}
      {% endfor %}

{% assign stockedProductsTags_array = stockedProductsTags | split: '|' | uniq %}

      {% for tag_first_loop in stockedProductsTags_array %}
        {% assign category_first_loop = tag_first_loop | split: '_' | first %}
        
        {% for tag in stockedProductsTags_array %}
          {% assign category = tag | split: '_' | first %}
          {% if category == category_first_loop and tag != tag_first_loop %}
            {% capture newStockedProductsTags %}{% unless newStockedProductsTags == blank  %}{{ newStockedProductsTags }}|{% endunless %}{{ tag }}{% endcapture %}
            {% break %}
          {% endif %}  
        {% endfor %}
      {% endfor %}
  {% endif %}
{% endfor %}

{% assign newStockedProductsTags_array = newStockedProductsTags | split: '|' | uniq %}


  {% assign categories = '' %}
  {% for tag in newStockedProductsTags_array %}
    {% if tag contains '_' %}
      {% capture categories %}{% unless categories == blank  %}{{ categories }}|{% endunless %}{{ tag | split: '_' | first }}{% endcapture %}
    {% endif %}
  {% endfor %}
  {% assign cat_array = categories | split: '|' | uniq %}
{% endif %}

 

0 Likes
New Member
5 0 0

Edit:  Just a tiny addition needed and now this code works with selected filters too. 

 

All I had to do was change:

 

{% if category == category_first_loop and tag != tag_first_loop%}

to this:

 

{% if category == category_first_loop and tag != tag_first_loop or current_tags contains tag%}

 

Complete code below:

 

{% comment %}
  A loop to catch and filter out the different tag categories.
  This is mainly for advanced tagging, but will also help us strip
  out any tag categories from our tags (E.g. remove BRAND_ from BRAND_tag)
{% endcomment %}
{% if request.page_type == 'collection' and collection.all_tags.size > 0 %}

  {% assign stockedProductsTags = '' %}
  {% assign newStockedProductsTags = '' %} 
  {% for product in collection.products %}
    {% if product.available %}
      {% for tag in product.tags %}
        {% capture stockedProductsTags %}{% unless stockedProductsTags == blank  %}{{ stockedProductsTags }}|{% endunless %}{{ tag }}{% endcapture %}
      {% endfor %}

{% assign stockedProductsTags_array = stockedProductsTags | split: '|' | uniq %}

      {% for tag_first_loop in stockedProductsTags_array %}
        {% assign category_first_loop = tag_first_loop | split: '_' | first %}
        
        {% for tag in stockedProductsTags_array %}
          {% assign category = tag | split: '_' | first %}
          {% if category == category_first_loop and tag != tag_first_loop or current_tags contains tag%}
            {% capture newStockedProductsTags %}{% unless newStockedProductsTags == blank  %}{{ newStockedProductsTags }}|{% endunless %}{{ tag }}{% endcapture %}
            {% break %}
          {% endif %}  
        {% endfor %}
      {% endfor %}
  {% endif %}
{% endfor %}

{% assign newStockedProductsTags_array = newStockedProductsTags | split: '|' | uniq %}


  {% assign categories = '' %}
  {% for tag in newStockedProductsTags_array %}
    {% if tag contains '_' %}
      {% capture categories %}{% unless categories == blank  %}{{ categories }}|{% endunless %}{{ tag | split: '_' | first }}{% endcapture %}
    {% endif %}
  {% endfor %}
  {% assign cat_array = categories | split: '|' | uniq %}
{% endif %}
0 Likes