Nest 2.0
Nest 2.0 gives more powerful nest options with less steps. A new setup is required for Nest 2.0.
Looking for Nest 1.0? Docs are here.
Use cases
How to use it
IMPORTANT: You need to double enter your multi reference fields as a text field. If you have an item that has "Advertising" and "Marketing" as the selected as multi reference items, you will need a text field that lists those items out in plain text comma separated list. In this example, the text in this field would be "Advertising, Marketing".
Paste before </body> tag of the page you're working with.
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(async function() {
// create a new Library instance and store it in a variable called "customBlogPosts"
var customBlogPosts = new FsLibrary('.blog-posts-list')
// run nest on our instance
customBlogPosts.nest({
textList: '.text-of-categories-list', // plaintext comma separated list
nestSource: '.nest-multi-reference', // CMS list we are taking real tags from
nestTarget: '.multi-ref-target' // where we paste the items from nestSource
})
})();
</script>
<!-- Hosted Library script file on CDN for free -->
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
(function () {
var nest = new FsLibrary('#blog-posts');
nest.nest2({
nestedCollectionsSelectors: ['#categories', '#clients'],
nestTarget: '.blog-link',
});
var firstItem = document.querySelector('#blog-posts .w-dyn-item');
var nestedItem = firstItem.querySelector('[href="/category/architecto-fugit"]');
})();
</script>
Code explanation
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
The class of the plain text list that holds our multi-reference information.
The class of the hidden Collection List that holds our real multi reference content.
The elements inside of this nestSource Collection List should be <a> elements.
The class of the div that we will put our real multi-reference into.
HTML and class setup
The visible list on the page is the list we define our new instance with. In this example, this is our ~.blog-posts-list~. Inside this list we have our ~.multi-ref-target~ and ~.text-of-categories-list~ classes.
The ~.text-of-categories-list~ is the plain text comma separated list of our multi-reference fields. The ~.multi-ref-target~ is our wrapper for our real multi-reference items.
The hidden Collection List is going to hold all of our real multi-reference items. This list gets a class on the List element. In this example, this is ~.nest-multi-reference~.
The Nest component is going to find matches in our plain text list and items inside the ~.nest-multi-reference~ Collection List. When it finds a match, it will put the matched content inside our ~.multi-ref-target~.
In this example, ~.nest-category-link~ items will be added to ~.multi-ref-target~. ~.nest-category-link~ should always be <a> elements.