Hide 'Clear All' filter if no filters are selected

Attributes
5

Hey @edrock! We used some custom code to manage this. The CMS Filter API provides a filtersActive boolean but it seems it does not update immediately so a slight delay is needed. You are welcome to expand this code yourself and please do share if you find a better solution!

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const [filterInstance] = filterInstances;
      const clearLink = document.querySelector('[fs-cmsfilter-element="clear"]');

      const updateClearLinkDisplay = () => {
        filterInstance.filtersActive
          ? (clearLink.style.display = 'block')
          : (clearLink.style.display = 'none');
      };

      updateClearLinkDisplay();

      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        setTimeout(() => {
          updateClearLinkDisplay();
        }, 125);
      });
    },
  ]);
</script>
1 Like