Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <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 { | |
| 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; | |
| } | |
| .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"> | |
| <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-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">${{ item.Price__c }}</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">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> | |
| function updateQuantity(action, itemName, price, customerEmail) { | |
| const inputField = document.querySelector(`input[data-item-name="${itemName}"]`); | |
| const subtotalField = document.querySelector('.cart-summary p'); | |
| let currentQuantity = parseInt(inputField.value); | |
| // Adjust quantity based on the action | |
| if (action === 'increase') { | |
| currentQuantity += 1; | |
| } else if (action === 'decrease' && currentQuantity > 1) { | |
| currentQuantity -= 1; | |
| }else{ | |
| alert("Quantity cannot be less than 1!"); | |
| return; | |
| } | |
| // Update the input field value locally | |
| inputField.value = currentQuantity; | |
| // Debugging: Log API request payload | |
| console.log("Updating Quantity:", { | |
| email: customerEmail, | |
| item_name: itemName, | |
| action: action, | |
| price:price, | |
| quantity: currentQuantity | |
| }); | |
| // Calculate new subtotal | |
| let newSubtotal = calculateSubtotal(); // Correctly declare the newSubtotal variable | |
| subtotalField.innerText = `Subtotal: $${newSubtotal.toFixed(2)}`; | |
| // Correctly append the itemId to the URL | |
| // Make the server request to update the quantity | |
| // Make API call to update the quantity on the backend | |
| fetch(`/cart/update_quantity`, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ email: customerEmail, | |
| item_name: itemName, action: action, quantity:currentQuantity }) //send the current quantity | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (!data.success) { | |
| alert(data.error || "Failed to update quantity."); | |
| } else { | |
| console.log(`Quantity updated for ${itemName}: ${currentQuantity}`); | |
| } | |
| }) | |
| .catch(err => console.error("Error updating quantity:", err)); | |
| } | |
| function calculateSubtotal() { | |
| let subtotal = 0; | |
| document.querySelectorAll('.cart-item').forEach(item => { | |
| const quantity = parseInt(item.querySelector('input').value); | |
| const price = parseFloat(item.querySelector('.text-primary').innerText.replace('$', '')); | |
| subtotal += quantity * price; | |
| }); | |
| return subtotal; | |
| } | |
| function proceedToOrder() { | |
| fetch('/checkout', { | |
| method: 'POST', | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| alert(data.message); | |
| window.location.href = '/menu'; // Redirect to menu or order confirmation page | |
| } else { | |
| alert(data.error || data.message); | |
| } | |
| }) | |
| .catch(err => console.error('Error during checkout:', 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 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 addToCart(itemName, customerEmail) { | |
| fetch(`/cart/add_item`, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ | |
| email: customerEmail, | |
| item_name: itemName.trim(), //Ensure the item name is trimmed | |
| quantity: 0 // DEFAULT QUANTITY PASSED HERE | |
| }) | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| alert("Item added/updated successfully."); | |
| location.reload(); // Reload the page to update the cart | |
| } else { | |
| alert(data.error || "Failed to add item to cart."); | |
| } | |
| }) | |
| .catch(err => console.error("Error adding item to cart:", err)); | |
| } | |
| </script> | |
| </body> | |
| </html> |