CMS Filter + CMS Load More, loaded items won't filter

Attributes
1

I have a pretty basic set up with a collection list of projects I need to be filtered by some categories/tags. The tags are also being pulled from a collection list and I only show 9 at a time and then using the “load more” functionality to load 9 more tags at a time under the original 9.

The issue I’m running into is that the first 9 filter as expected. But any tag that is loaded as part of the pagination, is not filtering when clicked on. The same attribute is connected to all of the tags but only the 9 that are originally visible actually work to filter the collection of projects.

I’m also using the stagger load option, but it doesn’t appear to be affecting anything. I tried it with both the stagger on and off but no tag thats loaded will filter the list. I looked through the forum but couldn’t find anything matching this exact problem/issue. Any help solving this would be much appreciated!

2

hey @michaellee2245! Can you please share a link?

3

I can send it privately, but its for a client that per our contract I can’t share it publicly until once the site is shipped. Is there a way I can share it privately with you?

4

I’ve DMed you :slight_smile:

5

This was how we solved this. Now after my new filter elements are loaded they also filter the collection list. Big thanks to @Support-Luis on sending me this code!

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');
      const [listInstance] = listInstances;

      listInstance.on('renderitems', (renderedItems) => {
        window.fsAttributes.push([
          'cmsfilter',
          (filterInstances) => {
            console.log('cmsfilter Successfully refreshed!');
            const [filterInstance] = filterInstances;
            filterInstance.storeFiltersData();
          },
        ]);
      });
    },
  ]);
</script>
1 Like