BiryaniHubflask17

Sleeping

App Files Files Community

Rammohan0504 commited on Jan 27

Commit

9f54586

verified ·

1 Parent(s): d3717de

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +92 -147

templates/cart.html CHANGED Viewed

@@ -1,159 +1,104 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Your Order Summary</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f8f9fa;
-            margin: 0;
-            padding: 0;
-        }
-        .order-container {
-            max-width: 768px;
-            margin: 20px auto;
-            padding: 20px;
-            background-color: #fff;
-            border-radius: 10px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-            text-align: center;
-        }
-        h2 {
-            color: #FF5722;
-            font-size: 2rem;
-        }
-        .order-summary {
-            margin-top: 20px;
-            text-align: left;
-            font-size: 1.2rem;
-        }
-        .order-summary .item {
-            margin-bottom: 10px;
-        }
-        .order-summary .item span {
-            display: inline-block;
-            width: 100%;
-            font-size: 1rem;
-            color: #333;
-        }
-        .total-price {
-            font-size: 1.5rem;
-            font-weight: bold;
-            margin-top: 15px;
-        }
-        .apply-coupon-section {
-            margin-top: 20px;
-            padding: 10px;
-            background-color: #f1f1f1;
-            border-radius: 5px;
-        }
-        .apply-coupon-section input {
-            width: 80%;
-            padding: 8px;
-            font-size: 1rem;
-            margin-right: 10px;
-        }
-        .apply-coupon-section button {
-            padding: 10px 20px;
-            background-color: #28a745;
-            color: white;
-            font-size: 1rem;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .apply-coupon-section button:hover {
-            background-color: #218838;
-        }
-        .back-to-menu {
-            margin-top: 30px;
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            font-size: 1rem;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-        .back-to-menu:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-<body>
-    <div class="order-container">
-        <h2>Your Order Summary</h2>
-        <!-- Order Details Section -->
-        <div class="order-summary">
-            <div class="item" id="item1">
-                <span>Chicken Curry (Qty: 1.0, Add-Ons: None, Price: $14.00)</span>
-                <span id="price1">$14.00</span>
-            </div>
-            <div class="item" id="item2">
-                <span>Sukka Gosht (Goat) (Qty: 1.0, Add-Ons: None, Price: $18.00)</span>
-                <span id="price2">$18.00</span>
-            </div>
-            <!-- Discount Section -->
-            <div class="item" id="discountSection">
-                <span>Discount: $<span id="discountAmount">0.00</span></span>
-            </div>
-            <!-- Total Price Section -->
-            <div class="total-price">
-                Total: $<span id="totalAmount">32.00</span>
-            </div>
-        </div>
-        <!-- Apply Coupon Section -->
-        <div class="apply-coupon-section">
-            <input type="text" id="couponCode" placeholder="Enter coupon code" />
-            <button onclick="applyCoupon()">Apply Coupon</button>
-        </div>
-        <!-- Back to Menu Button -->
-        <button class="back-to-menu" onclick="window.location.href='/menu'">Back to Menu</button>
-    </div>
-    <script>
-        // Function to apply the coupon
-        function applyCoupon() {
-            const couponCode = document.getElementById('couponCode').value;
-            const subtotal = 32.00; // Hardcoded subtotal for this example (replace it with dynamic value)
-            const couponMessage = document.getElementById('couponMessage');
-            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) {
-                        // Calculate and update the discount and total price
-                        const discount = data.discount;
-                        const total = subtotal - discount;
-                        document.getElementById('discountAmount').innerText = discount.toFixed(2);
-                        document.getElementById('totalAmount').innerText = total.toFixed(2);
                     } else {
-                        alert(data.message); // Show error message if coupon is invalid
                     }
                 })
                 .catch(error => {
-                    console.error('Error applying coupon:', error);
-                    alert('Error applying coupon.');
                 });
             } else {
-                alert('Please enter a coupon code');
             }
-        }
-    </script>
-</body>
-</html>

+<!-- Updated Apply Coupon Section -->
+<div class="apply-coupon">
+    <label for="coupon-code">Coupon Code:</label>
+    <select id="coupon-code" name="coupon_code">
+        <option value="">Select a coupon code</option>
+        {% for coupon in coupon_codes %}
+        <option value="{{ coupon.Coupon_Code__c }}">{{ coupon.Coupon_Code__c }}</option>
+        {% endfor %}
+    </select>
+    <button type="button" onclick="applyCoupon()">Apply Coupon</button>
+    <p id="coupon-message" class="coupon-message"></p>
+</div>
+<!-- Subtotal -->
+<div class="cart-summary">
+    <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>
+<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-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) {
+                    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 {
+                    couponMessage.innerText = data.message;
+                    couponMessage.style.color = 'red';
+                }
+            })
+            .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';
+        }
+    }
+    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>