Nest cms list in cms list

Design help CMS
1

Hello.

Is there any solution to nesting a cms list in a cms list? For example a venue list with upcoming events for that venue.

It needs to be handle constantly changing parent cms list and children so multiple cms list will not help?

Thanks in advance.

2

I have the same issue (though with trying to show tags for items). Haven’t found a solution – but there is a discussion here: Collection List within Collection List Alternatives

1 Like
3

Hamish this problem fascinates me, because I hate “it can’t be done” problems.

In your scenario, most of the approaches we’ve been exploring in the other thread won’t work well - they’re focused on Tags, which are simple structures, and many-to-many.

With Venues-to-Events, you probably have a 1-to-many relationship. I’ll assume you’ve designed it so that each Event has a Reference field (not Multi Reference) to one Venue only. If that’s true, there is a solution, which involves a tiny bit of script.

The page design would look like this-

Venues Collection List

  1. Style however you want
  2. Filter and sort as needed
  3. Within each Venue Collection Item, place an HTML Embed where the Events will go. In that embed, you’ll do something like this;

<div ui="venue-events" selector="venue-id-1">
</div>

Where venue-id-1 is your embedded Venue Slug (since it’s guaranteed unique).

Events Collection List

Then separately, below your Venues Collection List, you create your Events Collection List-

  1. Style however you want. Wrap it inside of a “mock” venue, so you can see exactly how it will display visually, when you want to.
  2. Filter it to current & upcoming events ( whatever you want to appear ).
  3. Sort how you want. **
  4. Wrap the entire Events Collection List, including the mock venue, in a Section, so that you can conveniently hide it. This section won’t be visible to your website visitors.
  5. Within each Event Collection Item, place an HTML Embed. In that embed, you’ll put the Venue slug, so we can stitch them together later;

<div ui="event" selector="venue-id-1">
</div>

Where venue-id-1 is the embedded-field Slug of the linked Venue.

image

Moving your Event items to their corresponding Venue

In the end-user’s web browser, we’ll have a small script run as soon as the page is loaded. We want to select all of the Event DIVs, and relocate them to their corresponding Venue Events DIV.

jQuery makes this stitching-up pretty simple.

// Select all of the venue events container DIVs, and iterate through them
$('div[ui="venue-events"]' ).each(function( index ) {

  // prepare the venue ID selector string, for event-to-venue matching
  var matchingVenue = "selector=" + $( this ).attr( "selector" );

  // for each venue, move the corresponding events which have that venue ID
  // note that we want the parent's parent of this DIV, to get the whole Event element,
  // because Webflow wraps HTML Embeds in a DIV. 
  $(this).append( $('div[ui="event"][' + matchingVenue + ']').parent().parent() );

});

In English that reads as;

  1. Select all of the ui="venue-events" DIVs, and iterate through each of them
  2. For each Venue, locate all of the ui="event" DIVs which have the same selector value
  3. Get the parent of that DIV, since the DIV is within the event frame, rather than being on the frame directly.
  4. Move that event DIV to the correct venue

I decided to give this a go, and it works smoothly. You can play with it here-

** I’m not 100% certain that the initial sort order will be preserved in the move process, so keep an eye on this. If you encounter problems you may need to re-sort your per-Venue Events Lists after the Events are moved. There is a way to do that, so let me know if you get stuck.

4 Likes
5

Create columns in the “events” collection list to flex the events in the venues div!

Edit: Wrong, but you can change the columns setting!

6

I haven’t got to try this yet @memetican but thanks for taking the time to run through it.

7

I can’t remember the post here, but somewhere in the forums is an excellent post on how to get Collection Lists to layout properly with “cards” that wrap and flow at the different breakpoints. E.g. on desktop you might want 4 cards across, but on mobile only 1.

8

This is amazing. Just saw the example page! Thank you so much! :smiley:

1 Like
9

Thanks for your tutorial! But is it still possible, somehow it doesn’t seem to work?

10

Hey Mitch, it seems to be working fine still from what I can see, the CodePen is working, and I have setup a demo site too which is working smoothly.

https://preview.webflow.com/preview/demo-cms-one-to-many-stitchup?utm_medium=preview_link&utm_source=designer&utm_content=demo-cms-one-to-many-stitchup&preview=86c58bfd003c2653ad2a7b4006333ac8&mode=preview

Video walkthrough-

11

@memetican Thank you soo much for this awesome tutorial. I’ve gotten everything to work! I just have one last hurdle – how do you set the layout of the events? No matter what I play with, I can only seem to have them line up vertically. In other words, I can format the collection items, but not the layout of the collection list.

Again, thanks so much for this awesome stuff.

12

Hey Zach, glad it helped! There are a number of ways to layout collection lists, and I’ve found some good references here in these forums in the past. I’d recommend you search “collection list layouts”, you should be able to find some good answers.

If you’re going for a card style, let’s say 4 across on desktop, with multiple rows, the approach I usually do is something like this;

  1. Set the Collection List Items to 25% width (desktop), 50% (phone-landscape) and 100% (phone-portrait). That makes them 4 cards across, 2 cards, and 1 card, respectively.
  2. The Parent node in the Collection List structure might need to be a flex, with child wrapping… it’s changed a bit this past year, so you might need to play a bit.
13

Nested Collections now live in designer (Max 5 Items)

1 Like