Update templates/Menu.html

templates/Menu.html

@@ -251,16 +251,20 @@
                     </div>
                     <h3>${item.Name}</h3>
                     <p class="price">$${item.Price__c}</p>
-                    <div class="rating">
-                        ⭐ 4.2 (206)
-                    </div>
+                    <div class="rating">⭐ 4.2 (206)</div>
                     <button class="save-btn">❤️ Save to Eatlist</button>
                     <p class="description">${item.Description__c}</p>
                 </div>
                 <div class="add-container">
                     <img class="menu-img" src="${item.Image1__c}" alt="${item.Name}">
-                    <button class="add-btn" onclick='addToCart(${JSON.stringify(item)})'>ADD</button>
-                    <p class="customizable" style="position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);">Customisable</p>
+                    ${cart[item.Name] ? `
+                        <div class="quantity-control">
+                            <button onclick="decreaseQuantity('${item.Name}')">-</button>
+                            <span>${cart[item.Name].quantity}</span>
+                            <button onclick="increaseQuantity('${item.Name}')">+</button>
+                        </div>`
+                    : `<button class="add-btn" onclick='addToCart(${JSON.stringify(item)})'>ADD</button>`}
+                    <p class="customizable" style="text-align: center; margin-top: 10px;">Customisable</p>
                 </div>
             `;
             menuContainer.appendChild(menuItem);
@@ -287,9 +291,28 @@
 
   // Function to handle adding an item to the cart
     function addToCart(item) {
-        cart.push(item); // Add item to cart array
-        console.log("Cart:", cart); // Log updated cart
-        alert(`${item.Name} added to cart!`); // Alert user
+        if (cart[item.Name]) {
+            cart[item.Name].quantity += 1;
+        } else {
+            cart[item.Name] = { ...item, quantity: 1 };
+        }
+        displayMenu(filteredMenu); // Refresh menu UI to update button
+    }
+
+    // Function to increase quantity
+    function increaseQuantity(name) {
+        cart[name].quantity += 1;
+        displayMenu(filteredMenu);
+    }
+
+    // Function to decrease quantity
+    function decreaseQuantity(name) {
+        if (cart[name].quantity > 1) {
+            cart[name].quantity -= 1;
+        } else {
+            delete cart[name]; // Remove item from cart if quantity is 0
+        }
+        displayMenu(filteredMenu);
     }
 
 </script>