CMS Collection with nested collection - versus - finsweet list filter

Design help General
1

HI All,

currently working on a website where I added the finsweet List filter atribute.
The clear attribute on the ‘Alle’ button (‘All’ in english) works fine, the problem is that the other filters are not working.

Anyone a solution?

Check page: Klantcases

Here’s my read only link: Webflow - Pronidus - staging (custom)

2

Hi there,

For issues with Finsweet Components’ List filter attribute, here are some general troubleshooting steps you can try:

The List filter attribute is typically used to filter collection lists based on specific criteria. First, verify that the attribute is correctly implemented in your Collection List wrapper and items. Check that the syntax matches Finsweet’s documentation exactly. Common issues often stem from mismatched attribute names or incorrect implementation of the filtering logic.

You can also try clearing your browser cache and testing in incognito mode to ensure there are no cached conflicts. If you’re working on a staging site, make sure you’ve properly initialized the Finsweet Components script in your project settings.

For detailed implementation guidance, you can refer to Finsweet’s official documentation or their community forums where specific use cases are discussed.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

@MitchH

1. Check Filter Button Setup

Each filter button (like “Finance”) must look like this:

<div 
  fs-cmsfilter-element="filter" 
  fs-cmsfilter-field="sector" 
  fs-cmsfilter-value="Finance"
>
  Finance
</div>

2. Wrap Filters in a Container

Wrap all your filter buttons inside a container like this:

<div fs-cmsfilter-element="filters">
  <!-- All filter buttons including "Alle" -->
</div>

3. CMS List Setup

Your CMS Collection List wrapper should have:

<div fs-cmsfilter-element="list">
  <!-- Collection List goes here -->
</div>

Each CMS item should have:

<div fs-cmsfilter-element="item">
  <!-- Item content -->
</div>

4. Script Check

Make sure you’re including the script correctly in the before section:

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/fs-cmsfilter.js"></script>

5. Test Setup

After publishing:

  • Open DevTools (right-click → Inspect → Console).
  • Click on “Finance” or another filter.
  • See if anything shows up as an error.
  • If nothing happens and no error shows, the attributes are likely not connected correctly.
4

At a glance, I see category-sector specified on the filter buttons, but category sector with no hyphen on the tag. Those need to match for filter to locate the right content.