BiryaniHubflask37-1

Sleeping

App Files Files Community

BiryaniHubflask37-1 / templates /order_history.html

Rammohan0504

Update templates/order_history.html

b7a7bc5 verified 12 days ago

raw

history blame contribute delete

5.52 kB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Order History</title>  <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: #fdf4e3; /* Light cream background */ color: #333333; /* Dark gray text */ margin: 0; padding: 0; } .order-history-container { max-width: 900px; margin: 40px auto; padding: 20px; background-color: #ffffff; /* White card background */ border-radius: 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border: 1px solid #ffe5b4; /* Light orange border */ } .order-item { display: flex; justify-content: space-between; background-color: #fffcf5; /* Light beige background for items */ border-radius: 8px; padding: 10px; margin-bottom: 10px; border: 1px solid #ffe5b4; /* Light orange border */ } .order-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 5px; } .order-item-details { flex: 1; margin-left: 15px; } .order-item-title { font-size: 1.2rem; font-weight: bold; color: #c04e01; /* Warm orange color for the title */ } .order-item-price { font-size: 1.1rem; font-weight: bold; color: #2b9348; /* Green for the price */ } .reorder-button { padding: 8px 15px; background-color: #ff5722; color: #ffffff; border: none; border-radius: 25px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; } .reorder-button:hover { background-color: #e64a19; } footer { background-color: #333333; color: #ffffff; text-align: center; padding: 15px 10px; margin-top: 20px; } .show-more-btn { background-color: #ff5722; color: #ffffff; padding: 8px 16px; border-radius: 25px; cursor: pointer; } .show-more-btn:hover { background-color: #e64a19; } .nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="order-history-container"> <h4 class="mb-4 text-center">Your Order History</h4> {% if orders %} <div id="order-list"> {% for order in orders[:5] %} <h5>Order on: {{ order.CreatedDate }}</h5> {% for line in order.Order_Details__c.split('\n') %} {% set item_parts = line.split('|') %}  {% set image_url = item_parts[4].strip().split('Image: ')[-1] %} <div class="order-item"> <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}" onerror="this.src='/static/placeholder.jpg';"> <div class="order-item-details"> <div class="order-item-title">{{ item_parts[0].strip() }}</div> <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div> <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div> </div> <button class="reorder-button" onclick="addToCart('{{ item_parts[0].strip() }}')" id="{{ item_parts[0].strip() }}" data-price="{{ item_parts[3].strip().replace('Price:', '') }}" data-image="{{ image_url }}" data-category="Main Course" data-section="Reordered Items"> Reorder </button> </div> {% endfor %} {% endfor %} </div>  <button id="show-more" class="show-more-btn" onclick="toggleOrders()">Show More</button> {% else %} <p class="text-center">No order history available.</p> {% endif %}  <div class="nav-buttons"> <a href="/menu" class="reorder-button">Back to Menu</a> <a href="/cart" class="reorder-button">Go to Cart</a> </div> </div> </div> <script> // Function to toggle showing more orders function toggleOrders() { const orderList = document.getElementById("order-list"); const showMoreBtn = document.getElementById("show-more"); // Show all orders if (orderList.children.length === 5) { // Add more orders dynamically (can be done by modifying backend response, or manually here) {% for order in orders[5:] %} {% for line in order.Order_Details__c.split('\n') %} {% set item_parts = line.split('|') %}  {% set image_url = item_parts[4].strip().split('Image: ')[-1] %} const newOrderItem = document.createElement("div"); newOrderItem.classList.add("order-item"); newOrderItem.innerHTML = ` <img src="{{ image_url }}" alt="{{ item_parts[0].strip() }}" onerror="this.src='/static/placeholder.jpg';"> <div class="order-item-details"> <div class="order-item-title">{{ item_parts[0].strip() }}</div> <div><small class="text-muted">Quantity: {{ item_parts[1].strip() }}</small></div> <div><small class="text-muted">Add-Ons: {{ item_parts[2].strip() }}</small></div> </div> <button class="reorder-button" onclick="addToCart('{{ item_parts[0].strip() }}')" id="{{ item_parts[0].strip() }}" data-price="{{ item_parts[3].strip().replace('Price:', '') }}" data-image="{{ image_url }}" data-category="Main Course" data-section="Reordered Items"> Reorder </button> `; orderList.appendChild(newOrderItem); {% endfor %} {% endfor %} showMoreBtn.innerText = "Show Less"; // Change button text to "Show Less" } else { // Show only 5 orders initially const allOrderItems = orderList.children; while (allOrderItems.length > 5) { orderList.removeChild(allOrderItems[5]); // Remove extra orders } showMoreBtn.innerText = "Show More"; // Change button text back to "Show More" } } </script> </body> </html>

To meet your requirements of removing images, reorder buttons, and navigating to the cart while displaying order details in a structured way, I've modified the structure accordingly. Here's an updated approa