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:
-
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.
-
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.
-
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:
-
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.
-
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:
-
Has anyone implemented dynamic filtering with Finsweet in a similar way? Any tips on adding data attributes to items in a Collection List?
-
Are there any workarounds to dynamically add custom data attributes to these radio buttons within Webflow?
-
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