How to Use the F'in Sweet CMS Library for Webflow

The F'in Sweet CMS library for Webflow is a powerful tool that allows for seamless integration of dynamic content and pagination on a website. In this tutorial, we will explore the "load all" option inside the "load more" component, and demonstrate how to use it to load all the items inside a pagination with the F'in Sweet CMS library for Webflow.

Setting Up the Live Example

To understand how to use the "load all" option, let's first set up a live example. We have a dynamic list on the page, a collection list class setup, and a next button with 50 items per page. With traditional pagination, the items would load in sets of 50. However, with the "load all" option, we will be loading all the items right away.

When utilizing the "load all" option, the entire page loads initially, and then we will load subsequent sets of items in the pagination. This enables us to view and interact with all 500 items at once, as opposed to loading them in sets of 50.

Inspecting the Setup

Upon inspecting the setup, you will notice the collection list wrapper, the collection list, and all the items. Notably, there is only one collection list on the page, and all the items are contained within it. This confirms that the "load all" option is working correctly, as it aggregates all the items inside the pagination within a single list.

Setting Up Classes in the Designer

In the Webflow Designer, we need to apply two important classes to our page elements. First, we apply the "collection list" class to the collection list element. Next, we need to apply a class to our native Webflow pagination next button, specifically the "load more button" class.

By assigning these classes, we signal to the F'in Sweet library how to target and interact with the elements on the page.

Implementing the JavaScript

Now, let's delve into the JavaScript code required to integrate the F'in Sweet CMS library and enable the "load all" option.

1. Adding the Library Script: Firstly, we need to add the library script to the page. Note that the actual script file will be available as a live hosted script file once the library is launched.

2. Creating a New Instance: We create a new instance of the library, targeting the "collection list" class applied to the relevant element on the page. We store this new instance in a variable called "projects grid," which can be used later in the code.

3. Setting Up the Load More Component: Within the load more component, we define the button to be the "load more button" class for the native Webflow pagination button. Additionally, we set the "load all" option to true to enable the functionality of loading all the items at once.

4. Configuring Animation Options: The library offers animation options that can be customized in the visual script writer to suit specific design preferences.

By following these steps, we can successfully load all the items inside a collection list using the F'in Sweet CMS library for Webflow. This functionality provides a seamless and dynamic user experience when dealing with larger sets of content.

In conclusion, the "load all" option, combined with the F'in Sweet CMS library for Webflow, offers an efficient way to manage and display extensive dynamic content on a website, enhancing the overall user experience.