Filtering CMS with sub filter

Attributes
,
1

Hey Team, help me to understand with filtering and subfiltering in such design case. Design attached.

ALLE is by default if it’s possible and on click any other filter it opens sub filter with title and three more filters

image
image1724×1252 152 KB

image
image1730×904 143 KB

and there must a pagination when it’s needed and hide when less then 12 objects on the filtered Category.
image
image1814×256 7.23 KB

I think this video could help a bit
https://www.youtube.com/watch?v=qq4uM0-R5BA&t=311s

2

Hey @timoshenkopawell! Both of these features can be achieved with some custom code, for the first one I would need a link to test accordingly.

For the second one, we can use this on the </body> section of the custom code.

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

      const [filterInstance] = filterInstances;
      const { listInstance } = filterInstance;

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        if (listInstance.validItems.length <= listInstance.originalItemsPerPage) {
          listInstance.paginationWrapper.classList.add('hide');
        } else {
          listInstance.paginationWrapper.classList.remove('hide');
        }
      });
    },
  ]);
</script>

This should hide the pagination wrapper if the valid items, an array with the results, is lesser than or equal to the original number of items per page, set in Webflow pagination settings.

Here is a quick demo of how the code works!

3

Thanks @Support-Luis but I’ve done it with native Webflow Tabs :melting_face:I appreciate your help and time.

1 Like
4

No worries! Glad you found a way :muscle: