CMS Load + Filters not working with a large collection list

[caleb]

I’m using the Load-All and Filters Attributes. One of my collection lists is 480 items. It’s not filtering.

The issue is that the overall filter functionality loaded faster than the CMS collection (the entire collection list with 480 items takes longer to render). So the filters functionality starts working while the list hasn’t loaded, and when you filter this collection, it doesn’t work.

Anyone have a solution

[Support-Luis]

hey @caleb! One solution would be to delay the Filter Attribute until after CMS Load has finished loading all elements in the page b y using this tag on the CMS Filter script defer fs-attributes-preventload='true'

And then using the CMS Load callback to initiate CMS Filter

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

          window.fsAttributes.cmsfilter.init();
        },
      ]);
    </script>

[caleb]

Thank you @Support-Luis but after implementing this solution, there was an issue where one CMS item replaced another CMS item when using search.

See image for example. The “City” CMS is replacing the “Features” CMS item. In the image, it should be “1 Bedroom”.

[Support-Luis]

Interesting, can you please share your links?