Streaming live at 10am (PST)

Multiple Nested Collections with unlimited Items in a single static page (clonable project)

Hey Webflowers!

If you are struggling with Webflow‘s limitation for nested collection lists in static single pages (1 collection per page with max 5 items), this clonable project might be interesting for you. In this project I explain how to use unlimited nested collections with more than 5 items on a static page.

The magic: a lightweight jQuery with no performance issues => 4x 100% from Google Lighthouse for the clonable project page :tada:.

Feel free to clone this project and read trough the short documentation to understand how it works. :rocket: Feedback and ideas for improvement are very welcome! :wink:

:point_right: Here is the clonable project: multiple-nested-collections-with-unlimited-items-on-single-pages-in-webflow - Webflow

:point_right: Live Website: https://multiple-nested-collections.webflow.io

4 Likes

I followed your instructions, but I can’t seem to get it working.
Here’s my setup:


I’m trying to display more than 5 skills, basically. I have a Skills table, a Roles table and a Users table.

Users can have multiple Roles, and Roles have multiple Skills.
I’m trying to display the skills for a particular User Role here.

@leamars - That is absolutely feasible! However, you have used some things wrong :wink:. The script to use the nested collection item must be included as html embed (not in the page head tag) and the reference collection must be implemented and styled on the respective collection template page.

Did you download the clone? there you can see how I did it for the blog posts.

Can you send me a share link of your project? then I can give you more detailed instructions.

Hi,

Thanks for sharing this, It’s awesome and hopefully Webflow will make this native soon. I’ve implemented it on a page with a list of profiles and tags underneath them! See screenshot.
Card screenshot|690x437

Is there a way to make the tags link to the tag page so I can filter the profiles?
Heres the code I’ve used so far:

<div class="job-roles" id="roles-{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"></div>‍<script>window.addEventListener('DOMContentLoaded', function() {    jQuery(function() {        jQuery('#roles-{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}').load("/consultants/{{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }} .job-roles")    });});</script>

Helps greatly appreciated.

Hi @MikeTalent - yes, this is possible.

You can insert the links directly into the nested collection (manually or dynamically with cms-connections). The script will fetch the whole html structure including the links.

You can clone my example project and inspect, how I‘ve added the links to the nested tags and to the categories in the blog overview page (Blog - Example for unlimited nested Webflow collections). All the tags and categories are all linked to the respective dynamic template pages.

Hope this helps!

Hi @PhilippX, Thanks for the quick response!

Ahh I see,
I’ve got a bit of an usual use case here but basically I want the original tag list on the consultant page to NOT link to the tag page. But then on a different static page I would like the tags to link correctly. Not sure if this is possible by adding the links within the code embed instead?

Also I noticed that the hover interaction I built for the tag does not work in the nested collection list, Is this just a limitation with the code embed?

Thanks again,

@MikeTalent - I’m happy to help with this issues. Can you please provide the share link of your project?

As regards the interactions: take care, that the interactions trigger the class and not the element (see screenshot below). Also ensure, that this class is included in the collection list you fetched by the html embed.

With regard to the links: you cannot insert them directly into the script since this only fetches the collection list with the respective class. But it should be possible to add an additional script which overrides the links on a specific page.

But I think the better solution would be to create two nested collections on the corresponding dynamic template pages with the appropriate links (on the dynamic template pages Webflow allows several nested collections) and then fetch and pull the collection with the appropriate links with the code embed onto the static pages on which you need the respective linking.

Hi Phillip,

Here’s a share link to my project
https://preview.webflow.com/preview/talent-contractor-care?utm_medium=preview_link&utm_source=dashboard&utm_content=talent-contractor-care&preview=f7de35ca7f146c594e226b9731b32bb5&workflow=preview

The hover interaction on ‘category tag’ on the consultants template page is already set to affect the class so not sure what’s going on there.

If I set up another collection list that is linked on the consultants page could I then nest it in the “quick look” page and hide it from the consultants page?

Thanks for your help on this it’s really appreciated,

Hi again Phillip,

Just a heads up I managed to figure both of the issues out today. I added “pointer events: none” on the class in the consultant page body to make them not clickable on the one page.

Also the hover interaction works now I switched it to use the hover state natively in Webflow instead of the interactions panel.

Thanks for all your help on this & for uploading the solve for the nested collection lists in the first place its really appreciated!

King Regards,

@MikeTalent - happy to hear, that you solved the problem! I will update my nested collection project regarding the native webflow interactions issues.

Maybe I will find a solution for this as well. I guess this won’t be the first case where a custom html element should be triggered via webflow’s native interactions.

Hey Philipp! This is a great work-around but like @mike I’m also struggling with the animations.

Here’s the read-only to my collection template page (where all the animations are working).

Here’s the read-only link to my home page (where the animations don’t work).

They’re all set to Class, not Element, but for some reason they’re not triggering on the home page. Have you found a solution for this?

Hi, @PhilippX thanks for the clonable project looks amazing. One question thought, can’t seem to find how you styled the tags list for example. I need the tags to be displayed in a certain way, can you please give a tip?.

Thanks
S