Dynamic Filtering for CMS Collection List with Finsweet Attributes

[SannaLW]

Hi Webflow community!

I’m working on a page where users can filter spaces for rent based on event categories and capacity (both standing and sitting). I have the following requirements:

1. Event Categories: Users should be able to select one or more event categories using radio buttons. When a category is selected, all spaces tagged with that category should be shown.

2. Standing and Sitting Capacity: There are two dropdowns (or checkboxes), one for standing capacity and another for sitting capacity. Users should select one range from each dropdown, and the filter should only show spaces that fall within those capacity intervals.

3. Search between Spaces: This functionality is already working separately, but I’d like it to integrate with the filter above.

Current Setup:

• I’ve set up CMS Collections for Event Categories, Capacity (Standing and Sitting), and Spaces. Each space is tagged with relevant categories and capacities using multi-reference fields.

• I’m using a Collection List to display the radio buttons for event categories dynamically.

• For filtering, I’d like to use Finsweet’s CMS Library for multi-criteria filtering, but I’m struggling with adding the necessary data attributes to dynamically generated elements (the radio buttons in my Collection List).

Challenges:

1. Adding Data Attributes to Dynamic Elements: Since the event category buttons are automatically created in a Collection List, I’m not sure how to add a data-category attribute to each radio button based on the category it represents. I’ve tried using Webflow’s native settings but couldn’t find a way to directly add attributes to dynamic elements.

2. Finsweet Integration: Once I have the data attributes, I need to make sure the Finsweet CMS Library can filter by both event category and capacity ranges.

Here’s an image showing the design I’m aiming for and how I want the filtering to work:

Questions:

1. Has anyone implemented dynamic filtering with Finsweet in a similar way? Any tips on adding data attributes to items in a Collection List?

2. Are there any workarounds to dynamically add custom data attributes to these radio buttons within Webflow?

3. Any general advice on combining Finsweet filtering with dropdown filters in Webflow?

Thanks in advance for any help or suggestions!

---

Here is my public share link: Webflow - Kulturarenor

[memetican (Michael Wells)]

Unpacking these types of setups can be a lot of work so I’ll answer more at the surface level without knowing the hard implementation details of your setup.

@SannaLW

Adding Data Attributes to Dynamic Elements: Since the event category buttons are automatically created in a Collection List, I’m not sure how to add a data-category attribute to each radio button based on the category it represents. I’ve tried using Webflow’s native settings but couldn’t find a way to directly add attributes to dynamic elements.

You can add custom attributes and bind them to the CMS. In filter setups I’ll generally use something like the CMS item slug to ensure it’s unique, but you could use another field and bind to that instead as long as it supports your filtering setup.

Failing that, you could use a custom element, with custom attributes. There you’d be manually constructing your radio button but you’d also have greater control over the exact element construction.

@SannaLW

Finsweet Integration: Once I have the data attributes, I need to make sure the Finsweet CMS Library can filter by both event category and capacity ranges.

Finsweet CMS filter is designed for that, you can have multiple filters and filter types. You just have to get the attributes and data right so it can do its thing.

[SannaLW]

Thank you, i’ll give it a try. :)