Filters not hiding options with data-count="0" despite full CMS Filter setup

Attributes
1

Hey Finsweet team,

I’m building an experience marketplace using CMS Filter, and I’ve hit a wall with dynamic filtering visibility. I’m trying to get filters to hide options that have no results — for example, if someone selects the state of Montana, and there are no Air Experiences there, I want “Air Experiences” to disappear from the Category filter.

My Goal:
• When a user selects a State, the Category and Experience Type filters should update to hide any options that have 0 results.
• This should also work in reverse — selecting a Category should hide States where there are no matching experiences.

My Setup:
• Using Finsweet CMS Filter (via Attributes)
• CMS structure:
• Experiences have reference fields: States, Categories, Types
• Each filter (States, Categories, Types) is a Collection List
• Each item:
• Has a div with fs-cmsfilter-count (e.g., fs-cmsfilter-count=“categories”)
• Inside is a custom checkbox div (since Webflow does not allow native checkboxes in Collection Lists)
• This div has:
• fs-cmsfilter-field set to the appropriate group (e.g., categories)
• A data-value bound to the CMS item’s Slug
• Experience List wrapper has fs-cmsfilter-element=“list”

Scripts I’m Using:

  1. Copying data-value to value so Finsweet reads it:
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('[data-value]').forEach(el => {
    el.setAttribute('value', el.getAttribute('data-value'));
  });
}); (edited)
  1. Hiding filter options with data-count=“0”:
document.addEventListener("DOMContentLoaded", function () {
  const filterGroups = ['states', 'categories', 'types'];
  function hideZeroCountFilters() {
    filterGroups.forEach(group => {
      const options = document.querySelectorAll(`[fs-cmsfilter-count="${group}"]`);
      options.forEach(option => {
        const count = parseInt(option.getAttribute('data-count') || '0', 10);
        option.style.display = count > 0 ? 'block' : 'none';
      });
    });
  }
  document.addEventListener('fs-cmsfilter-update', () => {
    setTimeout(hideZeroCountFilters, 100);
  });
  setTimeout(hideZeroCountFilters, 500);
});

What’s Not Working:
• Filtering itself works (Experiences list updates when selecting filters)
• But the filter options with data-count=“0” are not hiding — they still display
• I have confirmed in the DOM that:
• data-count is updating correctly
• Elements are still visible even when data-count=“0”

Live Page to See It:

If anyone has suggestions or sees what might be missing, I would appreciate your help. I have followed all the steps in the documentation and forum posts but still cannot get the dynamic hiding to work properly.

Thanks in advance.

2

Hi @mdobreva!

I made this custom script, delete the previous code, and add this one before your </body> tag.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      const [filterInstance] = filterInstances;

      const updateFilters = () => {
        filterInstance.filtersData.forEach((filterField) => {
          filterField.elements.forEach((element) => {
            const wrapper = element.element.closest('.w-dyn-item');
            if (wrapper) {
              wrapper.style.display = element.resultsCount > 0 ? '' : 'none';
            }
          });
        });
      };

      updateFilters();
      filterInstance.listInstance.on('renderitems', updateFilters);
    },
  ]);
</script>

Let me know if it works for you or if you need to make any changes! :flexed_biceps: