To create a collection with two different nested collections (One for Topics and one for Categories) start by adding the CMS Nest script to your <head>
Once the basic layout of your collection is set and styled add the fs-cmsnest-element = list attribute to your collection list and add two blank divs that will be used to nest the collections further down.
If you wish to have your users navigate to the card’s template page you may use a link block as a wrapper and use this link block to link to the current item, if the cards should be non-clickable use a hidden text link to link to the current item both of these options are used in this example to demonstrate the setup. It is important to have the link be the first element of the collection item.
Add the attribute fs-cmsnest-element = nest-target and fs-cmsnest-collection = IDENTIFIER to the empty divs in your collection items, remember to use a different IDENTIFIER for each div, this identifier should be descriptive and should match the one that we will use for the collection on this page and the template page.
Add the collections to be nested to your page, do not hide these collections hiding them without a wrapper will break the implementation.
These collections will also need to have a link in each item that links to the current item in the collection, once again we can choose either approach for the link block or the hidden text link.
Add the attributes fs-cmsnest-element = nest-source and fs-cmsnest-collection = IDENTIFIER to these collections, the IDENTIFIER should match the ones used on the empty divs on our parent collection.
You can hide the collections with the finished setup on designer view by wrapping them in a div and setting this div to display: none after finishing the setup.
Moving onto our template page for our parent collection, we need to add the collection for the referenced field, be careful and double-check that you have added the correct collection, you should only be able to see the items in the multi-reference collection on your parent CMS Collection field. Not adding the correct collection will result in all your items being nested on the target div.
Once again we need to have a link in the collection’s items and we can use either approach depending on the functionalities mentioned above
After adding the item’s links and styling the collection (if it is to remain visible on the template page) we can add the fs-cmsnest-element = template-reference and the fs-cmsnest-collection = IDENTIFIER attributes to the list
If the items are not going to be visible on the template page you can hide them using the same method of wrapping them in a div and setting this div to display: none just as the ones on our main page.
That’s it! You can now publish and test!
You can always reference the Combo Clonable to see this setup working, clone it, and inspect it to troubleshoot.