Spaces:

DSatishchandra
/

BiryaniHub

Sleeping

App Files Files Community

DSatishchandra commited on about 1 month ago

Commit

22c7e1a

verified ·

1 Parent(s): 9a49712

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +297 -19

templates/cart.html CHANGED Viewed

@@ -1,26 +1,304 @@
 <!DOCTYPE html>
-<html>
 <head>
     <title>Cart</title>
 </head>
 <body>
-    <h1>Biryani Hub - Cart</h1>
-    <form method="POST" action="/place_order">
-        <ul>
-            {% for item in cart %}
-                <li>{{ item.Name }} - ${{ item.Price }} x {{ item.Quantity }}</li>
             {% endfor %}
-        </ul>
-        <p>Total: ${{ total }}</p>
-        {% if error %}
-            <p style="color: red;">{{ error }}</p>
-        {% endif %}
-        {% if success %}
-            <p style="color: green;">{{ success }}</p>
-        {% endif %}
-        <input type="email" name="email" placeholder="Enter your email" required>
-        <button type="submit">Place Order</button>
-    </form>
-    <a href="/menu">Back to Menu</a>
 </body>
-</html>

 <!DOCTYPE html>
+<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/[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;
+        }
+        .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>