I'm making an online food ordering platform similar to something like Uber Eats. I have the menu items stored in the database which are then sent to the front end where I use a templating language to build the menu and create the initial modals (which are all hidden obviously).
Once you click an item on the menu the respective modal opens up where you select the add-ons, write extra information, and change the quantity. Then, the user can add the item to the cart. The cart is a drop down shown on the menu page.
So here's where I would like some advice. I want to have the ability such that when the user clicks on an item in the cart, the modal will show up for that item with all the selections made and instead of having just
Add written on the bottom, it'll say something like
Delete. If you haven't used Uber Eats or anything similar, an example would be like the user adds 2 regular pizzas and also adds extra cheese. Then, when the user clicks on that pizza in their cart, it'll open the modal for the regular pizza with extra cheese already checked and the quantity changed to two. What would be the easiest/most efficient way to do this?
Solutions I've thought of
- In terms of updating the cart when the user makes changes, the most straight forward approach would juse be to delete the entire previous item and replace it with the new one when the person clicks the
As for creating the modals themself
- Create two modals when I'm creating the initial ones using the templating language. This seems easiest and straight forward but that feels like it'll be a TON of modals and idk if it'll have performance issues
- A more CSS approach I just thought of was to have the buttons
Deleteon the initial modal but have
Deletehidden. Then, when the user clicks an item in the cart, I'd look for the modal with the respective item and open said modal but add a css class which would instead hide the
Addbutton and show the
As for pre-selecting the items
- I'm not too sure about this but a straight forward approach would be that since each addon has a unique id I could just look at the addons within the cart and look for the unique id and select it?
These are mostly straight forward approaches that I've been thinking of but I'm wondering if there's better/more efficient ways to do these things since I have a tendency to create 'hacky' solutions to problems.