BiryaniHubflask17

Sleeping

App Files Files Community

Rammohan0504 commited on Jan 28

Commit

be0332d

verified ·

1 Parent(s): 4855889

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +155 -89

templates/cart.html CHANGED Viewed

@@ -9,7 +9,7 @@
         body {
             font-family: Arial, sans-serif;
             background-color: #f8f9fa;
-        }
         .cart-container {
             max-width: 800px;
             margin: 20px auto;
@@ -24,7 +24,6 @@
             align-items: center;
             border-bottom: 1px solid #dee2e6;
             padding: 10px 0;
-            position: relative; /* Allow absolute positioning of the close button */
         }
         .cart-item img {
             width: 70px;
@@ -106,22 +105,6 @@
             color: red;
             margin-top: 10px;
         }
-        /* Close button styling */
-        .close-btn {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            font-size: 1.5rem;
-            color: #dc3545;
-            cursor: pointer;
-            transition: color 0.2s ease;
-        }
-        .close-btn:hover {
-            color: #a71d2a;
-        }
     </style>
 </head>
 <body>
@@ -131,12 +114,11 @@
             <!-- Cart Items -->
             {% for item in cart_items %}
-            <div class="cart-item" id="item-{{ item.Name }}">
-                <span class="close-btn" onclick="removeItem('{{ item.Name }}')">×</span> <!-- Close symbol -->
                 <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">
@@ -152,6 +134,7 @@
                     <div class="text-primary">
                         $<span class="item-price">{{ item.Price__c }}</span>
                     </div>
                 </div>
             </div>
             {% endfor %}
@@ -175,101 +158,184 @@
               <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>
-        // Remove item from cart
-        function removeItem(itemName) {
-            fetch(`/remove_item/${itemName}`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({ item_name: itemName })
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.success) {
-                    alert(data.message);
-                    location.reload(); // Reload the page to update the cart
-                } else {
-                    alert(data.message);
-                }
-            })
-            .catch(err => console.error('Error removing item:', err));
         }
         // Update item quantity
-        function updateQuantity(action, itemName) {
-            let quantityInput = document.querySelector(`#item-${itemName} input`);
             let quantity = parseInt(quantityInput.value);
             if (action === 'increase') {
                 quantity++;
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
-            if (quantity < 1) {
-                quantity = 1;
             }
-            quantityInput.value = quantity;
-            // You can make an API call here to update the cart in your backend (e.g., Salesforce)
-        }
-        // 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 order summary page
                 } else {
-                    alert(data.error || data.message);
                 }
             })
-            .catch(err => console.error('Error during checkout:', err));
         }
-    </script>
 </body>
-</html>

         body {
             font-family: Arial, sans-serif;
             background-color: #f8f9fa;
+          }
         .cart-container {
             max-width: 800px;
             margin: 20px auto;
             align-items: center;
             border-bottom: 1px solid #dee2e6;
             padding: 10px 0;
         }
         .cart-item img {
             width: 70px;
             color: red;
             margin-top: 10px;
         }
     </style>
 </head>
 <body>
             <!-- 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">
                     <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 %}
               <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);
+                });
         }
+    });
         // Update item quantity
+        function updateQuantity(action, itemName, customerEmail) {
+            let quantityInput = document.querySelector(input[data-item-name="${itemName}"]);
             let quantity = parseInt(quantityInput.value);
+            // Update quantity based on action
             if (action === 'increase') {
                 quantity++;
             } else if (action === 'decrease' && quantity > 1) {
                 quantity--;
             }
+            // Validate quantity
+            if (isNaN(quantity) || quantity < 1) {
+                alert("Invalid quantity!");
+                return;
             }
+            // Send updated quantity to the server
+            fetch('/cart/update_quantity', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    // Update the item price and quantity in the UI
+                    quantityInput.value = quantity;
+                    let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
+                    if (itemElement) {
+                        let basePriceElement = itemElement.querySelector(".base-price");
+                        let addonsPriceElement = itemElement.querySelector(".addons-price");
+                        // Update the base price
+                        if (basePriceElement) {
+                            basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
+                        }
+                        // Update add-ons price if needed (optional)
+                        if (addonsPriceElement && data.addons_price !== undefined) {
+                            addonsPriceElement.innerText = data.addons_price.toFixed(2);
+                        }
                     } else {
+                        console.error(Parent cart item element not found for item: ${itemName});
                     }
+                    location.reload();
+                    // Recalculate subtotal dynamically
+                } else {
+                    alert("Error updating quantity: " + data.error);
+                }
+            })
+            .catch(err => console.error("Error:", err));
+        }
+        // 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 removeItemFromCart(itemName) {
+            fetch(/cart/remove/${encodeURIComponent(itemName)}, {
                 method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     alert(data.message);
+                    location.reload(); // Reload the page to update the cart
+                } else {
+                    alert(data.message);
+                }
+            })
+            .catch(err => console.error('Error removing item:', err));
+        }
+      function addSuggestion(itemId) {
+            fetch(/cart/add_suggestion/${itemId}, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({})
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Item added to cart!');
+                    location.reload();
                 } else {
+                    alert(data.error);
                 }
             })
+            .catch(err => console.error('Error adding suggestion:', 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));
+    }
+</script>
 </body>
+</html>