CMS Filter - Greyed out checkbox for filters without matching content in CMS?

Attributes
1

Hi, we’re working on a client project which uses CMS Filters. The content of the CMS will change from time to time, and it’s possible that a certain filter value won’t exist in any of the CMS entries for some time. However, is it possible to still have this filter showing up value in our filter list, but make it greyed out? So the visitor knows this option does exist, it’s just not present in any of the items at that particular moment? Currently, we achieved this by doing it by hand, but that’s not ideal once our client will be taking care of filling and maintaining the CMS.

Here is a read-only link

You can open the filters with the orange button at the bottom. In this case, my question is applicable to the filters ‘HBO’ and ‘MBO’ under the category ‘Soort studie’.

Thanks in advance!

2

hey @studiopiraat! Can you test this script?

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

        filtersData.forEach(function (element) {
          const elements = element.elements;
          elements.forEach(function (element) {
            let filterValue = element.value.trim();
            let resultsNumber = element.resultsCount;
            resultsArray.push({ filterName: filterValue, filterResults: resultsNumber });
          });
        });

        resultsArray.forEach(function (filter) {
          var elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
            function (element) {
              return element.textContent.trim() === filter.filterName;
            }
          );

          elements.forEach(function (element) {
            if (element.tagName !== 'LABEL') return;

            const children = element.children;

            for (let i = 0; i < children.length; i++) {
              filter.filterResults === 0
                ? children[i].classList.add('checkbox-disabled')
                : children[i].classList.remove('checkbox-disabled');
            }
          });
        });
      },
    ]);
  }, 100);
</script>

You’ll need to add it to the </body> part of the page’s custom code, and remove the checkbox-disabled class from the elements you have manually set.

3

Hi Luis, wow, this works like a charm! I’m going to analyze your code line by line, to figure out how it works exactly. Thank you so much for your hard work, much appreciated!