Filtering data dynamically with liquid

CMS > Custom Modules
1

I’m trying to do a dynamic filtering process on a page - https://tasbus5.treepl.co/member-links-1 (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?

2

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:

/member-links-1?filter=yourFilterValue

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.

3

Thanks Adam - I’ll try that.

4

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?

5

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?

6

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

7

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

8

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.

9

Thanks Adam - really appreciate your help.

10

HI Adam thanks for your help on this. This is mostly working now https://tasbus5.treepl.co/membership/member-links-1

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"

11

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' %}
    <!-- YOUR LIST LAYOUT CODE HERE -->
{% endif %}

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

12

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

13

Hi All,
Question regarding filtering. Is there a way to exclude a category? I have 3 categories assigned to this module for items.

My filtering is here: https://familyrtc.org/careers

{% component source: “Jobs & Open Positions”, layout: “Career Openings - List”, filterBy: “ItemCategories”, filterValue: “Open Job Positions/EWU Job Posting”, type: “module” %}

I need the filterValue:
to EITHER include: “Open Job Positions/EWU Job Posting” AND “Open Job Positions/DHW Job Posting”
OR EXCLUDE
“Open Job Positions/Foster Parent Opportunities”

14

You can’t filter by more than one category using the filterBy and filterValue parameters, or do an exclude. You would instead need to use a search form or the searchScope parameter.

You can generate the full search form code and module component tag from the Component Manager.
Then just remove all the fields you don’t need.
The default output for a Category search field will be a multi-select box so you can choose multiple categories to filter for (leaving ones not selected to exclude them).
With some customisation to that output, you could change this to checkboxes if that works better for your design.

15

Or you could create a layout that excludes items with the unwanted category.
If the unwanted category is called, eg ‘boring_jobs’, then your layout code could be:
{% unless this.itemcategories == boring_jobs %}
(your code from the “Career Openings - List” layout)
{% endunless %}

I don’t know whether Adam’s solution is the more ‘elegant’ way to achieve the results you want, but he can advise. :grinning_face_with_smiling_eyes:

1 Like