CMS Filter + Nest + Load

Attributes
1

I am working on a project and seem to be running into an issue with a combination of Filter, Nest, and Load.

The project is a collection of 100+ products. There are several cms collections that are used for the categorization of the products. One of those collections (sizes) is over 100 items.

The site uses CMS Load to load the products with pagination. It also uses CMS Nest to apply the various muti-reference categories to each product. I have yet to set up CMS Nest to utilize plain-text, however, it may be needed for some of these larger category collections. The site also uses CMS Filter against those Nested collections to filter the products.

In order to utilize one of the cms collections as a filter, since it is over 100+ items, it is loaded using CMS Load. The collection loads and renders, however when selecting an option to filter by it does not filter. The other instances where I use CMS Filter on collections that do not use CMS Load do filter as expected.

I am using the CMS Load callback instructions referenced here: CMS Nest reaching over 100+ CMS items

Can you please take a look and let me know what you see? I will provide a share-only link via DM.

Thank you.

2

Thanks @edrock! I am taking a look

1 Like
3

Hello @edrock, since you are using 3 instances of attributes, it would be best to initiate the filter attribute after Load and Nest are done executing.
So the scripts will execute in this order: Load => Nest => Filter
Here is how you do it
Add defer fs-attributes-preventload="true" to both nest and filter scripts:

<!-- [Attributes by Finsweet] CMS Nest -->
<script defer fs-attributes-preventload="true" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsnest@1/cmsnest.js"></script>

<!-- [Attributes by Finsweet] CMS Filter -->
<script defer fs-attributes-preventload="true" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>

Add the following callback before closing </body> tag

<script>
 window.fsAttributes = window.fsAttributes || [];
 window.fsAttributes.push([
   'cmsload',
   (listInstances) => {
     window.fsAttributes.cmsnest.init();

       window.fsAttributes = window.fsAttributes || [];
       window.fsAttributes.push([
         'cmsnest',
         (listInstances) => {
           window.fsAttributes.cmsfilter.init();
         },
       ]);

   },
 ]);
 </script>
2 Likes
4

Thank you @josephmukunga , that worked. I plan on also adding CMS Sort, should that also be deferred till after Load?

5

Awesome that it worked. If you wish to include sort, yes, you should also defer it till cms nest is done. So you’ll add the defer to the script and add this line after window.fsAttributes.cmsfilter.init(); line

window.fsAttributes.cmssort.init();
6

@Support-Luis I believe I’m having the same issue as above - I have tried the suggested solutions and run the automatic support attribute - am I missing something

7

Hey @gelatoldn! Could you enable Webflow’s native pagination on your child list? This is required for render-all to work correctly :wink: