Update templates/cart.html

templates/cart.html

@@ -336,14 +336,14 @@ function updateQuantity(action, itemName, customerEmail) {
     // Update quantity based on action
     if (action === 'increase') {
         quantity += 1;  // Simply increase the quantity by 1
-    } else if (action === 'decrease' && quantity > 1) {
-        quantity -= 1;  // Decrease the quantity by 1, ensuring it stays at least 1
+    } else if (action === 'decrease' && quantity > 0) {
+        quantity -= 1;  // Decrease the quantity by 1, ensuring it can reach 0
     }
 
-    // Check if quantity is zero
+    // If quantity reaches 0, remove the item
     if (quantity === 0) {
-        removeItemFromCart(itemName);  // Call the remove function if quantity is 0
-        return;  // Don't proceed with updating quantity or sending request
+        removeItemFromCart(itemName);
+        return; // Don't continue with quantity update request if item is removed
     }
 
     // Update the input field with the new integer quantity
@@ -383,6 +383,31 @@ function updateQuantity(action, itemName, customerEmail) {
     .catch(err => console.error("Error:", err));
 }
 
+function removeItemFromCart(itemName) {
+    // Find and remove the item element from the DOM
+    let itemElement = document.querySelector(`.cart-item[data-item-name="${itemName}"]`);
+    if (itemElement) {
+        itemElement.remove();  // Remove the item from the cart UI
+    }
+
+    // Optionally, also send a request to the server to remove the item
+    fetch('/cart/remove_item', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ item_name: itemName })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            console.log("Item removed from cart successfully");
+        } else {
+            alert("Error removing item from cart: " + data.error);
+        }
+    })
+    .catch(err => console.error("Error:", err));
+}
+
+
 function removeItemFromCart(itemName) {
     // Hide the item or remove it from the cart UI
     let itemElement = document.querySelector(`.cart-item[data-item-name="${itemName}"]`);