Nested cms and adding more items?

Hello, I’m currently building out this website for my client. The goal is to use the cms so the client can go in and update the menu items without me. As it stands right now tho I’m having trouble adding more items. In the designer I needed to add multiple items and now and I have run into the issue of other items just duplicating. If anyone knows how I can work around this that would be great.

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=dashboard&utm_content=zocalo-food-park&preview=369e4a1f8db2eaea35bbe82d590acbfc&mode=preview


Here is my public share link: LINK
(how to access public share link)

If you look at the images that I have uploaded you can see that the drinks item do not show up unless I have duplicated the item in the Aguas Frescas

The way that your CMS data is structured looks to be the issue here, so I’d take a step back and rethink how your content is being organized.

Instead of throwing all of the content into a single collection, I’d recommend creating one for your items (this would be per item with fields for title, price, description, and Cashdrop link) and one for your categories (Aguas Frescas, Drinks, Tacos, etc). With this setup you’d create the two pieces separately and then use a reference field within the Menu Items collection to reference the Category of each item.

To create the menu page, just add a collection list for each category (by using filters to only show items within that given category) and your menu items will show up as expected.

Thank you @mikeyevin, I’m gonna give that a shot and see if that works.

Ok, I followed those instructions and now it seems like i’m having trouble nesting these items together. I tried it a couple of times and no luck yet.

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=dashboard&utm_content=zocalo-food-park&preview=369e4a1f8db2eaea35bbe82d590acbfc&mode=preview

Swap the reference field so it’s a single reference linking an item to the category as opposed to linking the category to multiple items with a multi-reference field. You’ll need to be able to filter the lists based on the category but your current setup is referencing the items in the other direction.

…use a reference field within the Menu Items collection to reference the Category of each item.

The way it’s setup now you’ll need to use the nested collection list feature which, even though it happens to work in this specific case, only allows up to five items per nested collection. If a specific category happened to have 8 or 10 menu items referenced in the collection, it would only display the first five.

Ok, I’m having a little trouble under standing. I swapped it to one reference field and still no luck. Do I need to make a tacos collection, and then the individual item title and description in another collection? And then from there make a drinks collection and then make the individual items for the drink collection?

You need to move the single reference field to the actual menu items—it looks like all you did was swap the multi-reference field for a single reference field on the categories (menu item holders):

Each item will have a single reference field linked to the menu item holders collection, and each will need to be “organized” on the product level into the appropriate category.

Hello @mikeyevin So I updated as you instructed and now I know that that structure makes a lot more sense after thinking about so thank you. :pray:

Will I be nesting the items in and using the hide/show interaction? Cause even after the changes that still has not been working. Or will I be filtering a different way?

https://preview.webflow.com/preview/zocalo-food-park?utm_medium=preview_link&utm_source=dashboard&utm_content=zocalo-food-park&preview=369e4a1f8db2eaea35bbe82d590acbfc&mode=preview

the new link

So I took a minute to walk you through getting this setup and add the basic interactions:

Now that Loom is limiting recordings to 5 minutes I wasn’t able to get the animation working exactly as it should in the first video, so here’s a supplemental recording that shows how to fix this issue:

Let me know if you run into any issues :metal:

Awesome! Thank you again @mikeyevin, now the tricky part will be the hand off, hopefully they will be able to get add remove items on their own :joy:

One of the reasons I have it designed for the menu drop down is because this is a food truck park and there are over seven vendors who are part of the collective and combined their menu items are well over 100, so I thought the user might have scroll fatigue if all the items were displayed. We will see how the design goes though. I might have to rethink and redesign how the menu items are displayed with the vendors.

But once again thank you so much, first time getting into CMS and you really helped me out :v:

1 Like

No problem, glad I could help out!

In terms of design, I’d probably recommend either a sidebar that can act as an overview with anchor links and/or making each section header position: sticky so that the title follows the user as they scroll through the list.

It’ll be difficult to say which is the best option (or if you should use both) but as you get more vendors in there—each with their own “extremes” in terms of menu size—it may help determine the best way go about the design.

Good luck :+1:

1 Like