Streaming live at 10am (PST)

Hide collection list items based on current page URL?

Case:
I’m setting up a events site that publish events trough a collection. In the collection template page I have a registration form (webflow form) for people to register to the event. This form is sendt to Integromat (a Zapier alternative) to generate a new collection item in a separate ‘Participants collection’ based on the form submission form the event.

When the form is submitted I use an embed element inside the form with a script that sends the page URL with the form data. I use this to identify what event the registration form is submitted from. The page URL is added to a collection field in the participants collection items. So far so good.

Problem:
The participants collection list is embedded back in the events collection template page to show the participants that have signed up the event, but how can I hide the participants not relevant for the current event?

I have the page URL in the participants collection items that identifies the event, but how can I use this page URL to hide the participants that is not relevant for the current event?

Ideally the collection list filter should have a ‘collection field > Equals > slug’

Any ideas on how this can be done? :thinking:


Page:

Read only link:
https://preview.webflow.com/preview/aasdk?utm_medium=preview_link&utm_source=designer&utm_content=aasdk&preview=9b4c5ff62ce99c6fa6c19fd709c539ae&pageId=5e65ee671a010f35df6c3586&itemId=5e65f102e129e1a43ccaf5cc&mode=preview

important - filter by slug (Not url) - otherwise your code will break on io page + on any domain change in the future (With/without WWW).

js

No way - to filter the list by current slug. The solution only by custom code.

My idea - add custom data-attribute for “slug” - add this data to each participant item. Your list should look something like this:

<div data-slug="event-1">Ben</div>
<div data-slug="event-3">Ali</div>
<div data-slug="event-1">Bar</div>

Very easy to get the slug on webflow (Build-in var):
<input type="hidden" name="slug" value="{{webflow-slug-her}}"/>

Then filter the list by javascript (If slug == evnet3 ==> do something)
Filter example (Not related to slug):
https://www.kirupa.com/html5/filtering_items_in_a_list.htm

“The problem” is more freelancer’s mission (No way to give you full answer her).

1 Like

Hi @Siton_Systems, thanks for your great input! This looks like a solution, I will look more in to it when I’m starting to build the site next week!