Update app.py

app.py

@@ -150,24 +150,37 @@ def modal_js():
     modal_script = """
     <script>
         let cart = [];
-        function openModal(name, image2, description, price) {
-            const modal = document.getElementById('modal');
-            modal.style.display = 'block';
-            modal.style.position = 'fixed';
-            modal.style.width = window.innerWidth <= 768 ? '90%' : '30%';
-            modal.style.top = `${event.clientY}px`;
-            modal.style.left = '50%';
-            modal.style.transform = 'translate(-50%, -50%)';
-            document.getElementById('modal-image').src = image2;
-            document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-description').innerText = description;
-            document.getElementById('modal-price').innerText = price;
-            document.getElementById('quantity').value = 1;
-            document.getElementById('special-instructions').value = '';
+        function openCartModal() {
+            const cartModal = document.getElementById('cart-modal');
+            const cartItemsContainer = document.getElementById('cart-items');
+            
+            // Empty the current cart content and update with the latest cart items
+            cartItemsContainer.innerHTML = "";
+            
+            // Loop through the cart and add it to the modal
+            cart.forEach((item, index) => {
+                const extrasList = item.extras.map(extra => `${extra.name} (+$${extra.price.toFixed(2)})`).join(', ');
+                cartItemsContainer.innerHTML += `
+                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
+                        <h3>${item.name}</h3>
+                        <p>Quantity: ${item.quantity}</p>
+                        <p>Extras: ${extrasList || 'None'}</p>
+                        <p>Special Instructions: ${item.instructions || 'None'}</p>
+                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
+                        <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
+                    </div>
+                `;
+            });
+
+            // Ensure modal is visible
+            cartModal.style.display = 'block';
+            cartModal.style.zIndex = 10000; // Ensure it's above other elements
         }
+
         function closeModal() {
-            document.getElementById('modal').style.display = 'none';
+            document.getElementById('cart-modal').style.display = 'none';
         }
+
         function addToCart() {
             const name = document.getElementById('modal-name').innerText;
             const price = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
@@ -179,43 +192,33 @@ def modal_js():
             }));
             const extrasCost = extras.reduce((total, extra) => total + extra.price, 0);
             const totalCost = (price + extrasCost) * quantity;
+            
+            // Push the item to the cart
             cart.push({ name, price, quantity, extras, instructions, totalCost });
+            
+            // Update the cart button text with the number of items
             updateCartButton();
+            
+            // Close the modal after adding the item
             closeModal();
         }
+
         function updateCartButton() {
+            // Update both buttons to show the number of items in the cart
             const cartButton = document.getElementById('cart-button');
-            cartButton.innerText = `View Cart (${cart.length} items)`;
             const cartButtonTop = document.getElementById('cart-button-top');
+            
+            cartButton.innerText = `View Cart (${cart.length} items)`;
             cartButtonTop.innerText = `View Cart (${cart.length} items)`;
         }
-        function openCartModal() {
-            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 += `
-                    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 8px;">
-                        <h3>${item.name}</h3>
-                        <p>Quantity: ${item.quantity}</p>
-                        <p>Extras: ${extrasList || 'None'}</p>
-                        <p>Special Instructions: ${item.instructions || 'None'}</p>
-                        <p>Total Cost: $${item.totalCost.toFixed(2)}</p>
-                        <button onclick="removeFromCart(${index})" style="color: red;">Remove</button>
-                    </div>
-                `;
-            });
-            cartModal.style.display = 'block';
-        }
-        function closeCartModal() {
-            document.getElementById('cart-modal').style.display = 'none';
-        }
+
         function removeFromCart(index) {
+            // Remove an item from the cart and update the cart button
             cart.splice(index, 1);
             updateCartButton();
-            openCartModal();
+            openCartModal(); // Refresh the cart modal after removing an item
         }
+
         function proceedToCheckout() {
             alert("Proceeding to checkout...");
         }