Best way to create a modal setup

Question

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 Update and 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 Update button

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 Add, Update, Delete on the initial modal but have Update and Delete hidden. 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 Add button and show the Update and Delete button

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.

Answer 1

Criteria

1. Does it work?

No I am not being flippant. But if you are consulting a flow chart for how something should happen, that's the very first thing that should happen. It should work.

2. Is it contained?

Again not being flippant. If you think your solution is hacky, put a decent strong interface around it such that you could take anyone of your other solutions and substitute it right in and have no other code be the wiser, or even care.

3. Test, Test, Test, then Test some more

Figure out the X deployment targets you have in mind and ensure that you have well crafted tests that describe exactly what you want.

• If the Hacky, working, and contained solution meets the expectations - move on.
• Otherwise keep substituting in solutions till something meets the expectations and - move on.

4. Profile

If you have one piece of hacky code, you have 20 such pieces of hacky code already. Profile the whole system.

• What isn't performing?
• What is attracting the most bugs?
• What is illegable?
• What is the hardest to work with?
• What lines of code are dead?

Rate them, and assign time to work on the most egregious pieces/or the most trivial to remedy pieces first.

Having a single shiny cog does not make the system any better. But several less grimy cogs would be useful.

---

I get that having the Best Solution™ would be great, but it is a forever moving and rascally target.

You already have a few workable solutions (peering into the murky veil of the future - no warranties included), and hindsight is 20/20.

Our vision is no clearer than your own, except for the guy who implemented the Uber Eats app, and it is probably not in their interest to share.