Spaces:
Sleeping
Sleeping
Update templates/cart.html
Browse files- templates/cart.html +60 -44
templates/cart.html
CHANGED
|
@@ -156,21 +156,13 @@
|
|
| 156 |
<!-- Subtotal -->
|
| 157 |
<div class="cart-summary">
|
| 158 |
<p class="fw-bold">Subtotal: ${{ subtotal }}</p>
|
| 159 |
-
{% if reward_points >= 500 %}
|
| 160 |
-
<div class="reward-points-checkbox">
|
| 161 |
-
<label>
|
| 162 |
-
<input type="checkbox" id="rewardCheckbox" value="500" onchange="calculateDiscount()">
|
| 163 |
-
Apply Reward Points ({{ reward_points }} points available)
|
| 164 |
-
</label>
|
| 165 |
-
</div>
|
| 166 |
-
{% endif %}
|
| 167 |
{% if coupons %}
|
| 168 |
<div class="coupon-selection">
|
| 169 |
<label>
|
| 170 |
<input type="checkbox" id="couponCheckbox" onchange="toggleCouponDropdown()">
|
| 171 |
Apply Coupon Code
|
| 172 |
</label>
|
| 173 |
-
<select id="couponDropdown" class="form-select mt-2" disabled>
|
| 174 |
<option value="">Select a coupon</option>
|
| 175 |
{% for coupon in coupons %}
|
| 176 |
<option value="{{ coupon }}">{{ coupon }}</option>
|
|
@@ -259,65 +251,89 @@
|
|
| 259 |
function toggleCouponDropdown() {
|
| 260 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 261 |
let couponDropdown = document.getElementById('couponDropdown');
|
|
|
|
|
|
|
| 262 |
couponDropdown.disabled = !couponCheckbox.checked;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 263 |
}
|
|
|
|
| 264 |
function calculateDiscount() {
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
|
| 268 |
-
|
| 269 |
-
const checkbox = document.getElementById('rewardCheckbox');
|
| 270 |
-
let discount = 0;
|
| 271 |
|
| 272 |
-
|
| 273 |
-
|
| 274 |
-
|
| 275 |
|
| 276 |
-
|
| 277 |
-
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
document.querySelectorAll('.cart-item').forEach(item => {
|
| 284 |
-
const quantity = parseInt(item.querySelector('input').value);
|
| 285 |
-
const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
|
| 286 |
-
const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
|
| 287 |
-
subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
|
| 288 |
-
});
|
| 289 |
|
| 290 |
-
|
| 291 |
-
|
| 292 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 293 |
}
|
| 294 |
-
function proceedToOrder() {
|
| 295 |
-
const rewardCheckbox = document.getElementById('rewardCheckbox');
|
| 296 |
-
let useRewardPoints = rewardCheckbox ? rewardCheckbox.checked : false;
|
| 297 |
|
| 298 |
-
|
| 299 |
-
|
|
|
|
| 300 |
let selectedCoupon = couponCheckbox.checked ? couponDropdown.value : "";
|
| 301 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 302 |
fetch('/checkout', {
|
| 303 |
method: 'POST',
|
| 304 |
headers: { 'Content-Type': 'application/json' },
|
| 305 |
-
body: JSON.stringify({
|
| 306 |
-
useRewardPoints: useRewardPoints,
|
| 307 |
-
selectedCoupon: selectedCoupon // Send selected coupon to backend
|
| 308 |
-
})
|
| 309 |
})
|
| 310 |
.then(response => response.json())
|
| 311 |
.then(data => {
|
| 312 |
if (data.success) {
|
| 313 |
alert(data.message);
|
| 314 |
-
window.location.href = '/order';
|
| 315 |
} else {
|
| 316 |
alert(data.error || data.message);
|
| 317 |
}
|
| 318 |
})
|
| 319 |
.catch(err => console.error('Error during checkout:', err));
|
| 320 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 321 |
function addSuggestion(itemId) {
|
| 322 |
fetch(`/cart/add_suggestion/${itemId}`, {
|
| 323 |
method: 'POST',
|
|
|
|
| 156 |
<!-- Subtotal -->
|
| 157 |
<div class="cart-summary">
|
| 158 |
<p class="fw-bold">Subtotal: ${{ subtotal }}</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 159 |
{% if coupons %}
|
| 160 |
<div class="coupon-selection">
|
| 161 |
<label>
|
| 162 |
<input type="checkbox" id="couponCheckbox" onchange="toggleCouponDropdown()">
|
| 163 |
Apply Coupon Code
|
| 164 |
</label>
|
| 165 |
+
<select id="couponDropdown" class="form-select mt-2" disabled onchange="calculateDiscount()">
|
| 166 |
<option value="">Select a coupon</option>
|
| 167 |
{% for coupon in coupons %}
|
| 168 |
<option value="{{ coupon }}">{{ coupon }}</option>
|
|
|
|
| 251 |
function toggleCouponDropdown() {
|
| 252 |
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 253 |
let couponDropdown = document.getElementById('couponDropdown');
|
| 254 |
+
|
| 255 |
+
// Enable or disable the dropdown based on checkbox status
|
| 256 |
couponDropdown.disabled = !couponCheckbox.checked;
|
| 257 |
+
|
| 258 |
+
// If unchecked, reset discount and total
|
| 259 |
+
if (!couponCheckbox.checked) {
|
| 260 |
+
document.getElementById("discountText").innerText = `Discount: $0`;
|
| 261 |
+
document.getElementById("totalBillText").innerText = `Total Bill: ${{ subtotal }}`;
|
| 262 |
+
}
|
| 263 |
}
|
| 264 |
+
|
| 265 |
function calculateDiscount() {
|
| 266 |
+
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 267 |
+
let couponDropdown = document.getElementById('couponDropdown');
|
| 268 |
+
let subtotal = parseFloat("{{ subtotal }}");
|
|
|
|
|
|
|
|
|
|
| 269 |
|
| 270 |
+
// If checkbox is selected
|
| 271 |
+
if (couponCheckbox.checked) {
|
| 272 |
+
let selectedCoupon = couponDropdown.value;
|
| 273 |
|
| 274 |
+
// If no coupon is selected, show error and reset values
|
| 275 |
+
if (!selectedCoupon) {
|
| 276 |
+
alert("Please select a coupon to apply.");
|
| 277 |
+
document.getElementById("discountText").innerText = `Discount: $0`;
|
| 278 |
+
document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
|
| 279 |
+
return;
|
| 280 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 281 |
|
| 282 |
+
// Apply 10% discount
|
| 283 |
+
let discount = subtotal * 0.10;
|
| 284 |
+
let total = subtotal - discount;
|
| 285 |
+
|
| 286 |
+
// Update UI
|
| 287 |
+
document.getElementById("discountText").innerText = `Discount: $${discount.toFixed(2)}`;
|
| 288 |
+
document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;
|
| 289 |
+
|
| 290 |
+
} else {
|
| 291 |
+
// If checkbox is not selected, reset discount
|
| 292 |
+
document.getElementById("discountText").innerText = `Discount: $0`;
|
| 293 |
+
document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
|
| 294 |
+
}
|
| 295 |
}
|
|
|
|
|
|
|
|
|
|
| 296 |
|
| 297 |
+
function proceedToOrder() {
|
| 298 |
+
let couponCheckbox = document.getElementById('couponCheckbox');
|
| 299 |
+
let couponDropdown = document.getElementById('couponDropdown');
|
| 300 |
let selectedCoupon = couponCheckbox.checked ? couponDropdown.value : "";
|
| 301 |
|
| 302 |
+
if (couponCheckbox.checked && !selectedCoupon) {
|
| 303 |
+
alert("Please select a coupon before proceeding.");
|
| 304 |
+
return;
|
| 305 |
+
}
|
| 306 |
+
|
| 307 |
fetch('/checkout', {
|
| 308 |
method: 'POST',
|
| 309 |
headers: { 'Content-Type': 'application/json' },
|
| 310 |
+
body: JSON.stringify({ selectedCoupon: selectedCoupon })
|
|
|
|
|
|
|
|
|
|
| 311 |
})
|
| 312 |
.then(response => response.json())
|
| 313 |
.then(data => {
|
| 314 |
if (data.success) {
|
| 315 |
alert(data.message);
|
| 316 |
+
window.location.href = '/order';
|
| 317 |
} else {
|
| 318 |
alert(data.error || data.message);
|
| 319 |
}
|
| 320 |
})
|
| 321 |
.catch(err => console.error('Error during checkout:', err));
|
| 322 |
}
|
| 323 |
+
|
| 324 |
+
function calculateSubtotal() {
|
| 325 |
+
let subtotal = 0;
|
| 326 |
+
document.querySelectorAll('.cart-item').forEach(item => {
|
| 327 |
+
const quantity = parseInt(item.querySelector('input').value);
|
| 328 |
+
const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
|
| 329 |
+
const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
|
| 330 |
+
subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
|
| 331 |
+
});
|
| 332 |
+
|
| 333 |
+
// Update the subtotal in the HTML
|
| 334 |
+
document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
|
| 335 |
+
return subtotal;
|
| 336 |
+
}
|
| 337 |
function addSuggestion(itemId) {
|
| 338 |
fetch(`/cart/add_suggestion/${itemId}`, {
|
| 339 |
method: 'POST',
|