Update templates/menu.html

templates/menu.html

@@ -1002,6 +1002,10 @@ function addSoftDrinkToCart(name, price, image, section, category, index) {
         alert('An error occurred while adding the Soft Drink to the cart.');
     });
 }
+
+
+
+
     // Function to increase quantity
 function increaseQuantity(name, index) {
     let quantityElement = document.getElementById(`quantity-${index}`);
@@ -1026,16 +1030,54 @@ function decreaseQuantity(name, index) {
     }
 }
   // Existing updateCartUI function (unchanged, but included for reference)
-function updateCartUI(cart) {
-    if (!Array.isArray(cart)) {
-        console.error('Invalid cart data:', cart);
-        return;
-    }
-    const cartIcon = document.getElementById('cart-icon');
-    if (cartIcon) {
-        cartIcon.innerText = cart.length; // Update cart icon if it exists
-    }
+// function updateCartUI(cart) {
+//     if (!Array.isArray(cart)) {
+//         console.error('Invalid cart data:', cart);
+//         return;
+//     }
+//     const cartIcon = document.getElementById('cart-icon');
+//     if (cartIcon) {
+//         cartIcon.innerText = cart.length; // Update cart icon if it exists
+//     }
+// }
+  function updateCartUI(cartData) {
+    // Assuming cartData is an array of cart items
+    const cartItemsContainer = document.getElementById('cart-items'); // The container where cart items are listed
+    const cartTotalPrice = document.getElementById('cart-total-price'); // The element where total price is displayed
+    const cartTotalQuantity = document.getElementById('cart-total-quantity'); // The element where total quantity is displayed
+
+    // Clear current cart items in the UI
+    cartItemsContainer.innerHTML = '';
+
+    let totalPrice = 0;
+    let totalQuantity = 0;
+
+    // Loop through cartData to update UI
+    cartData.forEach(item => {
+        const itemRow = document.createElement('div');
+        itemRow.classList.add('cart-item');
+
+        itemRow.innerHTML = `
+            <div class="cart-item-details">
+                <img src="${item.itemImage}" alt="${item.itemName}" class="cart-item-img">
+                <span class="cart-item-name">${item.itemName}</span>
+                <span class="cart-item-price">$${item.itemPrice.toFixed(2)}</span>
+                <span class="cart-item-quantity">Qty: ${item.quantity}</span>
+            </div>
+        `;
+
+        cartItemsContainer.appendChild(itemRow);
+
+        // Update the total price and quantity
+        totalPrice += item.itemPrice * item.quantity;
+        totalQuantity += item.quantity;
+    });
+
+    // Update the total price and quantity in the UI
+    cartTotalPrice.innerText = `Total: $${totalPrice.toFixed(2)}`;
+    cartTotalQuantity.innerText = `Items: ${totalQuantity}`;
 }
+
         
     </script>