Routes and CMS collection nesting in Webflow

Design help CMS
1

Good morning everyone,

I need to build a website of recipes for one of my clients. He would like his recipes to be filtered by category (starter, first course, second course, desert) and by country (e.g., Italy, Brazil, etc.). I have started a “playground” Webflow project just to test the backend and the logic. Please click on the link below to see it (I have only added fake recipes in First Course and Italy):

Preview link: https://ginevras-fresh-project.webflow.io/dishes/first-course

Read-only link: https://preview.webflow.com/preview/ginevras-fresh-project?utm_medium=preview_link&utm_source=designer&utm_content=ginevras-fresh-project&preview=2b0651bbe55154d3626cd7f8d3c0252d&pageId=6052433ddbebe607f7d67215&itemId=60524349ba24bf59deba25c5&mode=preview

At the moment, users can see Italian recipes (/countries/italy) and first course’s recipes (dishes/first-course). However, they should be able to go one step further and only see Italian first courses (so possibly /dishes/first-course/countries/italy or something like this). The problem is that Webflow does not generate these nested routes.

I thought about adding a tabs menu in the category page (e.g., first course page), with a tab for each country. However, I can only add collection lists inside the Tabs Content div and filter each one manually (e.g., in the tabs menu write “Italy”, and in the tabs content add a collection list and filter the recipes by both category (current category, in this case first course) and country (in this case Italy).

That works, but if tomorrow my client wants to add a new country, the tabs menu (with the name of the new country) and the tabs content (with the recipes of that country AND that category) will not be updated automatically. So that’s not a good solution.

I also found a tutorial by @Finsweet (Build Webflow CMS Dynamic Tabs Component from Scratch | How To - YouTube) which allows me to dynamically update the tabs menu, but it doesn’t solve my problem as the tabs content would still need to be added and filtered manually.

Please let me know if you have a solution for me, at the moment I am a bit lost. Any suggestion would be highly appreciated! :slight_smile:

Thank you in advance for you precious help and have a great day!

Ginevra

2

Hi Ginevra,

You can simulate “sub-categories” with multi-reference fields in your CMS items. Then you could use dropdown lists so that the user hovers over “Italy” and then a dropdown list would appear that would show “starter”, “first course”, etc.

Cheers

3

Hey @Kimmy Thanks for the quick reply. I am trying your idea but in reverse: when you hover over “first course” a dropdown list appears showing “all”, “italy”, “brazil”, “spain”, etc. This is working, but when I finally click on “italy” it brings me to ALL italian recipes (countries template) and not italian first courses.

Have I misunderstood something? :slight_smile:

Thank you in advance,
Ginevra

ps I also don’t understand why I have 6 countries but only 5 appear in the dropdown menu

4

Hi Ginevra,

To have 6 countries show up in the dropdown list you need to add a new dropdown link and then link it to the correct country.

But regarding your main issue, try selecting 1 first course item, then link it (using a multi-ref field) to the “first course” collection, then with a new multi-ref field, link it to the right country.

Just to make sure i’m not misunderstanding your idea, check out this website: Kimmy Portugal | Produtos

Notice how there’s main and sub categories, and how a sub-category only displays products that belong to that sub-category. Is this what you’re trying to achieve? or do you need an extra layer of categories?

Cheers

5

Also, you need to add this new filter:
Untitled

This will make first course items show up, and combined with an existing country filter you already have, it should show you ONLY first courses from the correct contries.

Cheers