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 the CMS Load callback to initialize CMS Nest
Add this snippet to </body> tag
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsload',
(listInstances) => {
window.fsAttributes.cmsnest.init();
},
]);
</script>
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.
Hey @Michael3! Glad to her it worked out! 
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 
@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.
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
@nnnathaniel Iāve taken a look at the setup once more. Interesting issue but I think it boils down to the solution only fetching the items loaded (by loaded I mean published and available in the HTML without the page loading, as the page is not loaded CMS Load can not load all items on the same page) natively by Webflow, as the limit is 100 items per page only the first 100 are fetched correctly.
Your solution is the best approach as you are nesting 189 items on one single item which is also the first time I have seen this use case.
Thank you for sharing it!