Update templates/cart.html

templates/cart.html

@@ -143,7 +143,6 @@
             <p class="text-center">Your cart is empty.</p>
             {% endfor %}
 
-            <!-- Apply Coupon Section -->
             <div class="apply-coupon">
                 <label for="coupon-code">Coupon Code:</label>
                 <select id="coupon-code" name="coupon_code">
@@ -158,95 +157,97 @@
 
             <!-- Subtotal -->
             <div class="cart-summary">
-                <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
+                <p id="subtotal-text" class="fw-bold">Subtotal: ${{ subtotal }}</p>
+                <p id="discount-text" class="fw-bold">Discount: $0.00</p>
+                <p id="total-text" class="fw-bold">Total: ${{ subtotal }}</p> <!-- The final total after discount -->
                 <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
             </div>
         </div>
     </div>
 
-    <script>
-        // Fetch coupon codes automatically when the page loads
-        document.addEventListener("DOMContentLoaded", function() {
-            const customerEmail = "{{ customer_email }}"; // The email stored in the session
+     <script>
+    // Fetch coupon codes automatically when the page loads
+    document.addEventListener("DOMContentLoaded", function() {
+        const customerEmail = "{{ customer_email }}"; // The email stored in the session
 
-            if (customerEmail) {
-                fetch(`/get_coupon_codes?email=${customerEmail}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success && data.coupon_codes) {
-                            const couponSelect = document.getElementById('coupon-code');
-                            data.coupon_codes.forEach(coupon => {
-                                const option = document.createElement('option');
-                                option.value = coupon.Coupon_Code__c;
-                                option.textContent = coupon.Coupon_Code__c;
-                                couponSelect.appendChild(option);
-                            });
-                        } else {
-                            document.getElementById('coupon-message').innerText = "No active coupons found for your account.";
-                            document.getElementById('coupon-message').style.color = "red";
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error fetching coupon codes:', error);
-                    });
-            }
-        });
-
-        // Apply coupon and discount
-        function applyCoupon() {
-            const couponCode = document.getElementById('coupon-code').value;
-            const subtotal = parseFloat(document.getElementById('subtotal').innerText.replace('$', ''));
-            const couponMessage = document.getElementById('coupon-message');
-
-            if (couponCode) {
-                fetch('/apply_coupon', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ coupon_code: couponCode, subtotal: subtotal })
-                })
+        if (customerEmail) {
+            fetch(`/get_coupon_codes?email=${customerEmail}`)
                 .then(response => response.json())
                 .then(data => {
-                    if (data.success) {
-                        const discount = data.discount;
-                        const totalPrice = subtotal - discount;
-                        document.getElementById('discount').innerText = discount.toFixed(2);
-                        document.getElementById('total-price').innerText = totalPrice.toFixed(2);
-                        couponMessage.innerText = `Coupon applied! You saved $${discount.toFixed(2)}`;
-                        couponMessage.style.color = 'green';
+                    if (data.success && data.coupon_codes) {
+                        const couponSelect = document.getElementById('coupon-code');
+                        data.coupon_codes.forEach(coupon => {
+                            const option = document.createElement('option');
+                            option.value = coupon.Coupon_Code__c;
+                            option.textContent = coupon.Coupon_Code__c;
+                            couponSelect.appendChild(option);
+                        });
                     } else {
-                        couponMessage.innerText = data.message;
-                        couponMessage.style.color = 'red';
+                        document.getElementById('coupon-message').innerText = "No active coupons found for your account.";
+                        document.getElementById('coupon-message').style.color = "red";
                     }
                 })
                 .catch(error => {
-                    console.error('Error applying coupon:', error);
-                    couponMessage.innerText = 'Error applying coupon.';
-                    couponMessage.style.color = 'red';
+                    console.error('Error fetching coupon codes:', error);
                 });
-            } else {
-                couponMessage.innerText = 'Please select a coupon code.';
-                couponMessage.style.color = 'red';
-            }
         }
-        
-        function proceedToOrder() {
-            fetch('/checkout', {
+    });
+
+    // Apply coupon and discount
+    function applyCoupon() {
+        const couponCode = document.getElementById('coupon-code').value;
+        const subtotal = parseFloat(document.getElementById('subtotal-text').innerText.replace('Subtotal: $', ''));
+        const couponMessage = document.getElementById('coupon-message');
+
+        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) {
-                    alert(data.message);
-                    window.location.href = '/order'; // Redirect to menu or order confirmation page
+                    const discount = data.discount;
+                    const totalPrice = subtotal - discount;
+                    document.getElementById('discount-text').innerText = `Discount: $${discount.toFixed(2)}`;
+                    document.getElementById('total-text').innerText = `Total: $${totalPrice.toFixed(2)}`;
+                    couponMessage.innerText = `Coupon applied! You saved $${discount.toFixed(2)}`;
+                    couponMessage.style.color = 'green';
                 } else {
-                    alert(data.error || data.message);
+                    couponMessage.innerText = data.message;
+                    couponMessage.style.color = 'red';
                 }
             })
-            .catch(err => console.error('Error during checkout:', err));
+            .catch(error => {
+                console.error('Error applying coupon:', error);
+                couponMessage.innerText = 'Error applying coupon.';
+                couponMessage.style.color = 'red';
+            });
+        } else {
+            couponMessage.innerText = 'Please select a coupon code.';
+            couponMessage.style.color = 'red';
         }
-    </script>
+    }
+
+    function proceedToOrder() {
+        fetch('/checkout', {
+            method: 'POST',
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                alert(data.message);
+                window.location.href = '/order'; // Redirect to menu or order confirmation page
+            } else {
+                alert(data.error || data.message);
+            }
+        })
+        .catch(err => console.error('Error during checkout:', err));
+    }
+</script>
 
 </body>
 </html>