Building Multiple CMS Lists Connection in Webflow

In this tutorial, we are going to learn how to connect multiple CMS lists together in Webflow. This will allow us to create interactions where clicking or hovering over items in one list will result in a change or action in another list. To achieve this, we will be using the CMS Listing Power-Up. If you haven't installed it yet, you can find the link in the description below.

Installing the CMS Listing Power-Up

To begin, we need to copy the code provided by the CMS Listing Power-Up and add it to the before closing body tag of our page or project settings. This will enable us to utilize the functionalities of the CMS Listing Power-Up in our Webflow project.

Defining Components and Collection Lists

The first step is to define our components, which are the containers that hold our related collection lists together. To do this, we create a div and give it the attribute name of TR listing element and a value of component.

For example, let's say we have a first section on our page that holds a couple of collection lists. Within this section, we'll create a div and give it the attribute name TR listing element with the value of component. This container can hold multiple collection lists, and all the lists inside it will be synced up.

We will repeat the same process for the second section on the page which also has a couple of collection lists. We'll create another div and assign it the attribute name TR listing element with the value of component.

Within these components, we have our collection list elements. Each collection list element needs the attribute name of TR listing element with a value of list. For example, we will select the first collection list inside the first section and assign it the value of list. Similarly, we will do the same for the second collection list within the first section.

For the second section on the page, we repeat this process for the collection lists within that section as well.

Configuring Optional Settings

By default, the items on the lists become active when clicked. However, we have the option to customize the behavior and appearance of the lists.

For instance, we can make one item in each list active on page load automatically by setting the TR list sync on load attribute to true for the component. This will ensure that one item is automatically active when the page loads.

We can also change which item is active by default using the active index attribute. For example, if we want the second item to be highlighted on page load, we can set the active index to 1.

Additionally, we can customize the active class that is added to the items. If we want to add a specific class, such as "is open" instead of the default "is active", we can do so by using the TR listing active class attribute and setting it to the desired class name.

Furthermore, we can customize how items behave within each list. For example, we have the option to disable class switching when clicking on an item by setting the listing click attribute to false for the respective list.

In the second list, we might want to not only trigger a click but also change the class on hover. This can be achieved by using the enable hover in attribute and setting it to true. Similarly, we can set up hover out to remove the class when the cursor moves away from the item.

Publishing and Testing the Interaction

Once we have configured the components and lists with the desired settings, we can publish the project and test the functionality. By default, the second item in each list should be highlighted on page load. Clicking on items should switch the class, and clicking on certain items might not trigger any action based on our settings. Similarly, hover interactions should also work as per our configurations.

By following these steps, we can easily sync up our collection lists and create interactive connections between them in Webflow. This functionality opens up various possibilities for creating dynamic and engaging user experiences on our websites.

In conclusion, Webflow's CMS Listing Power-Up provides a powerful tool for connecting and synchronizing multiple CMS lists, allowing for seamless interactions and enhanced user engagement. Utilizing these features, web designers and developers can create visually appealing and dynamic websites with ease.