BiryaniHubflask37-1

Running

App Files Files Community

BiryaniHubflask37-1 / templates /cart.html

DSatishchandra

Update templates/cart.html

22c7e1a verified 3 months ago

raw

history blame

11 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/[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>