CMS Nest reaching over 100+ CMS items

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

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

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.

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.

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

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.

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

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

Hey @Support-Luis,

I am still having trouble getting more items to load.

If you view this link, this page has 189 items.

But when you view it on this page where I have cms nest and cms load set up (theh Bay Area section ends at Monte Rio). It only shows the first 100. I know there are a lot of items here, but the client ultimately wants this functionality.

Here’s a share link.

Any ideas? Thanks.

Hey @nnnathaniel! I see the items being nested as they should but with pagination set, you can inspect the element and you’ll see the navigation buttons with the style display: none.

Is there any extra setup you used for the working page? I’m curious on what might be causing this as the setup is correct otherwise :thinking:

@Support-Luis Honestly, I have no extra set ups on those pages except for them to load completely on the template pages for the counties. I agree its strange especially because it loads all of them before it does the nesting. Once the nesting occurs then it forces pagination. Are there any other ideas you have that might solve for this?

Hey @nnnathaniel! I tried some custom code but it seems to not be working. I also noticed your Counties’ collection items do not have the multireference fields for the Cities. :thinking:

If you are curious this is the code I tried

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

  window.fsAttributes.push([
    'cmsnest',
    (listInstances) => {
      console.log('cmsnest Successfully loaded!');

      window.fsAttributes.destroy();

      const nestedCollections = document.querySelectorAll("[fs-cmsload-element='list']");

      nestedCollections.forEach((nestedCollection, i) => {
        nestedCollection.setAttribute('fs-cmsload-element', i === 0 ? 'list' : `list-${i + 1}`);
      });

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

Hey @Support-Luis, I couldn’t get this to work by the finsweet default functionality. I’m trying to simply nest the correct items within their corresponding county parent. I did that using Finsweet’s nesting + load features. Theoretically it should work, but as you can see it won’t nest past 100 items for whatever reason.

I ended up just using ajax to pull the data in from the correct url. We don’t have many counties that have more than 100 items, so I just have to do it for Bay Area. This is a bandaid solution, but wanted to share in case anyone comes across this problem:

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

// Function to check if Bay Area section is not empty
function checkBayAreaLoaded() {
    var bayArea = $('.bay-area').parent().siblings().find("[fs-cmsload-element='list']");
    
    // Check if Bay Area section is not empty
    if (bayArea.length > 0) {
        clearInterval(checkInterval); // Stop the interval
        
        // Make the AJAX request
        $.ajax({
            url: 'https://petehealth.webflow.io/county/bay-area?efea0dd4_page=2',
            method: 'GET',
            success: function(response) {
                // Parse the response HTML content
                var $responseHtml = $(response);
                
                // Extract the desired selector and its contents
                var newItemsHtml = $responseHtml.find("[fs-cmsload-element='list']").html();
        
                // Replace the existing items on the page with the fetched items
                $(bayArea).append(newItemsHtml);
            },
            error: function(xhr, status, error) {
                // Handle errors
                console.error(status, error);
            }
        });
    }
}

// Check if Bay Area section is loaded every 500 milliseconds
var checkInterval = setInterval(checkBayAreaLoaded, 500);
</script>

Obviously when I update to the live server, I’ll be updating the urls, but seems to be my best option at the moment.

Hey @nnnathaniel! Can you share a read-only? I’d like to take a look at the setup. There should be no need to write the request yourself to fetch the data as CMS Nest does this.

Hey @Support-Luis heres the read only link: Webflow - PeteHealth

@nnnathaniel where are you showing the nested list?

It’s in the Locations page: Webflow - PeteHealth

And in the counties template I’ve added the necessary powerups: https://preview.webflow.com/preview/petehealth?utm_medium=preview_link&utm_source=dashboard&utm_content=petehealth&preview=612ec755d42bd4323b7177ce5c8500e6&pageId=6494b5a7d285c686e55f61b4&itemId=654c4bd6ca978d0214315a28&workflow=preview