Nest (OLD)

Our v1 to simulate multiple nested Collections on a single page
Scroll
Scroll
Scroll
Scroll
Scroll

Use cases

When you need more flexibility with nested Collections
More than 1 Nested Collection on a page
Instead of using native nested Collections, use Nest to simulate as many nested Collections as you'd like.
More than 5 Items inside your Nested Collection
Your multi-ref has more than 5 items and you must show those 5+ items on your page.

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.

<!-- F'in sweet CMS Library for Webflow -->
<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
(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>

Copy code

Code explanation

customBlogPosts

The variable we created to store our Library instance. The name of the variable can be set to whatever you want.

textList

The class of the plain text list that holds our multi-reference information.

nestSource

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.

nestTarget

The class of the div that we will put our real multi-reference into.

HTML and class setup

Add 2 Collection Lists to the page. One list should be visible to the user. One list will be hidden.

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.

Nest video docs