Question about adding an 'All' search category as another filter button to my CMS

General
1

Given:
:white_check_mark: Services Collection w/33 services.
:white_check_mark: Service Category Collection w/5 categories.
:white_check_mark: Each service has a multi-reference field with at least one category selected.
:white_check_mark: Finsweet CMS filter setup and working/filtering fine.
:white_check_mark: Added new category and labeled it ‘All’ which instantly created a new filter button on the display page.
:white_check_mark: Added ‘All’ to the multi-reference field for every service [and I really like that it’s part of the same look, feel, and placement as the rest of the filtering buttons].

Issue:
:x: The ‘All’ service filter button is not showing all of the services! it displays a blank.

Question:
:crossed_fingers: :pray: Why isn’t this approach working and is there a way to get it to work? In my mind, if I had just a few, many, or ALL services being filtered by a category, they should all show up! This is what is happening with the other filters :exploding_head: :thinking:

Links:
ROL

Staging

Loom

TIA :grin: :bangbang:

BRAINSTORM: Would it be helpful/possible to setup a hidden button to clear or act in proxy for the ALL button filter using the FS Mirror Click feature? Or,since every filter button is styled identially, wouldn’t that also trigger the mirror clear? Ugg. I think so. Unless it was setup to somehow recognize if the ‘ALL’ category was chosen. I suppose with some JS.

2

Hey @Joseph! The ‘All’ button should not be part of your CMS Collection nor any multi-reference field. An ‘All’ clears all filters and displays the initial un-filtered list.

I’ve created a guide here → How can I add and style an "All" button for CMS Filter on adding and styling such a button. I used a non-cms button with the attribute fs-cmsfilter-element = clear and styled it appropriately.

Take a look at the guide and let me know if you need any extra help :muscle:

3

Good Morning Luis! So, just to be clear, I can’t have this ‘All’ filter option in my button list? I added ‘All’ to every service and would think that’d show all of them. Please explain why this won’t work me. Next question, if I do style up a seperate button, I take it there’s no way to include it in the same position currently styled? Would I place this button right next to the collection list then? So, I’d have to stay with the Clear All link that I have there currently and/or style it up to look the same as the others? Just feels like an uneven/awkward placement for the UX. TIA for your patience with my learning curve. :wink:

PS Followup question. Lemme know if you prefer I ask this separately. I’d like to have a search field that would search all the services by name not just the category. Is that possible?

4

The best option is to have a stand-alone button that handles the clearing functionality, especially if you are using Webflow’s native nesting function, as you have limited the display of items to 1, the all category would not show up on any item, hence the empty list on your first trials. Having this all category in the design where the tags are meant to be visible will create more issues in itself.

I’m sure there is some CSS wizardry that can make the All button part of your category list to avoid weird UX placement as you’ve said. Feel free to inspect the Attributes page to copy the layout as CSS is not my forte.

You can always just have the link with the clear attribute set to it and the filter will clear as expected.

On to this question

I’d like to have a search field that would search all the services by name not just the category. Is that possible?

You can add a comma-separated list of the fields you’d like your search bar to filter for example:
fs-cmsfilter-field = category, name and so on. To target all of the fields in your items you can use the value *

I hope this helps!