CMS Nest reaching over 100+ CMS items

Attributes
1

We are building a site that is using CMS Nest to dynamically nest the related items to each collection, this has come to a point where the CMS Collection that is used to nest is over 100+ CMS item. We have tried using CMS Load but is fixing it.

Any suggestions? Attached is the share-only link:
https://preview.webflow.com/preview/cprime?utm_medium=preview_link&utm_source=designer&utm_content=cprime&preview=fa6e581a665f2b36577a51dc980afb45&pageId=64652153132eabd21854815d&workflow=preview

2

hey @info2! If your collection to nest is 100+ items you can try this:

For the CMS Nest script use this script:

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

Child collection (COLLECTION TO NEST)

Use CMS Load set to render-all

  • Enable pagination with 100 items per page

  • Activate Speed Boost

Use CMS Load callback to reinitialize CMS Nest

Add this snippet to </body> tag

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

Hey @Support-Luis , great solution!
Is there a way to load the script regularly and ā€œre-loadā€ it again after all scripts are loaded?

Asking, since I have multiple CMS lists that have a nested element in them, and the first item is at the top of the page. With the current solution it takes long time for the nested items to load.

4

Hey @avivtech! You can let it load normally with the rest of the scripts and you can use

window.fsAttributes.cmsnest.destroy();
window.fsAttributes.cmsnest.init();

to destroy and re-initialize the attribute within any callback or other needed code snippet has been executed.

5

Hey @Support-Luis you once helped me adding 100+ items. Now the client experiences ā€œloading in packages" and sometimes the loading process seems to stop for quite some time. Because we are showing the number of items he can filter by it is quite obvious. Is there a way to avoid the loading in packages and/or to cache the information loaded?
https://preview.webflow.com/preview/bookophile?utm_medium=preview_link&utm_source=designer&utm_content=bookophile&preview=e3ab22ada6b410546ef069a0ee3fe074&pageId=643f8d387d2b0a4fe6d9185f&workflow=preview

6

Hey @koptiz! You do not have the complete setup for CMS Load, you are just missing the load mode value. You could use fs-cmsload-mode=render-all but be mindful that this will load ALL items, if there are too many or the elements might slow the page down you can opt to use ā€˜fs-cmsload-mode=paginationā€™.

CMS Load will also cache the items automatically for better performance.

7

Hi there ā€“

Iā€™ve tried this solution but it still doesnā€™t render everything. Iā€™m hoping itā€™s something simple that Iā€™m missing. It also behaves differently depending on the sort option on the nested collection.

Hereā€™s a link to my site

Thanks in advance

UPDATE: I figured it out. I had the attributes code in the Head code section of the site custom code. I took a shot and moved it to the individual pages I was having problems with. It now works.

1 Like
8

Hey @Michael3! Glad to her it worked out! :muscle: