Hide filter buttons when no tags are found

Attributes
1

I am looking for a way to automatically hide some filter buttons on page load if the connected collection has no items with matching tags at the moment.

this will help me avoid having to unpublish some categories just to hide the filter buttons when there are currently no items.

ready-only: Webflow - ZHAW – entrepreneurship

2

Hi @uebersaxsamuel!

This will be a native feature in Attributes V2, which is launching very soon!
In the meantime, if you’d prefer, I can create a custom script to get it working right away.

Let me know what works best for you! :flexed_biceps:

2 Likes
3

Good to hear, @Support-Pedro.

I will need it by the end of the week. So it depends on your launch, I guess. Thank you.

4

Hi @uebersaxsamuel!

I made this code for your page.

First, add a hide class to your category-filter-menu is-centered div. This is to prevent flashing

image
image241×204 7.87 KB

Then add this code before your </body> tag.

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

      filterFields.forEach((filterField) => {
        filterField.elements.forEach((element) => {

          const filterButtonWrapper = element.element.closest('.w-dyn-item');
          if (filterButtonWrapper) {
            if (element.resultsCount === 0) {
              filterButtonWrapper.style.display = 'none';
            }
          }
        });
      });

      document.querySelector(`.category-filter-menu .is-centered`).classList.remove(`hide`);
    }
  ]);
</script>

Hope this helps! Let me know if you need any help. :flexed_biceps:

1 Like
5

amazing. Thank you.

1 Like