Ever tried to make Finsweet's CMS Slider or CMS Tabs work on nested collections (e.g. multi-image reference), only to find out it doesn't? Well, look no further, because in this article I will show you how to make them both work flawlessly.
In this tutorial, I'm assuming that you already have your page ready according to Finsweet's documentation, and that you're only looking for a solution to nested collection problem. If not, please set up your page as described in the docs and then come back to this tutorial.
Finsweet CMS Tabs on nested collection
Let's implement it in Webflow
- Start by adding this code into <head> tag of your page, just like the docs say
- Add a class called cms-list to the collection list that's supposed to populate the tabs. Meaning it should be the nested collection list. Don't apply this class to any other element on the page
- Add a class called cms-tabs to the tabs element. Again, don't apply this class to any other element on the page.
- Next, add a class called cms-tab-link to the div block or text block to be the element inside tab link. This element will be dynamically added as the Tab Link. In designer, it should be located inside collection item of the nested collection. Once again, no other element on the page can have this class.
- Finally, paste this code before </body> tag of your page
- Publish. This solution only works on published website.
Finsweet CMS Slider on nested collection
How to make it work in Webflow
- First, paste this code inside <head> tag of your page, just like the docs say
- Add a class cms-slider to your slider. Don't apply this class to any other element on the page
- Add a class cms-list to your nested collection list (the list that is supposed to populate the slider). Once again, don't apply this class to any other element on the page
- Lastly, paste this code before </body> tag of your page
- Publish the website. This solution won't work in preview mode
If you want to use different class names for your sliders, tabs, or collection list, you can do that. If you do, don't forget to also change them in the first two or three lines of before </body> tag <script>, to match with your new class names.
Disclaimer: You do not need to add custom atrributes to sliders, tabs, and collection lists in Webflow. The script will do that for you. If you do add them, this solution will still work.
Why don't attributes work on nested collection natively?
If you take a closer look at Finsweet's documentation, you always have the option "I want to have more than one instance of X on the same page".
To make it work, every instance of the solution must have unique attribute (or pair of attributes) applied. However, when you apply some custom attribute to a collection item, all collection items will have the same one, meaning only one will work. So to give every instance unique pair of attributes (like "slider-2", "slider-3"...) this custom code will grab all of the collection items, based on their class name, loop through them one by one, and give each one a unique attribute.
First things first, go through all class names and make sure they match exactly with class names in your before </body> code. Keep in mind that class names in css are case insensitive and cannot contain spaces. This mean that a class named 'Blog Collection List' in Webflow, needs to be referred to as 'blog-collection-list' in custom code.
Custom classes on wrong elements
If this solution still isn't working, then go back into designer and make sure that the custom classed we added, like cms-slider, cms-list, cms-tab-link etc, are applied to the correct element.
Also double-check that they are not applied to any other element on the page.