# CMS Nest

{% embed url="<https://www.youtube.com/watch?v=LF7CtKVaEIM>" %}

{% embed url="<https://try.webflow.com/tricks?path=flowtricks-cms-nest>" %}
Affiliate Link
{% endembed %}

## Setup

<details>

<summary>Add this script to page or site settings footer code</summary>

{% code overflow="wrap" fullWidth="false" %}

```html
<script src="https://cdn.jsdelivr.net/gh/flowtricks/scripts@v1.0.5/cms-nest.js"></script>
```

{% endcode %}

</details>

<details>

<summary>Add data-cms-nest="item" to cms item</summary>

<img src="https://454674790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp7sHMLxqFHR7OvQmlP73%2Fuploads%2FE2MrFxJmf2zNsM6wS1uE%2F1.png?alt=media&#x26;token=e5c84bad-89f4-4d5e-ad58-e2ea9c8cca14" alt="" data-size="original">

</details>

<details>

<summary>Add data-cms-nest="link" to link block inside item</summary>

Link block must be connected to the collection page of the current item. Link block can be set to display none if needed.

<img src="https://454674790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp7sHMLxqFHR7OvQmlP73%2Fuploads%2FZS6mHQuPiEmyHRKWDPiS%2F1.png?alt=media&#x26;token=8f1c6891-0d96-49d1-a595-7cf8f1cd86a7" alt="" data-size="original">

</details>

<details>

<summary>Add data-cms-nest="dropzone-1" to div inside item</summary>

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.

<img src="https://454674790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp7sHMLxqFHR7OvQmlP73%2Fuploads%2F6cmIbulwZVXinq6biu8V%2F1.png?alt=media&#x26;token=2edcb142-f186-4bbb-91e6-141b171fd366" alt="" data-size="original">

</details>

<details>

<summary>Add data-cms-nest="target-1" to cms list on collection page</summary>

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.

<img src="https://454674790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fp7sHMLxqFHR7OvQmlP73%2Fuploads%2FWzWEpi6lzicEXPnRLAy8%2F0.png?alt=media&#x26;token=b1a1aecf-b2d4-4d8a-8e51-a3c3c7250527" alt="" data-size="original">

</details>

## 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.

```html
<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.

```html
<script>
cmsNest();
</script>
```