Nest cms list in cms list

Design help CMS
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