BiryaniHubflask17

Sleeping

App Files Files Community

Rammohan0504 commited on Jan 28

Commit

55390a4

verified ·

1 Parent(s): 750c1a8

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +147 -101

templates/cart.html CHANGED Viewed

@@ -3,7 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Your Cart</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
@@ -11,7 +12,7 @@
             background-color: #f8f9fa;
         }
         .cart-container {
-            max-width: 800px;
             margin: 20px auto;
             padding: 15px;
             background-color: #fff;
@@ -20,8 +21,8 @@
         }
         .cart-item {
             display: flex;
-            justify-content: space-between;
             align-items: center;
             border-bottom: 1px solid #dee2e6;
             padding: 10px 0;
         }
@@ -36,12 +37,13 @@
             margin-left: 15px;
         }
         .cart-item-title {
-            font-size: 1.1rem;
             font-weight: bold;
         }
         .cart-item-quantity {
             display: flex;
             align-items: center;
         }
         .cart-item-quantity button {
             width: 30px;
@@ -64,173 +66,217 @@
             text-align: right;
             margin-top: 15px;
         }
-        .coupon-section {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 20px;
-        }
-        .apply-button {
-            background-color: #28a745;
-            color: #fff;
-            padding: 5px 20px;
-            font-size: 1rem;
-            cursor: pointer;
-            border-radius: 5px;
-        }
-        .apply-button:disabled {
-            background-color: #6c757d;
-        }
         .checkout-button {
             background-color: #007bff;
             color: #fff;
             padding: 10px;
             border-radius: 5px;
             width: 100%;
             font-size: 1.2rem;
             cursor: pointer;
             margin-top: 10px;
         }
-        .error-message {
-            color: red;
-            margin-top: 10px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="cart-container">
-            <h3>Your Cart</h3>
             <!-- 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-quantity">
                         <button onclick="updateQuantity('decrease', '{{ item.Name }}')">-</button>
-                        <input type="text" value="{{ item.Quantity__c }}" readonly>
                         <button onclick="updateQuantity('increase', '{{ item.Name }}')">+</button>
                     </div>
                 </div>
                 <div class="cart-item-actions">
                     <div class="text-primary">
-                        $<span class="item-price">{{ item.Price__c }}</span>
                     </div>
-                    <button class="btn btn-danger btn-sm" onclick="removeItem('{{ item.Name }}')">Remove</button>
                 </div>
             </div>
             {% endfor %}
-            <!-- Coupon Code Section -->
-            <div class="coupon-section">
-                <select id="couponCode" class="form-control" style="width: 70%;"></select>
-                <button class="apply-button" onclick="applyCoupon()">Apply Coupon</button>
             </div>
-            <div class="error-message" id="couponError"></div>
-            <!-- Cart Summary -->
-            <div class="cart-summary">
-                <p><strong>Subtotal: </strong><span id="subtotal">${{ subtotal }}</span></p>
-                <p><strong>Discount: </strong><span id="discount">0.00</span></p>
-                <p><strong>Total: </strong><span id="total">$<span id="total-price">{{ total_price }}</span></span></p>
             </div>
-            <!-- Checkout Button -->
             <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
         </div>
     </div>
     <script>
-        // Fetch the coupon codes related to the logged-in user and populate the dropdown
-        document.addEventListener("DOMContentLoaded", function() {
-            const customerEmail = "{{ customer_email }}"; // Assuming email is passed to the template
-            fetch(`/get_coupons/${customerEmail}`)
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
-                        let couponDropdown = document.getElementById("couponCode");
                         data.coupons.forEach(coupon => {
-                            let option = document.createElement("option");
                             option.value = coupon.Coupon_Code__c;
-                            option.text = coupon.Coupon_Code__c;
-                            couponDropdown.appendChild(option);
                         });
                     } else {
-                        document.getElementById('couponError').innerText = "No coupons available.";
                     }
                 })
-                .catch(error => console.error("Error fetching coupons:", error));
         });
-        // Update item quantity
         function updateQuantity(action, itemName) {
-            let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
             let quantity = parseInt(quantityInput.value);
             if (action === 'increase') {
                 quantity++;
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
-            if (quantity < 1) {
-                quantity = 1;
-            }
-            quantityInput.value = quantity;
-            // Update price and subtotal
-            updateCart(itemName, quantity);
         }
-        // Apply coupon
-        function applyCoupon() {
-            let couponCode = document.getElementById('couponCode').value;
-            if (!couponCode) {
-                document.getElementById('couponError').innerText = "Please select a coupon.";
-                return;
-            }
-            fetch(`/apply_coupon`, {
                 method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ coupon_code: couponCode })
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    let discount = data.discount;
-                    document.getElementById('discount').innerText = discount.toFixed(2);
-                    let subtotal = parseFloat(document.getElementById('subtotal').innerText.replace('$', ''));
-                    let total = subtotal - discount;
-                    document.getElementById('total-price').innerText = total.toFixed(2);
-                    document.getElementById('couponError').innerText = `Coupon applied! You saved $${discount.toFixed(2)}`;
                 } else {
-                    document.getElementById('couponError').innerText = "Invalid coupon code.";
                 }
             })
