Show only filters with results

Hi,
is there a way to use dynamic visibility to show a filter (checkbox) only if that filter has results? (given other active filters)

Hey @gianluca! Yes! We can hide or style filters with some extra JS, if you want, you can share a live link and I’ll help you out with the code :muscle:

https://bevande-cuni.webflow.io/catalogo-birre?Dark%20Lagers="true"

as an example, if i open this page pre-filtered for dark lagers i would like to hide other beer stiles (of course) but also “Fermentazione → Alta” because all the dark lagers have low fermentation.

thank you as always for your time

Hey @gianluca! Sorry for the delay, this code should achieve what you are looking for.

You can replace the CMS Filter callback you have under the CMS Nest one for this


window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      const searchInput = document.querySelector('#global-field-textsearch');
      searchInput.dispatchEvent(new Event('input', { bubbles: true }));
      setTimeout(function () {
        filterInstances.forEach((filterInstance) => {
          function hideEmptyFilters() {
            const filtersData = filterInstance.filtersData;
            let resultsArray = [];

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

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

              elements.forEach(function (element) {
                let parentElement = element.parentElement;

                if (parentElement.tagName.toLowerCase() !== 'div') {
                  if (filter.filterResults === 0) {
                    parentElement.style.display = 'none';
                  } else {
                    parentElement.style.display = 'block';
                  }
                }
              });
            });
          }

          hideEmptyFilters();
          filterInstance.listInstance.on('renderitems', (renderedItems) => {
            hideEmptyFilters();
          });
        });
      }, 1000);
    },
  ]);

Please test it out and let me know how it goes!

1 Like

it’s working but it seems to slow down the filter, also there are multiple flickering like everything it’s refreshing multiple times, any tips?

well, to be fair only the wine page is this slow… the item count is similar to the spirits page, really cant say what’s the reason so maybe it’s not the script…

https://bevande-cuni.webflow.io/catalogo-vini
https://bevande-cuni.webflow.io/catalogo-spirits

I do not see any of these issues on my end :thinking: