How to filter a blog by tags/taxonomies dynamically (frontend)

[pathly-dev]

Hi, I have a blog (collection) with a lot of blog posts (entries) and each entry has different tags (taxonomy terms) – like color or size – so you can filter by specific tags via a select in the frontend, e.g. I want to filter by the color 'red' and the size 'big'.
Now I'm still pretty new to Statamic and I don't know how to do that.

I know that you can filter like

{{ collection:blog color:is="red" }}
   ...
{{ /collection:blog }}

But I don't want to do that hard coded, it should be dynamically filterable by the user.

Some ideas I found were using the API or GET, but I don't understand how and how to use, since the docs aren't that newby-friendly.

Hopefully someone can help :)

[jackmcdade]

If you want to use GET params in the URL (my preference), you can do something like this:

// example.com/blog?color=blue&size=massive
{{ collection:blog :taxonomy:color="get:color" :taxonomy:size="get:size" }}

{{ /collection:blog }}

[pathly-dev]

@jackmcdade Ok thanks, that is what i found so far. But how do these parameters come into the url? That is something I don’t understand and didn‘t found.

[jackmcdade]

That's custom JavaScript land – not something Statamic would do natively. You would basically wire up the select input with change events that push the value to query strings in the URL.

[pathly-dev]

Ah ok, I understand! Thanks for your help! :)

[pathly-dev]

I tried this out, but it doenst work. When I try this instead

{{ collection:blog :color:is="get:color" }}
{{ /collection:blog }}

it is working partially. But then it doenst show anything when there is no filter set, only when I selected one.

I'm not sure, what I am doing wrong. The taxonomy is called color, also the field of the entry.

[jackmcdade]

Wrap the tag with a check for get:color and that should do the trick.

…

On Feb 12, 2022, at 10:19 AM, Pathly Dev ***@***.***> wrote:  I tried this out, but it doenst work. When I try this instead {{ collection:blog :color:is="get:color" }} {{ /collection:blog }} it is working partially. But then it doenst show anything when there is no filter set, only when I selected one. I'm not sure, what I am doing wrong. The taxonomy is called color, also the field of the entry. — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.