Webflow sync, pageviews & more.
NEW
Answers

How can I work around the limitation of having a collection list within a collection list in Webflow when designing a website for a tour company that needs to apply and group tags for tours?

In Webflow, currently there is a limitation of nesting collection lists within a collection list directly. However, I can suggest a workaround that will help you achieve your desired functionality for your tour company website.

1. First, let's understand the structure of your data. You have a collection of "Tours" and each tour can have multiple tags associated with it.

2. Create two collections in Webflow: "Tours" and "Tags". The "Tours" collection will contain all the information about each tour, such as title, description, images, etc. The "Tags" collection will contain a list of all the tags you want to apply to your tours.

3. In the "Tours" collection, create a multi-reference field called "Tags" that will allow you to link multiple tags to each tour. This field will establish a relationship between the "Tours" and "Tags" collections.

4. On your tour template page, create a Collection List that pulls in the data from the "Tours" collection.

5. Inside the Collection List, add a Div block and style it as needed. This will act as the container for displaying the tags associated with each tour.

6. Within the Div block, add a Collection List that pulls in the data from the "Tags" collection.

7. Inside this nested Collection List, add a Text element and bind it to the "Tag Name" field from the "Tags" collection. Style this element as the tag label.

8. To filter the tags based on the current tour being displayed, you'll need to use custom code. Create a custom code embed element within the nested Collection List.

9. In the custom code embed element, add the following code:

```javascript

```

This code will show only the tags associated with the current tour being displayed and hide the rest.

10. In the outer Collection List, add a custom attribute to the Div block that contains the nested Collection List. Name the attribute "data-tour-tags" and bind it to the multi-reference field "Tags" in the "Tours" collection. This will allow the script to access the tags associated with each tour.

11. Finally, make sure to style the tag elements with appropriate CSS to make them visually appealing and distinguishable.

By following these steps, you can achieve the desired functionality of having tags grouped with tours in your tour company website, while working around the limitation of nested collection lists in Webflow.

Rate this answer

Other Webflow Questions