Hide filter when it returns zero

Attributes
1

Hi, Great to see the new forum. I hope it will become a wonderful source to find solutions.

I am looking for a way to hide options in my filter list if there are no collection items to show.

I’m setting up filtering for tangiblee.com on a range of collections. When one filter is already active, a second filter will no longer have items behind all the filter options. Rather than showing “no items found” it would be more user-friendly to hide the filters that will generate an empty result.

I hope there is some ready made solution for this.

Thanks!
Marcel

1 Like
2

yeah this is a solution i would love to see. Also the possiblity to show how many items in the collection list we have. I think Webflow needs to provide a solution here. I don’t know if custom code can fix this.

3

Showing how many items there are is already possible with Finsweet Attributes.

4

i mean something like:

Socks (49)
Shoes (180)
Yellow (3485)

and not: “you found (45) out of (373783) Items”

How can i show the counted items for individual collection lists?

1 Like
5

Seems this is something that is too complex, all I found is using a very heavy amount of custom code :frowning: I was hoping there would be a simpler way to scan through the collection each time a filter would be applied. Having like a general code regardless of the amount of filters and their names.

6

Hey @Chris1 @marcel can you test this code?

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

      // The callback passes a `filterInstances` array with all the `CMSFilters` instances on the page.
      const [filterInstance] = filterInstances;
      const filterFields = filterInstance.filtersData;

      // The `renderitems` event runs whenever the list renders items after filtering.
      filterInstance.listInstance.on('renderitems', (renderedItems) => {
        filterFields.forEach((filterField) => {
          const elements = filterField.elements;

          elements.forEach((element) => {
            if (element.mode === undefined) {
              element.element.parentElement.style.display =
                element.resultsCount === 0 ? 'none' : 'flex';
            }
          });
        });
      });
    },
  ]);
</script>

This should work no matter how many filter fields you have on your page, it will ignore range filters as those do have a mode to or from. For selects and input you can use a class like

<style>
      .always-visible {
        display: flex !important;
      }
    </style>

so that they are kept visible on your page.

Here is a little recording on how it works.

7

Hi @Support-Luis, thank you for the help. For some reason, I can’t get it to work. I added the code to the page, but now no filters are working and it even hides the search bar despite adding the CSS. Any idea what I did wrong?

https://preview.webflow.com/preview/tangiblee?utm_medium=preview_link&utm_source=designer&utm_content=tangiblee&preview=12cc34c8f242adafff4862ff145f392a&pageId=64637b932c62b57e88618e1a&workflow=preview

8

hey @marcel how are you adding the categories? I see some placeholder text then the actual categories replace this text once the page loads. The categories may be taking longer to be rendered than what CMS Filter is taking and since there is no match on the page all filters are hidden.

9

Thanks for the swift reply @Support-Luis. They are added via fs-cmsnest.

10

This shouldn’t affect the filter functionality, however, I do see some issues that might be upsetting the setup in some way.

  • The target div for CMS Nest should be empty and now we have some text in the divs, can we clear them?

  • We are using dropdowns for the filter elements, dropdowns should only be used for sorting elements. Can we change the setup for Select? Or better yet, can we have the checkboxes/radios shown on the page? After we verify everything is working as it should we can use the dropdown/select