An example of several levels of nesting can be seen using countries as each country has several states and these states have several cities each, here is how we set it up:
The first step is to add the CMS Nest Script to your page <head>
Once you add and style your first parent list we can add the fs-cmsnest-element = list attribute to our list and add an empty div that will be the target of our first list.
CMS Nest requires the items in the list to have a link to the current item, we can add this link with a link block used as a wrapper if we want the users to navigate to the item’s page or as a hidden link if the users are not meant to move from the page. For this tutorial, we will be using a link block.
Once the link to the current item is set we can add the fs-cmsnest-element = nest-target and the fs-cmsnest-collection = IDENTIFIER attributes to our empty divs
We can now add the collection of states that will be nested in the target divs, this collection requires a link that links to the current item. We can use the same approach of using a link block or hidden link.
Once the link is added we can add the fs-cmsnest-element = nest-source and fs-cmsnest-collection = IDENTIFIER to our collection list.
Moving to the template page for the parent collection we need to add the referenced collection, this step is critical as adding the wrong collection will have all the items in the collection nested in our parent collection, be sure to double-check that only the referenced items are visible in the template page.
This collection will also need a link to the current item
And finally we can add the needed attributes to the list on the template page, these attributes will be fs-cmsnest-element = template-reference and fs-cmsnest-collection = IDENTIFIER.
We can now publish and test our first level of nesting.
On our state collection, we can add the attributes fs-cmsnest-element = list to our list wrapper.
We will now treat this collection as the parent collection and add a blank div with the fs-cmsnest-element = nest-target and fs-cmsnest-collection = IDENTIFIER that will nest the items for another collection. We already have the link to the current item so we can skip that step.
Add your third list to the page (we add the cities collection), add the link to the current item, and add the attributes fs-cmsnest-element = nest-source and fs-cmsnest-collection = IDENTIFIER to the list
Move into the template page for this collection’s parent and add the referenced list as before
Set the link to the current item in this collection’s items
Add the attributes fs-cmsnest-element = template-reference and fs-cmsnest-collection = IDENTIFIER to the list
To hide the collections that will be nested we can wrap them in a div and hide this div. We should never hide the list wrapper or list on its own as this will cause the list not to show up on our published site. (We use the template page as example but this can also be done also in the main page if you need to)
Publish and test!
