Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Order History</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: #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; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="order-history-container"> | |
| <h4 class="mb-4 text-center">Your Order History</h4> | |
| {% if orders %} | |
| {% for order in orders %} | |
| <h5>Order on: {{ order.CreatedDate }}</h5> | |
| {% for line in order.Order_Details__c.split('\n') %} | |
| {% set item_parts = line.split('|') %} | |
| <!-- Extract image URL from the Order_Details string --> | |
| {% set image_url = item_parts[4].strip().split('Image: ')[-1] %} | |
| <div class="order-item"> | |
| <!-- Display Item Image --> | |
| <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 %} | |
| {% else %} | |
| <p class="text-center">No order History Available</p> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <script> | |
| function addToCart(itemName) { | |
| const button = document.getElementById(itemName); // Get the button element by its ID | |
| let itemPrice = button.dataset.price; // Get price from data-price attribute | |
| const itemImage = button.dataset.image; // Get image URL from data-image attribute | |
| const category = button.dataset.category; // Category of the item | |
| const section = button.dataset.section; // Section of the item | |
| // Ensure the price is passed as a string (e.g., "$16.0") | |
| itemPrice = String(itemPrice); // Ensure itemPrice is a string | |
| if (!itemPrice || !itemImage || !itemName || !category || !section) { | |
| alert('Missing required item data.'); | |
| return; | |
| } | |
| // Perform calculations with numeric values | |
| const numericItemPrice = parseFloat(itemPrice.replace('$', '').trim()); // Convert to numeric value | |
| const dataToSend = { | |
| itemName: itemName, | |
| itemPrice: numericItemPrice.toString(), // Send price as string after conversion to numeric | |
| itemImage: itemImage, | |
| addons: [], // Example: No addons for now | |
| instructions: "", // Example: No instructions for now | |
| category: category, | |
| section: section | |
| }; | |
| fetch('/cart/add', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(dataToSend), | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| alert('Item added to cart successfully!'); | |
| } else { | |
| alert('Error: ' + data.error); | |
| } | |
| }) | |
| .catch(error => { | |
| alert('An error occurred: ' + error); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |