CMS Nest

FlowTricks CMS Nest - WebflowFlowTricks CMS Nest

Affiliate Link

Setup

Add this script to page or site settings footer code

<script src="https://cdn.jsdelivr.net/gh/flowtricks/[email protected]/cms-nest.js"></script>

Add data-cms-nest="item" to cms item

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>