Use Filters inside the items themselves

Hi,

I’m building an index of projects. Each project has a name and a variety of categories. Each project is displayed in line with its name and its categories.

What I’m trying to achieve is to be able to filter the list by using the categories WITHIN the list itself.

Here’s my initial set up: Webflow - Tests Studio Format

But of course, for now, only the categories of the first project work as filters.

Do you think there would be any work around to achieve this?

Thanks!

Hey @pablo.faust! This happens because you can’t have more than 1 form per filter instance, as you have a form per item only the first one will work.

One thing that we can try, which is a little bit hacky, is to have a hidden form with the actual filters and set some custom mirror clicking so you can select the categories from within the list, and these check/uncheck the hidden filter elements.

I can not guarantee this will work but it could be an idea to build from.

That looks like a not-so-easy but great idea! I’ll have a try.

Thanks!

1 Like

let me know how it goes! :muscle:

It worked quite well!
https://tests-studio-format.webflow.io/

Let’s go! That works awesome! :muscle:

Hi again!

I implemented it on the actual website, and I get a very odd behaviour. The first click on a Service is fine, but then if you try to refilter the list by Service, the output seems totally random.

Do you understand why?

Live: Projets
Read-Only: Webflow - Studio Format

Hey @pablo.faust! This could be because of the active filters already being applied, as you are using checkboxes these filters stack on top of each other.

Could you add an active class to any filter UI to see which filters are being considered?

1 Like

Thanks for the answer! The reason of the bug was that I was using two CMS on the same page…

You said that checboxes were responsible for the “AND” behaviour on the filters. Is there a way to get exclusive filters? For example, when I click A, I get all the items with the A category. Currently, when I click B, it adds the items with A OR B categories, so it broadens the filtering. How could I get the filter to be more precise each time I click on a new category?

We have this setting available for CMS Filter which can set the strictness of the filter matches. The “AND” filter would be this → fs-cmsfilter-match = all

1 Like

Hi again @Support-Luis ,

I’m still trying to improve my system. Currently, there is no way to indicate the user which filter is active or not. I would like to make gray all filters except the one that has been clicked. Do you have an idea on how to get there?

https://studio-format.webflow.io/projets

https://preview.webflow.com/preview/studio-format?utm_medium=preview_link&utm_source=designer&utm_content=studio-format&preview=cf4a4b53cc3c76b46f8b7df3d31eb644&pageId=6525613e5e3694b8cd8495a3&workflow=preview

Hey @pablo.faust! Seems to me that you are halfway there with your hover interaction. I see you have used the active class option from CMS Filter but I do not see any active-filter class in your project. have you set this up?