Filtering data dynamically with liquid

I’m trying to do a dynamic filtering process on a page - (currently the list is only showing items filtered by North). I can set these filters up as duplicate pages with link to each “filtered” page but just wondering if there is a way to achieve this in a more dynamic way using liquid and only 1 page?

Absolutely. One way to do it is to pass the filter value in the URL and pull it out into your component tag.

So on your filter buttons you might apply a link like this:


Then in your component you might have:

{% component ... filterValue: "{{request.request_url.params.filter}}",  ... %}

Also, if your filters are based on Tags or Categories you could even dynamically create your filter buttons base don whatever Tags/Categories you have.

Thanks Adam - I’ll try that.

Thanks Adam. The filters are working now. I also want a button to display all (no filters). I’ve tried a couple of things can you suggest a way to do that?

When the filterValue is empty it should return all results.

Is that not the case with your set up?
What is the filterBy set to?

The filterby is set to Area (which is the correct field). To display all I’ve tried:
but can’t get any of them to display everything.

Sorry - those links all look the same but if you hover over them they are all different.

Ok, looks like custom fields don’t quite filter the same as tags.
So, just above your component tag paste this:

{% if request.request_url.params.filter %}
{% assign filterBy = "Area" %}
{% endif %}

Then set up your filterBy like this:

{% component ... filterBy: "{{filterBy}}", ... %}

This will only populate the filterBy parameter with “Area” if you have a filter applied in the URL, else it’ll be blank and return all items.

And so your “All” button can just link to the same page without any filter parameter added.

Thanks Adam - really appreciate your help.

HI Adam thanks for your help on this. This is mostly working now

The only issue is my “area” group has a North, NorthWest, and South filter. The ‘South’ and ‘NorthWest’ both work fine but when I filter on ‘North’ I’m getting ‘NorthWest’ items as well. I did have a space between for 'North West ’ and thought that caused the issue but have removed it and am still having the problem. Any idea how to get around that?

It seems like its filtering for anything starting with 'North"

Ah, ok.
Only 2 ways I can think to workaround this:

  1. Rename the area names so they are all unique (probably not feasible).
  2. Add a Liquid condition in your List Layout wrapping the existing code:
{% if this.area == 'North' %}
{% endif %}

Option 2 should work ok in your case as you are not doing a count of items or using pagination.

thanks Adam. I think I will try renaming the area so they are unique.