I am building a restaurant menu with built in ordering.
The basic stuff is working OK but I have a challenge and need some ideas of how to approach this problem.
When I add a menu item to the cart I also want to be able to specify options for the specific menu item.
For example, if I order a Pizza I want to get the option to add extra cheese, extra bacon and select from different sauces.
I have an Action for the “add to cart” that opens a new screen for the options and I have played around with the checklist collection but I cannot get it to work.
All orders are done by logged in users so user specific data should be used.
The checklist collection only seems to set actual values directly in the checklist data.
I want to present the options from the checklist but write the data into another table where the options are saved.
On top of this I need to categorize the available options in different categories, like Pizza-category will have options for extra cheese but the Burger-options should have other options like Glutenfree bread and options that belong to burgers.
How should I approach this?
My initial though was to create a checklist collection that filters on the food category like the image below but when I “check” for extra cheese the data is written to the actual food-options table.
Does it have to be a checklist though? I think you can use a choice component writing to a column in your Cart table.
The extra toppings/sauces would reside in their own table.
RowID
Topping name
Price
ID001
Cheese
$3
ID002
Bacon
$5
ID003
Tomato sauce
$1
Then your choice component would write a comma-delimited list of rowIDs from this table, and then you can split them into an array, relate them back to the toppings table and get a rollup sum of toppings/sauces’ price for a line item.
It was a bit of a struggle, since the choice component would only write the first row in the cart table and I could not get it to write on a specific row.
However I made some changes in the order flow and got it working like a charm.
This is what I did:
I added 3 new columns in the Users table, current.options current.menuitem and current.menuitem.price
When I click on the “Add to cart” button I have an Action that pulls the menu item and the menu item price and updates the Users row, then as the next step in the Action I open a new screen based on the cart table. Here I present the options as a choice pulled from the options.choice table and I write the data directly to the Users table and the current.options column.
Then I have a final button on the new screen where I present the options, that just says “Done”
The “Done” button runs an Action to add a row to the cart but I am grabbing the data from the Users table and the 3 new columns and as the last step of this Action I clear the values of the 3 columns in the Users table again.
So basically I temporarily store the menu item and price and options in the User’s row and then get the data from the Users table when adding to the cart.
Works perfect, and I can also filter the options based on the food category of the item, so Pizza will have cheese and other pizza options, while a burger can have different sizes as the option.
I did as you said when summarizing the price of the options.
In the cart table I added columns to create a relation (multiple matches) to the options table and then I lookup the options chosen and then lookup the options prices and then finally a rollup to summarize the option prices.