Clone and inspect this project (e.g. the blog example) or read this short documentation to start from scretch.
First step: Create a collection list on a CMS collection page and give the collection list element (not the collection list wrapper) an individual class. The collection list element will serve as the nested collection on your static pages and the class you've given to it serves as an indentifier to fetch the element with the jQuery .load() function.
Second step: Insert the following code snippet with HTLM embed into the collection list on your static page (e.g. your blog post overview) or into a collection list on another CMS collection page (e.g. the category or tag CMS template page). Place the HTML embed at the place where the nested collection list should appear.
<div class="authors-list" id="unify-[slug]"></div>
<script>
window.addEventListener('DOMContentLoaded', function() {
jQuery(function() {
jQuery('#unify-[slug]').load("/[collection-name-slug]/[slug] .authors-list")
});
});
</script>
Third step: Adjust the unify-[slug] part and the url-part in the code snippet (marked in purple and red). Replace [slug] with the dynamic slug element by using the "+ Add Field" in the upper right corner of the HTML Embed Code Editor. Replace unify- with an individual piece of text to get an individual ID for each nested collection list. This step is important if you use multiple nested collections within the parent collection (e.g. authors, tags and categories). Adjust the URL in the code snippet to point to the CMS template page that contains the collection you want to embed as a nested collection. Therefore, use the dynamic slug element (+ Add Field" in the upper right corner of the HTML Embed Code Editor)and change the fetch url /[collection-name-slug]/ to the collection name of your project (e.g. /post/). Finally you have to adjust the class (marked in blue). Use the class you gave to the collection list you want to nest (see first step above). In this example this is the class .authors-list.
You made it!
Below is an example of the code you can use for your Nested Collection and as it is used in this sample project.
That's it! You can start from scretch using the code above or simply clone this project and then inspect the blog overview page to gain a better understanding for nesting collection lists and collection items with jQuery .load().
...and should you be concerned about your website performance because of the inclusion of the nested collection with jQuery? You can rest assured! Here is the Goole Lighthouse Score for this project page ;-).
Add on (alphabetic sorting of nested collection lists): With the internal functions of Webflow it is not possible to sort nested collection items. The order is determined exclusively by the order of the tags in the CMS field. However, you can sort the list on the frontend side with an additional jQuery. For alphabetical sorting you could use something like this and add it to the before </body> tag of the page, where you would sort the nested collection list:
<script>
// sort nested collection items "authors" alphabetical after DOM loaded
window.addEventListener('load', function() {
$('.authors-list').each(function(){
$(this).children('.author').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});
});
// sort nested collection items "tags" alphabetical after DOM loaded
window.addEventListener('load', function() {
$('.tags-list').each(function(){
$(this).children('.tag').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});
});
</script>
Have fun, stay healthy and happy coding!