Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Bug with collection.filters Liquid object access scope

Bug with collection.filters Liquid object access scope

caitou
Shopify Partner
6 0 2

I am trying to list all the filterable values available of a specific collection. However, if I try to access the array of filter objects using {{ collections[handleName].filters }}, it doesn't return anything UNLESS I am already on that specific collection page.

 

For example, {{ collections['sample-collection'].filters | size}} will return the correct number if I am currently on /collections/sample-collection, and it will return 0 on any other page on my site.

 

Weirdly enough, {{ collections['all'].filters | size}} returns the correct number on any page on my site.

 

I've combed through all the dev documentation (https://shopify.dev/docs/api/liquid/objects/filter & https://shopify.dev/docs/api/liquid/objects/collection ) and I cannot find any clarification on this issue.

Would anyone have any more information on this?

Replies 2 (2)

okur90
Shopify Partner
126 20 18

Hi @caitou 

 

When you try to access the filters of a specific collection, they are only available on that collection's page, because the filters are generated based on the products within the collection that are currently being viewed.

 

To access the filterable values of a specific collection on any page, you would need to create a custom solution.

 

Create a new snippet called `collection-filters.liquid` and add the following

 

{% assign filter_tags = '' %}

{% for product in collections[handleName].products %}
  {% for tag in product.tags %}
    {% unless filter_tags contains tag %}
      {% assign filter_tags = filter_tags | append: ',' | append: tag %}
    {% endunless %}
  {% endfor %}
{% endfor %}

{% assign filter_tags_array = filter_tags | split: ',' | sort %}
{% for filter_tag in filter_tags_array %}
  <a href="/collections/{{ handleName }}/tag={{ filter_tag }}">{{ filter_tag }}</a>
{% endfor %}

 

Include the snippet in your theme file where you want to display the filters, and pass the collection handle as a variable. Replace `sample-collection` with the handle of your collection

 

{% assign handleName = 'sample-collection' %}
{% include 'collection-filters' %}

 

By doing this, you'll be creating an array of unique tags used in the products of the specified collection and displaying them as filters, regardless of which page you're on.

Code Slingin, Pixel Wranglin - Laugh it up at onlinex.com.au
caitou
Shopify Partner
6 0 2

Hi Okur90, thanks for your reply! However this is a bit of a dated solution as Shopify 2.0 allows for filtering by metafields and the tags alone do not reflect all the filters available for that collection. Is there any way to show this?

Furthermore, while I understand the filters are generated based on the products in view, that still doesn't explain why the collections['all'] object can display its iterable filters on any page.