BiryaniHubflask17

Sleeping

App Files Files Community

Rammohan0504 commited on Jan 27

Commit

19bc830

verified ·

1 Parent(s): 5fba391

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +97 -191

templates/cart.html CHANGED Viewed

@@ -3,251 +3,157 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Cart</title>
-    <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
             font-family: Arial, sans-serif;
             background-color: #f8f9fa;
         }
-        .cart-container {
             max-width: 768px;
             margin: 20px auto;
-            padding: 15px;
             background-color: #fff;
             border-radius: 10px;
             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
         }
-        .cart-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            border-bottom: 1px solid #dee2e6;
-            padding: 10px 0;
         }
-        .cart-item img {
-            width: 70px;
-            height: 70px;
-            object-fit: cover;
-            border-radius: 5px;
         }
-        .cart-item-details {
-            flex: 1;
-            margin-left: 15px;
         }
-        .cart-item-title {
             font-size: 1rem;
-            font-weight: bold;
         }
-        .cart-item-quantity {
-            display: flex;
-            align-items: center;
-            margin-top: 5px;
-        }
-        .cart-item-quantity button {
-            width: 30px;
-            height: 30px;
-            border: none;
-            background-color: #f0f0f0;
-            font-size: 1rem;
             font-weight: bold;
-            cursor: pointer;
-        }
-        .cart-item-quantity input {
-            width: 40px;
-            text-align: center;
-            border: none;
-            background-color: #f8f9fa;
-            font-size: 1rem;
-            margin: 0 5px;
-        }
-        .cart-summary {
-            text-align: right;
             margin-top: 15px;
         }
-        .checkout-button {
-            background-color: #007bff;
-            color: #fff;
             padding: 10px;
             border-radius: 5px;
-            border: none;
-            width: 100%;
-            font-size: 1.2rem;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-        .apply-coupon {
-            margin-top: 20px;
-            text-align: right;
         }
-        .apply-coupon select, .apply-coupon button {
             font-size: 1rem;
         }
-        .apply-coupon button {
             background-color: #28a745;
             color: white;
-            padding: 5px 15px;
             border: none;
             cursor: pointer;
         }
-        .apply-coupon button:hover {
             background-color: #218838;
         }
-        .coupon-message {
-            margin-top: 10px;
             font-size: 1rem;
-            color: red;
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <div class="cart-container">
-            <div style="text-align: right;">
-                <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
             </div>
-            <h4 class="mb-4">Your Cart</h4>
-            <!-- Cart Items -->
-            {% for item in cart_items %}
-            <div class="cart-item">
-                <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
-                <div class="cart-item-details">
-                    <div class="cart-item-title">{{ item.Name }}</div>
-                    <div class="cart-item-addons">
-                        <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
-                    </div>
-                    <div class="cart-item-instructions">
-                        <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
-                    </div>
-                    <div class="cart-item-quantity mt-2">
-                       <!-- Decrease button -->
-                       <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
-                       <!-- Quantity input field -->
-                       <input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
-                       <!-- Increase button -->
-                       <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
-                    </div>
-                </div>
-                <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>
-                </div>
             </div>
-            {% else %}
-            <p class="text-center">Your cart is empty.</p>
-            {% endfor %}
-            <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>
         </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
-        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>
 </body>
 </html>

 <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>