Update templates/cart.html

templates/cart.html

@@ -138,7 +138,11 @@
                     </div>
                 </div>
                 <div class="cart-item-actions">
-                    <div class="text-primary">${{ item.Price__c + item.Add_Ons_Price__c }}</div>
+                    <div class="text-primary">
+                        $<span class="base-price">{{ item.Price__c }}</span> +
+                        $<span class="addons-price">{{ item.Add_Ons_Price__c }}</span>
+                    </div>
+
                     <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
                 </div>
             </div>
@@ -172,58 +176,59 @@
     <script>
         // Example function to handle the increase/decrease button clicks
         function updateQuantity(action, itemName, customerEmail) {
-            let quantity = parseInt(document.querySelector(`input[data-item-name="${itemName}"]`).value); // Get current quantity
+            let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
+            let quantity = parseInt(quantityInput.value);
             // Update quantity based on action
             if (action === 'increase') {
                 quantity++;
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
+
+            // Validate quantity
             if (isNaN(quantity) || quantity < 1) {
-                console.error("Invalid quantity:", quantity);
-                alert("Quantity must be a valid number greater than 0.");
+                alert("Invalid quantity!");
                 return;
-        }
-            console.log({
-                email: customerEmail,
-                item_name: itemName,
-                quantity: quantity
-            });
+            }
+
+            // Send updated quantity to the server
             fetch('/cart/update_quantity', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    email: customerEmail,  // Customer's email
-                    item_name: itemName,   // Item name
-                    quantity: quantity     // New quantity
-                })
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
+                    // Update the item price and quantity in the UI
+                    quantityInput.value = quantity;
+                    let itemPriceElement = document.querySelector(`.cart-item[data-item-name="${itemName}"] .text-primary`);
+                    itemPriceElement.innerHTML = `$<span class="base-price">${data.new_item_price}</span>`;
+
+                    // Recalculate subtotal dynamically
                     calculateSubtotal();
-                    document.querySelector(`input[data-item-name="${itemName}"]`).value = quantity;
                 } else {
                     alert("Error updating quantity: " + data.error);
                 }
             })
-            .catch(error => {
-                console.error('Error:', error);
-            });
+            .catch(err => console.error("Error:", err));
         }
 
+        
         function calculateSubtotal() {
             let subtotal = 0;
             document.querySelectorAll('.cart-item').forEach(item => {
                 const quantity = parseInt(item.querySelector('input').value);
-                const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price (Price__c)
-                const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price (Add_Ons_Price__c)
-                subtotal += (basePrice * quantity) + addonsPrice;
+                const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
+                const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
+                subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
             });
+
+            // Update the subtotal in the HTML
+            document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
             return subtotal;
         }
+
    
         function proceedToOrder() {
             fetch('/checkout', {