-            .catch(error => console.error("Error applying coupon:", error));
-        }
-        // Update the cart prices based on the quantity changes
-        function updateCart(itemName, quantity) {
-            let price = parseFloat(document.querySelector(`.item[data-item-name="${itemName}"] .item-price`).innerText.replace('$', ''));
-            let newPrice = price * quantity;
-            document.querySelector(`.item[data-item-name="${itemName}"] .item-price`).innerText = newPrice.toFixed(2);
-            // Update subtotal and total
-            let subtotal = 0;
-            document.querySelectorAll('.item').forEach(item => {
-                subtotal += parseFloat(item.querySelector('.item-price').innerText.replace('$', ''));
-            });
-            document.getElementById('subtotal').innerText = "$" + subtotal.toFixed(2);
-            let discount = parseFloat(document.getElementById('discount').innerText);
-            let total = subtotal - discount;
-            document.getElementById('total-price').innerText = total.toFixed(2);
-        }
-        // Proceed to the order summary page
-        function proceedToOrder() {
-            window.location.href = '/order_summary'; // Redirect to order summary page
         }
     </script>
 </body>

 <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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         body {
             background-color: #f8f9fa;
         }
         .cart-container {
+            max-width: 768px;
             margin: 20px auto;
             padding: 15px;
             background-color: #fff;
         }
         .cart-item {
             display: flex;
             align-items: center;
+            justify-content: space-between;
             border-bottom: 1px solid #dee2e6;
             padding: 10px 0;
         }
             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;
             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;
+        }
+        .apply-button {
+            background-color: #28a745;
+            color: #fff;
+            padding: 5px 20px;
+            font-size: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+            border-radius: 5px;
+            border: none;
+        }
+        .apply-button:hover {
+            background-color: #218838;
         }
     </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" data-item-name="{{ item.Name }}">
                 <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">
                         <button onclick="updateQuantity('decrease', '{{ item.Name }}')">-</button>
+                        <input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
                         <button onclick="updateQuantity('increase', '{{ item.Name }}')">+</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 %}
+            <!-- Subtotal -->
+            <div class="cart-summary">
+                <p class="fw-bold" id="subtotal-text">Subtotal: ${{ subtotal }}</p>
+                <p class="fw-bold" id="discount-text">Discount: $0.00</p>
+                <p class="fw-bold" id="total-text">Total: ${{ subtotal }}</p>
             </div>
+            <!-- Apply Coupon Section -->
+            <div class="apply-coupon">
+                <label for="coupon-code">Coupon Code:</label>
+                <select id="coupon-code" class="form-select">
+                    <option value="">Select a coupon code</option>
+                </select>
+                <button class="apply-button mt-2" onclick="applyCoupon()">Apply Coupon</button>
+                <p id="coupon-message" class="text-danger mt-2"></p>
             </div>
             <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
         </div>
     </div>
     <script>
+        // Fetch coupon codes automatically on page load
+        document.addEventListener("DOMContentLoaded", function () {
+            const customerEmail = "{{ customer_email }}";
+            fetch('/get_coupon_codes', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: customerEmail })
+            })
                 .then(response => response.json())
                 .then(data => {
                     if (data.success) {
+                        const couponSelect = document.getElementById('coupon-code');
                         data.coupons.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.";
                     }
                 })
+                .catch(err => console.error('Error fetching coupons:', err));
         });
+        // Update quantity
         function updateQuantity(action, itemName) {
+            const quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
             let quantity = parseInt(quantityInput.value);
             if (action === 'increase') {
                 quantity++;
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
+            fetch('/cart/update_quantity', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ item_name: itemName, quantity: quantity })
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        quantityInput.value = quantity;
+                        location.reload();
+                    } else {
+                        alert('Error updating quantity: ' + data.message);
+                    }
+                })
+                .catch(err => console.error('Error:', err));
         }
+        // Remove item
+        function removeItemFromCart(itemName) {
+            fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
+                method: 'POST'
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        alert(data.message);
+                        location.reload();
+                    } else {
+                        alert('Error removing item: ' + data.message);
+                    }
+                })
+                .catch(err => console.error('Error:', err));
+        }
+      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));
+        }
+        // Apply coupon
+        function applyCoupon() {
+            const couponCode = document.getElementById('coupon-code').value;
+            const subtotal = parseFloat(document.getElementById('subtotal-text').innerText.replace('Subtotal: $', ''));
+            const message = document.getElementById('coupon-message');
+            if (!couponCode) {
+                message.innerText = "Please select a coupon code.";
+                return;
+            }
+            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 total = subtotal - discount;
+                        document.getElementById('discount-text').innerText = `Discount: $${discount.toFixed(2)}`;
+                        document.getElementById('total-text').innerText = `Total: $${total.toFixed(2)}`;
+                        message.innerText = `Coupon applied! You saved $${discount.toFixed(2)}`;
+                        message.classList.remove('text-danger');
+                        message.classList.add('text-success');
+                    } else {
+                        message.innerText = data.message;
+                    }
+                })
+                .catch(err => {
+                    console.error('Error applying coupon:', err);
+                    message.innerText = 'Error applying coupon.';
+                });
         }
     </script>
 </body>