Update templates/cart.html

templates/cart.html

@@ -77,6 +77,31 @@
             cursor: pointer;
             margin-top: 10px;
         }
+        .apply-coupon {
+            margin-top: 20px;
+            text-align: right;
+        }
+        .apply-coupon input {
+            width: 200px;
+            padding: 5px;
+            margin-right: 10px;
+        }
+        .apply-coupon button {
+            background-color: #28a745;
+            color: white;
+            padding: 5px 15px;
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+        .apply-coupon button:hover {
+            background-color: #218838;
+        }
+        .coupon-message {
+            margin-top: 10px;
+            font-size: 1rem;
+            color: red;
+        }
         .suggestion-section {
             margin-top: 20px;
             padding: 15px;
@@ -143,7 +168,6 @@
                 <div class="cart-item-actions">
                     <div class="text-primary">
                         $<span class="base-price">{{ item.Price__c }}</span> 
-                       
                     </div>
 
                     <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
@@ -153,6 +177,14 @@
             <p class="text-center">Your cart is empty.</p>
             {% endfor %}
 
+            <!-- Apply Coupon Section -->
+            <div class="apply-coupon">
+                <label for="coupon-code">Coupon Code:</label>
+                <input type="text" id="coupon-code" name="coupon_code" placeholder="Enter coupon code">
+                <button type="button" onclick="applyCoupon()">Apply Coupon</button>
+                <p id="coupon-message" class="coupon-message"></p>
+            </div>
+
             <!-- Subtotal -->
             <div class="cart-summary">
                 <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
@@ -162,7 +194,6 @@
 
         <!-- Suggestions Section -->
         <div class="suggestion-section">
-
             {% for suggestion in suggestions %}
             <div class="suggestion-item">
                 <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
@@ -177,78 +208,44 @@
     </div>
 
     <script>
-        // Example function to handle the increase/decrease button clicks
-        function updateQuantity(action, itemName, customerEmail) {
-            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--;
-            }
+        function applyCoupon() {
+            const couponCode = document.getElementById('coupon-code').value;
+            const subtotal = parseFloat(document.getElementById('subtotal').innerText);
+            const couponMessage = document.getElementById('coupon-message');
 
-            // Validate quantity
-            if (isNaN(quantity) || quantity < 1) {
-                alert("Invalid quantity!");
-                return;
-            }
-
-            // Send updated quantity to the server
-            fetch('/cart/update_quantity', {
-                method: 'POST',
-                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 itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
-                    if (itemElement) {
-                        let basePriceElement = itemElement.querySelector(".base-price");
-                        let addonsPriceElement = itemElement.querySelector(".addons-price");
-
-                        // Update the base price
-                        if (basePriceElement) {
-                            basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
-                        }
-
-                        // Update add-ons price if needed (optional)
-                        if (addonsPriceElement && data.addons_price !== undefined) {
-                            addonsPriceElement.innerText = data.addons_price.toFixed(2);
-                        }
+            if (couponCode) {
+                fetch('/apply_coupon', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ coupon_code: couponCode, subtotal: subtotal })
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        const discount = data.discount;
+                        const totalPrice = subtotal - discount;
+                        document.getElementById('discount').innerText = discount;
+                        document.getElementById('total-price').innerText = totalPrice;
+                        couponMessage.innerText = `Coupon applied! You saved $${discount}`;
+                        couponMessage.style.color = 'green';
                     } else {
-                        console.error(`Parent cart item element not found for item: ${itemName}`);
+                        couponMessage.innerText = data.message;
+                        couponMessage.style.color = 'red';
                     }
-                    location.reload();
-
-                    // Recalculate subtotal dynamically
-                    
-                } else {
-                    alert("Error updating quantity: " + data.error);
-                }
-            })
-            .catch(err => console.error("Error:", err));
+                })
+                .catch(error => {
+                    console.error('Error applying coupon:', error);
+                    couponMessage.innerText = 'Error applying coupon.';
+                    couponMessage.style.color = 'red';
+                });
+            } else {
+                couponMessage.innerText = 'Please enter a coupon code.';
+                couponMessage.style.color = 'red';
+            }
         }
-
         
-        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
-                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', {
                 method: 'POST',
@@ -264,65 +261,6 @@
             })
             .catch(err => console.error('Error during checkout:', err));
         }
-        function addSuggestion(itemId) {
-            fetch(`/cart/add_suggestion/${itemId}`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({})
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert('Item added to cart!');
-                    location.reload();
-                } else {
-                    alert(data.error);
-                }
-            })
-            .catch(err => console.error('Error adding suggestion:', err));
-        }
-        function removeItemFromCart(itemName) {
-            fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                }
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert(data.message);
-                    location.reload(); // Reload the page to update the cart
-                } else {
-                    alert(data.message);
-                }
-            })
-            .catch(err => console.error('Error removing item:', err));
-        }
-        function addToCart(itemName, customerEmail) {
-            fetch(`/cart/add_item`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    email: customerEmail,
-                    item_name: itemName.trim(), //Ensure the item name is trimmed
-                    quantity: 0 // DEFAULT QUANTITY PASSED HERE
-                })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert("Item added/updated successfully.");
-                    location.reload(); // Reload the page to update the cart
-                } else {
-                    alert(data.error || "Failed to add item to cart.");
-                }
-            })
-            .catch(err => console.error("Error adding item to cart:", err));
-        }
-        
-        
     </script>
-
 </body>
-</html>
+</html>