BiryaniHubflaskcustomable

Sleeping

App Files Files Community

BiryaniHubflaskcustomable / templates /cart.html

Rammohan0504

Update templates/cart.html (#6)

58a9a2e verified about 1 year ago

raw

history blame contribute delete

28.7 kB

	<!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/bootstrap@5.3.0-alpha1/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: 20px auto;
	padding: 15px;
	background-color: #fdf4e3;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	}
	.cart-container2 {
	background-color: #fdf4e3;
	}


	.cart-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border: 1px solid transparent; /* Set the border to transparent */
	padding: 30px 15px 15px;
	background-color: #fff;/* Padding for the content */
	box-sizing: border-box;
	min-height: 100px;
	position: relative; /* Make the cart item a reference for the absolute positioning of the remove icon */
	}

	.remove-btn {
	border: none; /* Remove the border around the button */
	background-color: transparent; /* Transparent background */
	cursor: pointer; /* Change cursor to pointer */
	font-size: 1.2rem; /* Slightly decrease the size of the trash icon */
	margin-bottom: 10px; /* Add space below the delete icon */
	transition: color 0.3s ease; /* Smooth transition for icon color */
	position: relative; /* Make it relative for movement */
	top: -35px; /* Move the button 10px upwards */
	left: 50px; /* Move the button 30px to the right */
	}

	.remove-btn i {
	color: red; /* Make the trash icon red */
	}


	/* Hover effect */
	.remove-btn:hover {
	color: black; /* Change the icon color to black on hover */
	background-color: transparent; /* Keep background transparent on hover */
	}
	/* Prevent background color on focus or click */
	.remove-btn:focus {
	outline: none; /* Remove the outline */
	background-color: transparent; /* Keep background transparent after clicking */
	}
	.text-primary {
	color: #000 !important; /* Ensure the price is black */
	text-align: right; /* Center-align the price */
	font-weight: bold; /* Make the price text bold */
	white-space: nowrap; /* Prevent price text from wrapping */
	}
	/* For the image container */
	.image-wrapper {
	width: 80px; /* Width of the image container */
	height: 80px !important; /* Set the height of the container to match the image */
	display: flex; /* Flex container for the image */
	align-items: center; /* Center image vertically */
	justify-content: center; /* Center image horizontally */
	}

	/* For the image */
	.cart-item img {
	width: 70px; /* Set the width to 70px */
	height: 70px; /* Set the height to 70px */
	object-fit: cover; /* Ensure the image covers the container without stretching */
	border-radius: 5px; /* Optional: rounded corners */
	border: 1px solid #ffcc80; /* Light orange border around images */
	margin: 0; /* Ensure no extra space around the image */
	}


	.cart-item img:hover {
	transform: scale(1.05);
	}
	.cart-item-title {
	font-size: 1.1rem;
	font-weight: bold; /* Make the title text bold */
	}

	.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: 25px;
	padding: 15px;
	background-color: #fff;
	border-radius: 10px;
	}
	.suggestion-items-container {
	display: flex;
	overflow-x: auto; /* Horizontal scrolling */
	gap: 10px; /* Space between items */
	padding-bottom: 10px;
	padding-top: 10px;
	}
	/* Styling for the suggestion item card */
	.suggestion-item {
	display: flex; /* Align items horizontally */
	align-items: center; /* Center image and text vertically */
	justify-content: flex-start; /* Align items to the start (left side) */
	flex-shrink: 0;
	width: 160px; /* Set fixed width for each suggestion item */
	padding: 10px;
	border-radius: 8px; /* Rounded corners */
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
	margin-right: 10px; /* Ensure there's space between the cards */
	position: relative; /* For positioning the + icon */
	text-align: left; /* Align text to the left */
	overflow: visible; /* Allow the button to overflow outside */
	}
	.suggestion-item:hover {
	transform: scale(1.05); /* Slight zoom effect on hover */
	}
	.suggestion-item img {
	width: 50px; /* Set a fixed width for the image */
	height: 50px; /* Set a fixed height for the image */
	object-fit: cover; /* Ensure image fits correctly without distortion */
	border-radius: 5px; /* Rounded corners for the image */
	margin-right: 12px; /* Space between the image and text */
	}
	.suggestion-item div {
	flex-grow: 1; /* Allow the text section to expand and fill available space */
	text-align: left; /* Align text to the left */
	}
	/* Styling for the + symbol button (with green border, white background, and black text) */
	.add-back-button {
	position: absolute;
	top: -5px;
	right: -10px;
	font-size: 1rem; /* Smaller font size */
	padding: 0; /* Remove padding */
	width: 30px; /* Set fixed width */
	height: 30px; /* Set fixed height */
	background-color: #fff;
	color: #0FAA39;
	border: 2px solid #0FAA39;
	border-radius: 0; /* Square shape */
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	z-index: 2; /* Increased z-index to ensure it stays above the borders */
	}
	.add-back-button:hover {
	background-color: #fff; /* Green background on hover */
	color: #0FAA39; /* White color for the + symbol when hovered */
	border-color: #0FAA39; /* Green border on hover */
	z-index: 3; /* Ensure button stays on top 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: #fff; /* Green color for scrollbar thumb */
	border-radius: 4px;
	}
	.suggestion-items-container::-webkit-scrollbar-track {
	background-color: #f1f1f1;
	}

	.cart-item-actions {
	display: flex; /* Use flexbox to align items horizontally */
	align-items: flex-start; /* Align the price at the top of the cart item (like the item name) */
	margin-left: auto; /* This will push the price to the right side of the cart item */
	}

	</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;">×</a>
	</div>

	<h4 class="mb-4 fw-bold">Your Cart</h4>

	<!-- Cart Items -->
	<div class="cart-container2">
	{% 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">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

	<!-- Delete Button with Trash Icon and onclick handler -->
	<button type="button" class="btn btn-light text-dark remove-btn" onclick="removeItemFromCart('{{ item.Name }}')">
	<i class="bi bi-trash"></i>
	</button>

	<div class="text-primary" style="color: #000 !important;">
	$<span class="base-price">{{ item.Price__c }}</span>
	</div>
	</div>
	</div>
	{% else %}
	<!-- Code to handle the case when cart_items is empty -->
	<p>No items in your cart.</p>
	{% endfor %}
	</div>

	<!-- 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-back-button" 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');

	// Initialize selectedCoupon to an empty string by default
	let selectedCoupon = "";

	// Only proceed if couponDropdown exists
	if (couponDropdown) {
	// If the value is not null or undefined, strip the value
	if (couponDropdown.value != null) {
	selectedCoupon = couponDropdown.value.trim(); // safely call .trim() if value is not null
	} else {
	selectedCoupon = ""; // Assign empty string if value is null
	}
	}

	// If no coupon is selected or the value is empty, treat it as no coupon
	if (selectedCoupon === "" \|\| selectedCoupon === "None" \|\| selectedCoupon === "Null") {
	selectedCoupon = null; // Treat it as no coupon selected
	}

	// 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); // Success message
	window.location.href = '/order'; // Redirect to order page
	} else {
	alert(data.error \|\| data.message); // Handle error 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>