BiryaniHubflask17

Sleeping

App Files Files Community

Rammohan0504 commited on Jan 27

Commit

14c04be

verified ·

1 Parent(s): a350be0

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +114 -166

templates/cart.html CHANGED Viewed

@@ -3,8 +3,7 @@
 <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 {
@@ -12,7 +11,7 @@
             background-color: #f8f9fa;
         }
         .cart-container {
-            max-width: 768px;
             margin: 20px auto;
             padding: 15px;
             background-color: #fff;
@@ -21,8 +20,8 @@
         }
         .cart-item {
             display: flex;
-            align-items: center;
             justify-content: space-between;
             border-bottom: 1px solid #dee2e6;
             padding: 10px 0;
         }
@@ -37,13 +36,12 @@
             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;
@@ -66,224 +64,174 @@
             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 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;
-            background-color: #f8f9fa;
-            border-radius: 10px;
-        }
-        .suggestion-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 10px 0;
-        }
-        .suggestion-item img {
-            width: 50px;
-            height: 50px;
-            object-fit: cover;
-            border-radius: 5px;
-        }
-        .add-back-button {
-            padding: 5px 15px;
-            font-size: 0.9rem;
-            border-radius: 20px;
-            border: 1px solid #007bff;
-            color: #007bff;
-            background-color: #fff;
-            cursor: pointer;
-        }
-        .add-back-button:hover {
-            background-color: #007bff;
-            color: #fff;
         }
     </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 %}
-            <!-- Apply Coupon Section -->
-            <div class="apply-coupon">
-                <label for="coupon-code">Coupon Code:</label>
-                <input type="text" id="coupon-code" name="coupon_code" placeholder="Coupon code will appear here" readonly>
-                <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>
-                <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
             </div>
-        </div>
-        <!-- 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';">
-                <div>
-                    <div>{{ suggestion.Name }}</div>
-                    <div class="text-muted">${{ suggestion.Price__c }}</div>
-                </div>
-                <button class="add-back-button" onclick="addSuggestion('{{ suggestion.Id }}')">Add</button>
-            </div>
-            {% endfor %}
         </div>
     </div>
     <script>
-        // Fetch coupon code automatically when the page loads
         document.addEventListener("DOMContentLoaded", function() {
-            const customerEmail = "{{ customer_email }}"; // The email stored in the session
-            if (customerEmail) {
-                fetch(`/get_coupon_code?email=${customerEmail}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data.success && data.coupon_code) {
-                            document.getElementById('coupon-code').value = data.coupon_code; // Set coupon code in the input
-                        } else {
-                            document.getElementById('coupon-message').innerText = "No coupon found for your account.";
-                            document.getElementById('coupon-message').style.color = "red";
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error fetching coupon code:', 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 })
-                })
                 .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';
                     } 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 enter 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 Cart</title>
     <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: 800px;
             margin: 20px auto;
             padding: 15px;
             background-color: #fff;
         }
         .cart-item {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             border-bottom: 1px solid #dee2e6;
             padding: 10px 0;
         }
             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;
             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>
 </html>