Help! List Filters not working with nested lists (Attributes v2)

Finsweet Components
1

So, I’ve created nested lists to categorise the projects on my client’s site . These will appear on the individual project pages but will probably eventually be hidden on the project listing page. These are working. I’m now trying to filter the projects with checkboxes on the listing page using the different categories from the nested lists. This is the bit that isn’t working at the moment.

Here’s the site…
Read only link: Webflow - My Eco Garden Room
Staging site: Recent Projects – Beautifully Crafted Eco-Friendly Garden Rooms

Note: everything has been done with Attributes v2.

Please help, it’s probably something simple but I’ve checked that I’ve implemented everything as shown in the documentation and can’t see anything wrong.

Client is now chasing me on this one! :upside_down_face:

Thanks,
Gareth

2

Hey @gareth! :folded_hands:

I can see exactly what’s happening with your nested lists filtering setup. Your HTML structure looks good with the correct fs-list-element attributes in place.

Based on what we’ve seen with similar nested CMS filtering issues, this typically comes down to field mapping between your filter checkboxes and the nested collection data.

Here’s what to check:

1. Verify Exact Field Name Matching
Make sure your filter checkboxes use the exact same field identifiers as your CMS collection fields:

  • Filter checkboxes: fs-list-field="Foundations-Filter"
  • Collection items: fs-list-field="Foundations-Filter"

These need to match exactly - including capitalization and special characters.

2. Check Your Nested Collection Targets
Your fs-list-element="nest-target" elements with fs-list-nest="Foundations" look good, but double-check that the nested collection field names align perfectly with the filter field names.

3. Checkbox Group Naming
Ensure each checkbox group has unique data-name values in Webflow:

  • Foundations checkboxes: data-name="Foundations"
  • Finishes checkboxes: data-name="Finishes"
  • Construction checkboxes: data-name="Construction"

If they all share data-name="Checkbox", they’ll interfere with each other.

A simpler approach might be to try filtering with just one category first (like Foundations only) to confirm the basic filtering works, then gradually add the others. :flexed_biceps:

Could you double-check the field names match exactly between your filter form and your CMS collection?

@Support-Luis or @Support-Pedro can help further if needed.

3

OK, I have checked through all that “Finn” said and all is as recommended but still not working. Have removed four of the filters so we can focus on getting one working first.

@Support-Luis @Support-Pedro what can we try next please?

4

Looking into this @gareth

5

Thanks Jesse

6

Hi @gareth

Everything seems setup correct

I would say main issue would be the filter is mapping the DOM before the nesting is done

So this code should re-init attributes right after nesting is done

<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsnest',
  (listInstances) => {
    // Re-scan & re-init ALL Finsweet v2 attributes
    window.fsAttributes.refresh();
  },
]);
</script>
7

If there’s any issue use this code that makes sure refresh runs only once

window.fsAttributes.push([
  'cmsnest',
  () => {
    requestAnimationFrame(() => {
      window.fsAttributes.refresh();
    });
  },
]);
8

Thanks Jesse, that makes sense. Where should this go? I’ve tried adding it in the embed after the original script but no success so far…

9

Hi @gareth

The code should be placed at the Before tag custom code section

So it runs soon as DOM is ready

10

OK thanks Jesse, have tried that, both with and without the 2nd piece of code, still not working…