I would like some help understanding how collections work and have attached an example of what I am trying to achieve using collections. I am working on a restaurants website which will have multiple menus. Does the illustrated example show the correct usage of collections. So a separate collection for breakfast, another for lunch and so on? How does it work if you require a tag across both for example a vegetarian option that might appear on lunch and another on dinner? Would that just be a field I create for that particular collection for vegetarian?
My second question was regarding layout and was hoping someone could suggest a way I could do this in web flow. Example shows this layout.
There’s many way to build a data structure. And sometimes several good or acceptable way. For a CMS website, the structure that’s the more logic is adapted to how you want the data to be displayed and sorted.
The food items can have a switch for wether they’re vegetarian or not. But they could also have an option field for more options: vegan, vegetarian, gluten-free. That classification can also be a collection on its own, referenced inside of the items (or multi referenced, as there can be some gluten-free vegetarian meals, I guess).
This way you can have your collection filtered on the type of food, and you can have for example a collection restricted to a type of food and vegetarian (you can use a tab element for that, with the full lunch collection list on the first tab, and the filtered list to vegetarian meals only on the second tab.
What you want to achieve with the layout is difficult to realize with Webflow only. It’s called a masonry grid and usually requires javascript code. You can search this forum for masonry grid to see how users deal with that usually. There’s a way to mimick it with CSS columns but it makes the first sorting order vertical and is not suitable for every situation.
Thanks for the reply Vincent, really appreciate it! So just to clarify I would have a food list collection which regardless of type would fall under the food items collection (milk, bread, steak etc). Then I would create a new collection for each type (drinks, desserts, mains etc) The bit I am struggling with now is how to connect the two together. For example if I drag a dynamic list on to the editor I can choose a collection from the drop down which shows the food list I created which is not aware of a type and the other types I created (breakfast, lunch and dinner for example) So just to be clear I have 4 collections in my collections list. Food(all foods) Breakfast, lunch and dinner are the other three. These three are empty collections. So when referencing these from the drop down on the point of dragging a dynamic list onto the canvas don’t have any connection to the food type.
To begin with, maybe for simplicity, put the drinks in a collection apart
Start by creating the types collections. Then when you create the main item (food) collection, you add a REFERENCE field linked to the type. So for each food you’ll set the type. And the veggie or not switch/option or reference.
Then in the filters of the collection list you can specify the food of which type to be displayed.
You can’t have a collection list that’s mixing items from 2 other collections Maurice. If you need to have that, you need one collection of items with all the fields you need for A and B, and either another collection for type A or B (or a switch or an option field)
Ok thats pretty disappointing for me. So I can´t have for example two different layouts for blog articles and output one collection list with all articles.
The reason I want to do this, is that I want implement isotope and give the user the option to filter all articles.
I am still having trouble understanding how it fits together. I have attached a ref image of what I have currently done trying to follow the steps you provided. In the example I have added the collections as you said starting with the collection types and then the main food collection which I have added the required fields and added three ref fields for breakfast, lunch and dinner. When I go to add a food item such as the example Eggs I was assuming that I would just choose a drop down to say this belongs to breakfast but I can see it assumes I need to select an item in breakfast which doesn’t exist because it was created in the food collection. I have clicked the plus button beside the breakfast drop down which reveals and add breakfast and added it to the collection which I believe is the way to do this but wanted to check that this is the way to do it. Does it mean I need to create the same fields required in all the collections? I didn’t add any fields to the breakfast, lunch and dinner collections.
have you different layouts for breakfasts, lunches and so on? If so, then you have the same problem like I have.
Otherwise you have to create a collection food with the layout you want and a collection category. Within category you have breakfasts, lunches and so on. Then you reference from the food collection to the category. So if you create a new food item you can give them a category with the reference collection.
?
A layout depends on a collection list. You have an infinite way of having multiple collection lists referencing your articles and style it as you like. Re-red me, it seams you only need 1 collection for articles and a switch or whatever option to differenciate them.
Hmm ok, not like this. It’s ok, you only need to understand the logic once.
One collection for items with the dishes. Collection called foods
ONE collection for food type. Call it food type
INSIDE of the food type collection, add 3 items: breakfast, lunch, dinner.
And reference food type inside of food
Now when you add a food, like for example PANCAKES, when you arrive on the food type field, you select Breakfast among the three choices.
That will allow you to later filter the collections list as you need them to be.
Yes. I need as output one collection list, which outputs both collection a and b. I need two collections a and b, because the entries have complete different layout and content.
I need as output one collection list, because I want one grid with all entries, that could be filtered via isotope.
So I have managed to set everything up and works the way I was looking to achieve. Thanks Again.
However how would I go about the following problem - The same collection (breakfast for example) might have items in the section that have extra prices (lets say small portion and a large portion). When I am styling the dynamic item it cascades it across all the dynamic items. So these extra fields that I might apply to only one or two food items becomes added to all items.
Now you just have to set the visibility for this field. Select it in the collection list and go to the settings tab. Add a conditional visibility rule. Here you want the field to appear only if it’s used. So you will set the visibility to “Is set”, which means “is in use” or “has data”.
