I have a cms collection called “City” and another cms collection called “Restaurant”. I have a multi-reference field inside “City” linking to “Restaurant”, so that I can choose the restaurants that are in that city. I want the template page for “City” to display the primary image and name of the first “Restaurant” in that multi-reference list. Then, on the side of the page I want to have a list of all the restaurants in the list. When a user clicks on a restaurant name, I want the image and name displayed to change to the selected “Restaurant”. I’m not looking to do this with the template pages for each “Restaurant” though. I want it all within the template page for “City”. I NEED HELP!
This part s a tricky requirement to navigate, using the Restaurants CMS page would by far give the closest alignment with Webflow’s CMS design.
However here’s how I recommend you approach this build.
If the number of restaurants per city is guaranteed to be < 100, then you could accomplish this on the city page using;
A collection list to display your max-100 restaurants
A querystring param to identify the one you want featured, e.g.; /city/chicago?restaurant=giordanios
Custom code to display the param-specified item as the featured restaurant
These featured HTML chunks can be in the restaurants collection list, as hiddenk content, and tagged with a custom attribute containing the slug for easy identification
If no query param is present, you can just grab and display the first one.