Streaming live at 10am (PST)

Nest cms list in cms list


#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


#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 Name.

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.
  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

On page ready, 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.


#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: