Update templates/cart.html
Browse files- templates/cart.html +28 -50
templates/cart.html
CHANGED
|
@@ -119,35 +119,34 @@
|
|
| 119 |
|
| 120 |
<h4 class="mb-4">Your Cart</h4>
|
| 121 |
|
| 122 |
-
|
| 123 |
-
{% for item in cart_items %}
|
| 124 |
-
<div class="cart-item">
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
</div>
|
| 150 |
-
{% endfor %}
|
| 151 |
{% else %}
|
| 152 |
<p class="text-center">Your cart is empty.</p>
|
| 153 |
{% endfor %}
|
|
@@ -204,13 +203,11 @@
|
|
| 204 |
} else if (action === 'decrease' && quantity > 1) {
|
| 205 |
quantity--;
|
| 206 |
}
|
| 207 |
-
|
| 208 |
// Validate quantity
|
| 209 |
if (isNaN(quantity) || quantity < 1) {
|
| 210 |
alert("Invalid quantity!");
|
| 211 |
return;
|
| 212 |
}
|
| 213 |
-
|
| 214 |
// Send updated quantity to the server
|
| 215 |
fetch('/cart/update_quantity', {
|
| 216 |
method: 'POST',
|
|
@@ -226,12 +223,10 @@
|
|
| 226 |
if (itemElement) {
|
| 227 |
let basePriceElement = itemElement.querySelector(".base-price");
|
| 228 |
let addonsPriceElement = itemElement.querySelector(".addons-price");
|
| 229 |
-
|
| 230 |
// Update the base price
|
| 231 |
if (basePriceElement) {
|
| 232 |
basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
|
| 233 |
}
|
| 234 |
-
|
| 235 |
// Update add-ons price if needed (optional)
|
| 236 |
if (addonsPriceElement && data.addons_price !== undefined) {
|
| 237 |
addonsPriceElement.innerText = data.addons_price.toFixed(2);
|
|
@@ -240,7 +235,6 @@
|
|
| 240 |
console.error(`Parent cart item element not found for item: ${itemName}`);
|
| 241 |
}
|
| 242 |
location.reload();
|
| 243 |
-
|
| 244 |
// Recalculate subtotal dynamically
|
| 245 |
|
| 246 |
} else {
|
|
@@ -252,22 +246,18 @@
|
|
| 252 |
function toggleCouponDropdown() {
|
| 253 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 254 |
let couponDropdown = document.getElementById('couponDropdown');
|
| 255 |
-
|
| 256 |
// Enable or disable the dropdown based on checkbox status
|
| 257 |
couponDropdown.disabled = !couponCheckbox.checked;
|
| 258 |
-
|
| 259 |
// If unchecked, reset discount and total
|
| 260 |
if (!couponCheckbox.checked) {
|
| 261 |
document.getElementById("discountText").innerText = `Discount: $0`;
|
| 262 |
document.getElementById("totalBillText").innerText = `Total Bill: ${{ subtotal }}`;
|
| 263 |
}
|
| 264 |
}
|
| 265 |
-
|
| 266 |
function calculateDiscount() {
|
| 267 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 268 |
let couponDropdown = document.getElementById('couponDropdown');
|
| 269 |
let subtotal = parseFloat("{{ subtotal }}");
|
| 270 |
-
|
| 271 |
// If checkbox is selected
|
| 272 |
if (couponCheckbox.checked) {
|
| 273 |
let selectedCoupon = couponDropdown.value.trim();
|
|
@@ -277,29 +267,23 @@
|
|
| 277 |
document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
|
| 278 |
return;
|
| 279 |
}
|
| 280 |
-
|
| 281 |
|
| 282 |
-
|
| 283 |
// Apply 10% discount
|
| 284 |
let discount = subtotal * 0.10;
|
| 285 |
let total = subtotal - discount;
|
| 286 |
-
|
| 287 |
// Update UI
|
| 288 |
document.getElementById("discountText").innerText = `Discount: $${discount.toFixed(2)}`;
|
| 289 |
document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;
|
| 290 |
-
|
| 291 |
} else {
|
| 292 |
// If checkbox is not selected, reset discount
|
| 293 |
document.getElementById("discountText").innerText = `Discount: $0`;
|
| 294 |
document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
|
| 295 |
}
|
| 296 |
}
|
| 297 |
-
|
| 298 |
function proceedToOrder() {
|
| 299 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 300 |
let couponDropdown = document.getElementById('couponDropdown');
|
| 301 |
let selectedCoupon = ""; // Default to empty coupon
|
| 302 |
-
|
| 303 |
if (couponCheckbox && couponCheckbox.checked) {
|
| 304 |
if (couponDropdown) {
|
| 305 |
selectedCoupon = couponDropdown.value.trim();
|
|
@@ -330,7 +314,6 @@
|
|
| 330 |
})
|
| 331 |
.catch(err => console.error('Error during checkout:', err));
|
| 332 |
}
|
| 333 |
-
|
| 334 |
function calculateSubtotal() {
|
| 335 |
let subtotal = 0;
|
| 336 |
document.querySelectorAll('.cart-item').forEach(item => {
|
|
@@ -339,7 +322,6 @@
|
|
| 339 |
const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
|
| 340 |
subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
|
| 341 |
});
|
| 342 |
-
|
| 343 |
// Update the subtotal in the HTML
|
| 344 |
document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
|
| 345 |
return subtotal;
|
|
@@ -419,7 +401,6 @@
|
|
| 419 |
}
|
| 420 |
function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
|
| 421 |
const customerEmail = "{{ customer_email }}"; // Get customer email from session
|
| 422 |
-
|
| 423 |
// Create the data object to send to the server
|
| 424 |
const data = {
|
| 425 |
item_name: itemName,
|
|
@@ -430,7 +411,6 @@
|
|
| 430 |
instructions: "", // Default to empty, you can adjust if needed
|
| 431 |
customer_email: customerEmail
|
| 432 |
};
|
| 433 |
-
|
| 434 |
// Send the data to the backend via a POST request
|
| 435 |
fetch('/cart/add_suggestion_to_cart', {
|
| 436 |
method: 'POST',
|
|
@@ -450,8 +430,6 @@
|
|
| 450 |
})
|
| 451 |
.catch(err => console.error('Error adding item:', err));
|
| 452 |
}
|
| 453 |
-
|
| 454 |
-
|
| 455 |
|
| 456 |
|
| 457 |
</script>
|
|
|
|
| 119 |
|
| 120 |
<h4 class="mb-4">Your Cart</h4>
|
| 121 |
|
| 122 |
+
<!-- Cart Items -->
|
| 123 |
+
{% for item in cart_items %}
|
| 124 |
+
<div class="cart-item">
|
| 125 |
+
<img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
|
| 126 |
+
<div class="cart-item-details">
|
| 127 |
+
<div class="cart-item-title">{{ item.Name }}</div>
|
| 128 |
+
<div class="cart-item-addons">
|
| 129 |
+
<small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
|
| 130 |
+
</div>
|
| 131 |
+
<div class="cart-item-instructions">
|
| 132 |
+
<small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
|
| 133 |
+
</div>
|
| 134 |
+
<div class="cart-item-quantity mt-2">
|
| 135 |
+
<!-- Decrease button -->
|
| 136 |
+
<button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
|
| 137 |
+
<!-- Quantity input field -->
|
| 138 |
+
<input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
|
| 139 |
+
<!-- Increase button -->
|
| 140 |
+
<button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
<div class="cart-item-actions">
|
| 144 |
+
<div class="text-primary">
|
| 145 |
+
$<span class="base-price">{{ item.Price__c }}</span>
|
| 146 |
+
</div>
|
| 147 |
+
<button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
|
| 148 |
+
</div>
|
| 149 |
+
</div>
|
|
|
|
| 150 |
{% else %}
|
| 151 |
<p class="text-center">Your cart is empty.</p>
|
| 152 |
{% endfor %}
|
|
|
|
| 203 |
} else if (action === 'decrease' && quantity > 1) {
|
| 204 |
quantity--;
|
| 205 |
}
|
|
|
|
| 206 |
// Validate quantity
|
| 207 |
if (isNaN(quantity) || quantity < 1) {
|
| 208 |
alert("Invalid quantity!");
|
| 209 |
return;
|
| 210 |
}
|
|
|
|
| 211 |
// Send updated quantity to the server
|
| 212 |
fetch('/cart/update_quantity', {
|
| 213 |
method: 'POST',
|
|
|
|
| 223 |
if (itemElement) {
|
| 224 |
let basePriceElement = itemElement.querySelector(".base-price");
|
| 225 |
let addonsPriceElement = itemElement.querySelector(".addons-price");
|
|
|
|
| 226 |
// Update the base price
|
| 227 |
if (basePriceElement) {
|
| 228 |
basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
|
| 229 |
}
|
|
|
|
| 230 |
// Update add-ons price if needed (optional)
|
| 231 |
if (addonsPriceElement && data.addons_price !== undefined) {
|
| 232 |
addonsPriceElement.innerText = data.addons_price.toFixed(2);
|
|
|
|
| 235 |
console.error(`Parent cart item element not found for item: ${itemName}`);
|
| 236 |
}
|
| 237 |
location.reload();
|
|
|
|
| 238 |
// Recalculate subtotal dynamically
|
| 239 |
|
| 240 |
} else {
|
|
|
|
| 246 |
function toggleCouponDropdown() {
|
| 247 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 248 |
let couponDropdown = document.getElementById('couponDropdown');
|
|
|
|
| 249 |
// Enable or disable the dropdown based on checkbox status
|
| 250 |
couponDropdown.disabled = !couponCheckbox.checked;
|
|
|
|
| 251 |
// If unchecked, reset discount and total
|
| 252 |
if (!couponCheckbox.checked) {
|
| 253 |
document.getElementById("discountText").innerText = `Discount: $0`;
|
| 254 |
document.getElementById("totalBillText").innerText = `Total Bill: ${{ subtotal }}`;
|
| 255 |
}
|
| 256 |
}
|
|
|
|
| 257 |
function calculateDiscount() {
|
| 258 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 259 |
let couponDropdown = document.getElementById('couponDropdown');
|
| 260 |
let subtotal = parseFloat("{{ subtotal }}");
|
|
|
|
| 261 |
// If checkbox is selected
|
| 262 |
if (couponCheckbox.checked) {
|
| 263 |
let selectedCoupon = couponDropdown.value.trim();
|
|
|
|
| 267 |
document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
|
| 268 |
return;
|
| 269 |
}
|
|
|
|
| 270 |
|
|
|
|
| 271 |
// Apply 10% discount
|
| 272 |
let discount = subtotal * 0.10;
|
| 273 |
let total = subtotal - discount;
|
|
|
|
| 274 |
// Update UI
|
| 275 |
document.getElementById("discountText").innerText = `Discount: $${discount.toFixed(2)}`;
|
| 276 |
document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;
|
|
|
|
| 277 |
} else {
|
| 278 |
// If checkbox is not selected, reset discount
|
| 279 |
document.getElementById("discountText").innerText = `Discount: $0`;
|
| 280 |
document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
|
| 281 |
}
|
| 282 |
}
|
|
|
|
| 283 |
function proceedToOrder() {
|
| 284 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 285 |
let couponDropdown = document.getElementById('couponDropdown');
|
| 286 |
let selectedCoupon = ""; // Default to empty coupon
|
|
|
|
| 287 |
if (couponCheckbox && couponCheckbox.checked) {
|
| 288 |
if (couponDropdown) {
|
| 289 |
selectedCoupon = couponDropdown.value.trim();
|
|
|
|
| 314 |
})
|
| 315 |
.catch(err => console.error('Error during checkout:', err));
|
| 316 |
}
|
|
|
|
| 317 |
function calculateSubtotal() {
|
| 318 |
let subtotal = 0;
|
| 319 |
document.querySelectorAll('.cart-item').forEach(item => {
|
|
|
|
| 322 |
const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
|
| 323 |
subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
|
| 324 |
});
|
|
|
|
| 325 |
// Update the subtotal in the HTML
|
| 326 |
document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
|
| 327 |
return subtotal;
|
|
|
|
| 401 |
}
|
| 402 |
function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
|
| 403 |
const customerEmail = "{{ customer_email }}"; // Get customer email from session
|
|
|
|
| 404 |
// Create the data object to send to the server
|
| 405 |
const data = {
|
| 406 |
item_name: itemName,
|
|
|
|
| 411 |
instructions: "", // Default to empty, you can adjust if needed
|
| 412 |
customer_email: customerEmail
|
| 413 |
};
|
|
|
|
| 414 |
// Send the data to the backend via a POST request
|
| 415 |
fetch('/cart/add_suggestion_to_cart', {
|
| 416 |
method: 'POST',
|
|
|
|
| 430 |
})
|
| 431 |
.catch(err => console.error('Error adding item:', err));
|
| 432 |
}
|
|
|
|
|
|
|
| 433 |
|
| 434 |
|
| 435 |
</script>
|