Collection Filter-Buttons Preset

Helpdesk Collections
1

Hi,
I found the “Collection Filter-Buttons” under collection presets, but it seems more complicated than I thought to use it or I guess I am to stupid … anyhow … where can I find tutorials or best practices how to set up and configure these buttons? I like the idea to give an option to filter a blog content.

thanks in advance
Ulf

1 Like
2

Hi @ulfs.sitejet,

at which point are you failing? What is challenging you? I will create a small tutorial when I know where should I focus on.

3

Hi @Martin ,
thx for your reply.

to be honest, i drag the preset on the page and then I am not able to configure the filter correcty that it filters my categories and set it back to “without filter”.

So I don’t know how to set the URL correctly and how to set an “reset” button, that means show all items withou filters.

An last but least the collor of the button was not like my theme presets…

1 Like
4

Ok, I hope this will help.

Add a collection:

Screen Shot 2021-12-15 at 16.44.09
Screen Shot 2021-12-15 at 16.44.09961×410 33.9 KB

Add collection filter buttons:

Screen Shot 2021-12-15 at 16.44.36
Screen Shot 2021-12-15 at 16.44.36426×696 24.3 KB

Screen Shot 2021-12-15 at 16.44.18
Screen Shot 2021-12-15 at 16.44.181008×242 7.12 KB

Choose a field, e.g. department:

Screen Shot 2021-12-15 at 16.45.14
Screen Shot 2021-12-15 at 16.45.141917×742 73.5 KB

Set URL to #!filter[columns.department]=Tech to filter all collection entries with department=tech. Use #!filter[columns.department]= to display all collection entries:

Screen Shot 2021-12-15 at 16.46.21
Screen Shot 2021-12-15 at 16.46.211626×406 38.5 KB

Result:

Screen Shot 2021-12-15 at 16.48.09
Screen Shot 2021-12-15 at 16.48.09975×447 15.9 KB

You can add more buttons to filter for different fields.
#!filter[columns.fieldname]=fieldvalue

5

Hi Martin,

thanks a lot, that helped but I have still three problems.

/1
the filter

#!filter[columns.department]=
for reset doesn’t work, the collections stays empty

/2
the filter button is grey with with grey font, not very useful :wink:
the normal setup in my style guide would be grey on yellow

/3
the filtered collections shows the posts in „draft“ mode as well not only the published as the normal collection settings.

you can see my filters here on the bottom.

hope you could assist?
Ulf

6

Hi! In order for the Collection Filter Preset (or the Collection Search Preset) to work, you need to enable the “Consider URL Filters” option from the Collection Container.
This problem is similar to this one, and the instructions are the same: How to use collection search element - #2 by Lucian_Dinu

Hope this helps!

1 Like