Update app.py

app.py

@@ -150,6 +150,7 @@ def modal_js():
     modal_script = """
     <script>
         let cart = [];
+        let totalCartCost = 0;
 
         function openModal(name, image2, description, price) {
             const modal = document.getElementById('modal');
@@ -182,8 +183,12 @@ def modal_js():
             }));
             const extrasCost = extras.reduce((total, extra) => total + extra.price, 0);
             const totalCost = (price + extrasCost) * quantity;
+
+            // Add the item to the cart
             cart.push({ name, price, quantity, extras, instructions, totalCost });
+            totalCartCost += totalCost;  // Update the total cost of the cart
             updateCartButton();
+            updateCartTotalCost();  // Update total cost displayed
             closeModal();
         }
 
@@ -196,6 +201,7 @@ def modal_js():
             const cartModal = document.getElementById('cart-modal');
             const cartItemsContainer = document.getElementById('cart-items');
             cartItemsContainer.innerHTML = "";
+
             cart.forEach((item, index) => {
                 const extrasList = item.extras.map(extra => `${extra.name} (+$${extra.price.toFixed(2)})`).join(', ');
                 cartItemsContainer.innerHTML += `
@@ -209,6 +215,7 @@ def modal_js():
                     </div>
                 `;
             });
+
             cartModal.style.display = 'block';
         }
 
@@ -217,11 +224,18 @@ def modal_js():
         }
 
         function removeFromCart(index) {
+            totalCartCost -= cart[index].totalCost;  // Deduct the cost of the removed item from total cost
             cart.splice(index, 1);
             updateCartButton();
+            updateCartTotalCost();  // Update total cost displayed
             openCartModal();
         }
 
+        function updateCartTotalCost() {
+            const totalCostElement = document.getElementById('cart-total-cost');
+            totalCostElement.innerText = `Total Cart Cost: $${totalCartCost.toFixed(2)}`;
+        }
+
         function proceedToCheckout() {
             alert("Proceeding to checkout...");
         }
@@ -256,12 +270,8 @@ with gr.Blocks() as app:
         with gr.Column():
             preference = gr.Radio(choices=["All", "Veg", "Non-Veg"], label="Filter Preference", value="All")
             menu_output = gr.HTML()
-            gr.HTML("""
-                <div id='cart-button' style='position: fixed; bottom: 0; right: 0; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>
-                    View Cart
-                </div>
-            """)
-            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
+            gr.HTML("<div id='cart-button' style='position: fixed; top: 20px; right: 20px; background: #28a745; color: white; padding: 10px 20px; border-radius: 30px; cursor: pointer; z-index: 1000;' onclick='openCartModal()'>View Cart</div>")
+            gr.HTML("<div id='cart-modal' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 1000; overflow-y: auto;'><div style='padding: 20px;'><div style='text-align: right;'><button onclick='closeCartModal()' style='background: none; border: none; font-size: 24px; cursor: pointer;'>&times;</button></div><h1>Your Cart</h1><div id='cart-items'></div><p id='cart-total-cost' style='font-size: 1.2em; font-weight: bold;'>Total Cart Cost: $0.00</p><button style='background: #ff5722; color: white; padding: 10px 20px; border-radius: 5px; border: none; cursor: pointer;' onclick='proceedToCheckout()'>Proceed to Checkout</button></div></div>")
             gr.HTML(create_modal_window())
             gr.HTML(modal_js())