# 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="/files/tAQYcbDasrQB72XreAaJ" 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="/files/tBJHkIRiQpNqQMUwS07k" 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="/files/jmJixqa2lej5iuVJYH0I" 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="/files/M2w5Dju3EYxeWz7lYFXE" 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flowtricks.timothyricks.com/cms/cms-nest.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.