How can I ensure that all items in a Webflow collection are recognized and displayed correctly when using FINSweet attributes CMS filters on a form, list, and text items to filter based on a selected radio button?

To ensure all items in a Webflow CMS collection are displayed and correctly filtered using Finsweet’s CMS Filter with radio buttons, you need to align your Webflow structure and the Finsweet Attributes configuration properly.

1. Set Up the Core CMS Collection List

• Add a Collection List on your page and bind it to your desired CMS Collection.
• Each item should include the content you want to filter (e.g., image, name, category tag).
• Assign an Attribute: fs-cmsfilter-element="list" to the Collection List wrapper.

2. Add the Filter Controls (Radio Buttons)

• Use a Form Block or custom <div> to contain your filter controls.
• For each radio input:
• Use the attribute: fs-cmsfilter-filter="your-filter-name"
• Use the value of the radio input to match the collection item’s category/tag/text (case-sensitive).
• Example: If you’re filtering by category and one radio button is for "Marketing", the input’s value should be Marketing.

3. Tag CMS Items with Filter Data

• Inside each Collection Item, wrap the content with a div (e.g., "Filter Item Wrapper").
• Add the attribute: fs-cmsfilter-field="your-filter-name" to this wrapper or a span/div inside it.
• This field should contain or display the raw value that matches the radio values (e.g., "Marketing", "Design").

4. Initialize Finsweet Attributes CMS Filter

• Make sure the Finsweet CMS Attribute script is included on the page.
• You can add it via the CDN:
• Add the script link in Page Settings > Before tag.
• Script URL (as of 2024): https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js

5. Make Sure All CMS Items Are Loaded

• If you’re using pagination or load more, Finsweet CMS Filters won’t apply to items that haven’t loaded.
• To fix this:
• Add the Load All script by using the Finsweet CMS Load attribute script.
• Use attributes:
  • fs-cmsload-element="list"
  • fs-cmsload-mode="pagination" or "load-more" depending on your setup
  • Add fs-cmsfilter-element="list" to the same wrapper so filtering works after loading all items.

6. Check for Value Matching Issues

• Ensure the radio input values exactly match the text you are filtering on.
• Avoid extra spaces, different cases, or corrupted characters.
• Use the developer console to inspect values if needed.

7. Add a “Show All” Option

• To reset or show all items, add a radio input with an empty value or the default category.
• Label it appropriately (e.g., "All").

Summary

To get Finsweet Attributes CMS Filter working with radio buttons, make sure your CMS list items carry the proper fs-cmsfilter-field values that match the fs-cmsfilter-filter values from your radio inputs, and load all CMS items up front using the CMS Load tool if needed. This ensures the filter logic can detect and act on all items correctly.