CMS Nest
Setup
Add data-cms-nest="link" to link block inside item
Link block must be connected to the collection page of the current item. Link block can be set to display none if needed.
Add data-cms-nest="dropzone-1" to div inside item
The nested collection list will be added inside this dropzone. For multiple dropzones connected to different nested collection lists, use dropzone-2, dropzone-3, and so on.
Add data-cms-nest="target-1" to cms list on collection page
On the collection page for the item, add a collection list containing the category tags for that item. The cms wrapper can be set to display none if you don't want it to show on the cms page. For multiple targets connected to different cms lists, use target-1, target-2, and so on.
Running code when cms nest is finished adding nested items
Once all nested items are added to the page, the page height will increase. If using GSAP ScrollTrigger, it's helpful to run a ScrollTrigger.refresh() once all items are added so that the start and end positions of the ScrollTrigger are updated.
<script>
window.addEventListener('cmsNestComplete', () => {
console.log('cmsNest has finished adding all elements to the page.');
ScrollTrigger.refresh();
});
</script>Rerunning CMS Nest Solution
If new items are added to the page through pagination, filtering, or ajax modals, it's helpful to re-run the script so that the new items also get nested lists. We can do so like this.
<script>
cmsNest();
</script>Last updated