nagasurendra's picture
Update templates/cart.html
4da08cb verified
<!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: #f3f4f6;
color: #333;
}
.cart-container {
max-width: 768px;
margin: 30px auto;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
.cart-container:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.cart-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
border: 1px solid black; /* Border around all four sides of the cart item */
padding: 15px; /* Padding inside the border */
box-sizing: border-box; /* Ensure the border is included in the total width/height */
min-height: 100px; /* Ensure the cart item div has enough height for content */
}
.image-wrapper {
width: 80px; /* Width of the image container */
height: 140px !important; /* Height of the image container */
display: flex; /* Flex container for image */
align-items: flex-start; /* Align the image at the top */
justify-content: center; /* Center image horizontally if it has space */
}
.cart-item img {
width: 100%; /* Fill the image container */
height: auto !important; /* Maintain aspect ratio */
object-fit: contain; /* Ensure the full image is visible */
border-radius: 8px; /* Optional: rounded corners */
transition: transform 0.3s;
}
.cart-item img:hover {
transform: scale(1.05);
}
.cart-item-title {
font-size: 1.1rem;
font-weight: 600;
}
.cart-item-actions .text-primary {
color: #000 !important; /* Changed from blue to black */
}
.checkout-button {
background-color: #0FAA39; /* Green background */
color: #fff; /* White text */
padding: 12px;
border-radius: 8px;
border: none;
width: 100%;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.checkout-button:hover {
background-color: #0FAA39; /* Keep the background green on hover */
color: #fff; /* Keep the text white on hover */
}
.add-back-button {
padding: 6px 20px;
font-size: 0.9rem;
border-radius: 20px;
border: 1px solid #fff;
background-color: #fff;
color: #0FAA39;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.add-back-button:hover {
background-color: #fff;
color: #0FAA39;
}
.cart-item-details {
flex: 1;
margin-left: 15px;
}
.cart-item-quantity {
display: flex;
align-items: center;
margin-top: 5px;
}
.cart-item-quantity button {
width: 24px;
height: 24px;
border: none;
background-color: #f0f0f0;
font-size: 0.8rem;
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;
}
/* Make the parent container position relative */
.cart-summary {
position: relative; /* Make sure dropdown is positioned relative to this container */
text-align: left;
margin-top: 15px;
padding: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}
/* Coupon Section styling */
.coupon-selection {
display: flex; /* Use flexbox to align items */
justify-content: space-between; /* Space between the label and the link */
align-items: center;
font-size: 1rem;
margin-bottom: 20px; /* Add space below Apply Coupon section */
position: relative; /* Ensure dropdown is within this container */
}
/* Ensure the Apply Coupon label and link are aligned correctly */
.coupon-selection label {
font-weight: bold;
color: black;
}
.coupon-selection a {
color: #007bff; /* Blue for the link */
font-size: 1rem;
text-decoration: none;
text-align: right;
}
/* Coupon Dropdown styling */
#couponDropdown {
width: 30%; /* Set dropdown to 30% of the width */
display: none; /* Hidden by default */
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
z-index: 10; /* Ensure it's above other content */
margin-top: 10px; /* Add space from the link */
margin-left: auto; /* Push it to the right side */
margin-right: 0; /* Ensure it doesn't overflow outside */
}
/* Show the dropdown when it's active */
#couponDropdown.show {
display: block;
}
/* Ensure Apply Coupon section aligns correctly */
.coupon-selection {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1rem;
margin-bottom: 20px; /* Add space below Apply Coupon section */
}
/* Apply Coupon link and label styles */
.coupon-selection label {
font-weight: bold;
color: black;
}
.coupon-selection a {
color: #007bff; /* Blue for the link */
font-size: 1rem;
text-decoration: none;
text-align: right;
}
/* Bill details grid structure */
.bill-details {
display: grid;
grid-template-columns: 1fr 1fr; /* Two-column layout */
grid-gap: 10px;
margin-bottom: 10px;
}
/* Adjust label and amount for bill details */
.bill-details .label {
font-weight: 600;
font-size: 1rem;
}
.bill-details .amount {
text-align: right;
font-weight: 600;
font-size: 1rem;
}
/* Divider line between bill sections */
.dotted-line {
border-bottom: 2px dotted #ccc;
margin: 15px 0;
}
/* Total bill grid layout */
.total-bill {
display: grid;
grid-template-columns: 1fr 1fr;
font-weight: 600;
font-size: 1.2rem;
margin-top: 10px;
margin-bottom: 10px; /* Add 10px space between To Pay and Submit Button */
}
.total-bill .label {
font-size: 1.1rem;
}
.total-bill .amount {
text-align: right;
font-size: 1.1rem;
color: #000; /* Changed from green to black */
}
/* Margin to add space for dropdown when visible */
.cart-summary.has-dropdown {
margin-bottom: 80px; /* Create space below the content when dropdown is visible */
}
.checkout-button {
background-color: #0FAA39;
color: #fff;
padding: 12px;
border-radius: 8px;
border: none;
height: 44px;
width: 100%;
font-size: 1.2rem;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.suggestion-section {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 10px;
}
.suggestion-items-container {
display: flex;
overflow-x: auto; /* Horizontal scrolling */
gap: 15px; /* Space between items */
padding-bottom: 10px;
margin-left: 5px;
padding-top: 5px;
}
.suggestion-item {
display: flex;
flex-direction: column; /* Stack content vertically */
align-items: center; /* Center content horizontally */
justify-content: center;
flex-shrink: 0;
width: 150px; /* Set fixed width for each suggestion item */
padding: 10px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
margin-right: 15px; /* Ensure there's space between the cards */
text-align: center; /* Center content */
position: relative; /* Make sure button is placed correctly */
}
.suggestion-item:hover {
transform: scale(1.05); /* Add zoom effect on hover */
}
.suggestion-item img {
width: 100%; /* Make the image fill the width of the card */
height: 120px; /* Fixed height for image */
object-fit: cover; /* Ensure image fits correctly without distortion */
border-radius: 5px;
margin-bottom: 10px; /* Space below the image */
}
.suggestion-item div {
flex-grow: 1;
margin-bottom: 10px; /* Space below the text */
}
/* Styling for the + symbol button (with no borders) */
.add-icon {
position: absolute;
top: 10px; /* Position at the top of the card */
right: 10px; /* Position at the top-right */
font-size: 1.5rem; /* Increase size of the + symbol */
padding: 8px 12px; /* Button padding */
background-color: #fff; /* White background */
color: #0FAA39; /* Green color for the + symbol */
border: none; /* No border */
border-radius: 50%; /* Circular button */
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
z-index: 1; /* Ensure the button is above content */
}
.add-icon:hover {
background-color: #fff; /* Green background on hover */
color: #0FAA39; /* White color for the + symbol when hovered */
}
/* Ensure the scroll container works fine */
.suggestion-items-container::-webkit-scrollbar {
height: 8px; /* Height of the scrollbar */
}
.suggestion-items-container::-webkit-scrollbar-thumb {
background-color: #0FAA39; /* Green color for scrollbar thumb */
border-radius: 4px;
}
.suggestion-items-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
.remove-icon {
border: none;
background: none;
color: red;
font-size: 1.2rem;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="cart-container">
<div style="text-align: right;">
<a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
</div>
<h4 class="mb-4 fw-bold">Your Cart</h4>
<!-- Cart Items -->
{% for item in cart_items %}
<div class="cart-item">
<div class="image-wrapper">
<img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
</div>
<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">
<small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
</div>
<div class="cart-item-quantity mt-2">
<button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
<input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
<button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
</div>
</div>
<div class="cart-item-actions">
<div>
<button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">🗑️</button>
</div>
<div class="text-primary" style="color: #000 !important;"> <!-- Inline style to ensure it's black -->
$<span class="base-price">{{ item.Price__c }}</span>
</div>
</div>
</div>
{% else %}
<p class="text-center">Your cart is empty.</p>
{% endfor %}
<!-- Suggestions Section -->
{% if suggestions %}
<div class="suggestion-section">
<h5>Complete Your Meal</h5>
<div class="suggestion-items-container">
{% 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>
<!-- Replace add button with a cart icon -->
<button class="add-icon" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">+</button>
</div>
{% endfor %}
</div>
</div>
{% endif %}
<!-- Subtotal -->
<div class="cart-summary">
<!-- Coupon Section -->
{% if coupons %}
<div class="coupon-selection d-flex justify-content-between align-items-center">
<label class="text-dark font-weight-bold mb-0">Apply Coupon</label>
<a href="javascript:void(0);" id="applyCouponLink" onclick="toggleCouponDropdown()" class="text-primary">+ Apply Coupon</a>
</div>
<!-- Coupon Dropdown, positioned below Apply Coupon -->
<select id="couponDropdown" class="form-select mt-2" style="display:none;" onchange="calculateDiscount()">
<option value="">Select a coupon</option>
{% for coupon in coupons %}
<option value="{{ coupon }}">{{ coupon }}</option>
{% endfor %}
</select>
{% endif %}
<div class="bill-details">
<div class="label">Cart Total</div>
<div class="amount">${{ subtotal }}</div>
<div class="label">Discount</div>
<div class="amount" id="discountText">-${{ discount }}</div>
</div>
<div class="dotted-line"></div>
<div class="total-bill">
<div class="label">To Pay</div>
<div class="amount" id="totalBillText">${{ subtotal }}</div>
</div>
<button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
</div>
</div>
</div>
<script>
// Example function to handle the increase/decrease button clicks
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));
}
function toggleCouponDropdown() {
let couponDropdown = document.getElementById('couponDropdown');
// Toggle the visibility of the coupon dropdown
if (couponDropdown.style.display === "none" || couponDropdown.style.display === "") {
couponDropdown.style.display = "block";
} else {
couponDropdown.style.display = "none";
}
}
function calculateDiscount() {
let couponDropdown = document.getElementById('couponDropdown'); // Get coupon dropdown
let selectedCoupon = couponDropdown.value.trim(); // Get the selected coupon value
let subtotal = parseFloat("{{ subtotal }}"); // Get the subtotal (from the backend)
// If a valid coupon is selected
if (selectedCoupon && selectedCoupon.toLowerCase() !== "none") {
// Apply 10% discount
let discount = subtotal * 0.10;
let total = subtotal - discount;
// Update UI with discount and total bill
document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
} else {
// If no coupon is selected or "None" is selected, reset the discount
document.getElementById("discountText").innerText = `$0.00`;
document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
}
}
function proceedToOrder() {
let couponDropdown = document.getElementById('couponDropdown');
let selectedCoupon = couponDropdown.value.trim(); // Get selected coupon from the dropdown
// If no coupon is selected, alert the user
if (selectedCoupon === "None" || selectedCoupon === "Null") {
alert("Please select a valid coupon before proceeding.");
return;
}
// Send the selected coupon to the backend for processing
fetch('/checkout', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ selectedCoupon: selectedCoupon })
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert(data.message);
window.location.href = '/order'; // Redirect to order page
} else {
alert(data.error || data.message);
}
})
.catch(err => console.error('Error during checkout:', err));
}
function calculateSubtotal() {
let subtotal = 0;
document.querySelectorAll('.cart-item').forEach(item => {
const quantity = parseInt(item.querySelector('input').value);
const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
});
// Update the subtotal in the HTML
document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
return subtotal;
}
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));
}
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 addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
const customerEmail = "{{ customer_email }}"; // Get customer email from session
// Create the data object to send to the ser ver
const data = {
item_name: itemName,
item_price: itemPrice,
item_image: itemImage,
item_id: itemId,
addons: [], // Default to empty, you can adjust if needed
instructions: "", // Default to empty, you can adjust if needed
customer_email: customerEmail
};
// Send the data to the backend via a POST request
fetch('/cart/add_suggestion_to_cart', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Item added to cart!');
location.reload(); // Reload to update the cart view
} else {
alert('Error adding item to cart: ' + data.error);
}
})
.catch(err => console.error('Error adding item:', err));
}
</script>
</body>
</html>