Building a Nested Collection with F'N Sweet CMS Library in Webflow

Introduction to F'N Sweet CMS Library for Webflow

F'N Sweet CMS Library for Webflow allows you to create dynamic and multi-reference collections on your website. In this tutorial, we will guide you through the process of creating a nested collection using the F'N Sweet CMS Library in Webflow.

To get started, you'll need to have a basic understanding of how to use Webflow and have access to the F'N Sweet CMS Library. Once you have set up your Webflow project and added the necessary F'N Sweet CMS Library to your site, you can begin creating a nested collection.

Live Example of Nested Collections

In this tutorial, we will be simulating two nested collections on a single page. The first step in creating a nested collection is to understand the structure and classes required for the implementation. Let's walk through the process of creating a nested collection in Webflow using the F'N Sweet CMS Library.

Designer View

In the Designer view of Webflow, you will see the elements and classes that are essential for creating a nested collection. We'll be working with three collection lists on the page. Two of these collection lists will be visible, and one will be intended to be hidden when the site is published.

The visible collection lists will have specific classes applied to them, which are crucial for the functionality of the nested collection. The classes include:

• CollectionList: This class is essential for targeting the specific collection that we are working with.
• MultiRefTarget: This class serves as the container where the collection items will be pasted into.
• TextOfCategoriesList: This class represents the plain text comma-separated list of multi-reference items.

Each of these classes plays a crucial role in setting up the nested collection in Webflow.

Setting Up the Classes

It's important to ensure that each visible collection list has the necessary classes applied to them. The CollectionList class specifies which collection we are working with, while the MultiRefTarget class defines where the collection items will be placed. Additionally, the TextOfCategoriesList class represents the plain text list of categories.

Using Custom Code for Nested Collections

In addition to setting up the classes in the Webflow Designer, you'll also need to utilize custom code to fully implement the nested collection using the F'N Sweet CMS Library.

Custom Code Implementation

In the custom code section of Webflow, you'll need to incorporate specific scripts to initiate and manage the nested collection functionality.

Adding the Library File

The first step is to include the F'N Sweet CMS Library file using a Content Delivery Network (CDN). This file is essential for enabling the functionality of the library on your Webflow site.

Running the Script

After including the library file, you will need to run a script that is specific to your site. This script will create a new instance of the F'N Sweet CMS Library targeted at the collection list you are working with.

The script will create a new instance of the library and store it inside a variable. This variable will be used to insert the correct items into the collection lists.

Utilizing the Insert Tags Function

Once the script has created a new instance of the library, the InsertTags function is used to insert the correct items into the collection lists. The InsertTags function requires three main options:

• TextList: This represents the plain text comma-separated list of multi-reference items.
• NestSource: This defines the source of the multi-reference items, which may be located in a hidden collection list.
• NestTarget: This specifies the target where the items will be pasted inside the collection list.

By providing these options, the InsertTags function is able to insert the correct multi-reference items into the designated collection lists.

Testing the Nested Collection

Once you have set up the necessary classes in the Webflow Designer and implemented the custom code using the F'N Sweet CMS Library, it's essential to test the functionality of the nested collection.

By previewing or publishing your site, you can verify that the correct items are being displayed within the collection lists based on the defined multi-reference items and plain text list of categories.

Conclusion

Creating a nested collection using the F'N Sweet CMS Library in Webflow provides you with the flexibility to showcase related content in a structured and dynamic manner. By following the steps outlined in this tutorial, you can successfully implement a nested collection on your Webflow site, enhancing the overall user experience and content organization.

Remember, understanding the classes, structure, and custom code implementation is essential for effectively utilizing the F'N Sweet CMS Library for nested collections in Webflow. We encourage you to experiment and test different scenarios to gain a deeper understanding of how the library can be leveraged to create dynamic and engaging web experiences.