Hugging Face's logo

Spaces:
Subbu1304
/
BiryaniHubflask370dup
Sleeping

App Files Community
Subbu1304 commited on
Commit
ae11efd
·
verified ·
1 Parent(s): 4c2760b

Update templates/cart.html

Browse files
Files changed (1) hide show
  1. templates/cart.html +51 -266
templates/cart.html CHANGED
@@ -6,9 +6,6 @@
6
  <title>Cart</title>
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
- <!-- Add Font Awesome CDN for icons -->
10
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
11
-
12
  <style>
13
  body {
14
  font-family: Arial, sans-serif;
@@ -69,14 +66,8 @@
69
  text-align: right;
70
  margin-top: 15px;
71
  }
72
- .bold-heading{
73
- font-weight: bold;
74
- font-size:25px;
75
- font-family:Serif;
76
- margin-bottom:4px;
77
- }
78
  .checkout-button {
79
- background-color: #FF6B35;
80
  color: #fff;
81
  padding: 10px;
82
  border-radius: 5px;
@@ -117,18 +108,6 @@
117
  background-color: #4a5d68;
118
  color: #fff;
119
  }
120
- .cart-item-actions {
121
- display: flex;
122
- flex-direction: column; /* Stack the price and remove button vertically */
123
- align-items: flex-end;
124
- }
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
  </style>
133
  </head>
134
  <body>
@@ -138,7 +117,7 @@
138
  <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
139
  </div>
140
 
141
- <h class="bold-heading mb-4">Your Cart</h>
142
 
143
  <!-- Cart Items -->
144
  {% for item in cart_items %}
@@ -156,21 +135,16 @@
156
  <!-- Decrease button -->
157
  <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
158
  <!-- Quantity input field -->
159
- <input type="text" value="{{ item.Quantity__c | int }}" readonly data-item-name="{{ item.Name }}">
160
  <!-- Increase button -->
161
  <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
162
  </div>
163
-
164
-
165
  </div>
166
  <div class="cart-item-actions">
167
  <div class="text-primary">
168
  $<span class="base-price">{{ item.Price__c }}</span>
169
  </div>
170
- <!-- <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button> -->
171
- <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">
172
- <i class="fas fa-trash-alt"></i> <!-- Font Awesome delete icon
173
- </button>
174
  </div>
175
  </div>
176
  {% else %}
@@ -220,248 +194,71 @@
220
 
221
  <script>
222
  // Example function to handle the increase/decrease button clicks
223
- // function updateQuantity(action, itemName, customerEmail) {
224
- // let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
225
- // let quantity = parseInt(quantityInput.value);
226
- // // Update quantity based on action
227
- // if (action === 'increase') {
228
- // (Math.floor(quantity))++;
229
- // } else if (action === 'decrease' && Math.floor(quantity) > 1) {
230
- // quantity--;
231
- // }
232
-
233
- // // Validate quantity
234
- // // if (isNaN(quantity) || quantity < 1) {
235
- // // alert("Invalid quantity!");
236
- // // return;
237
- // // }
238
- // if (isNaN(Math.floor(quantity)) || (Math.floor(quantity)) < 1 || quantity !== (Math.floor(quantity)) {
239
- // alert("Invalid quantity! Quantity should be a whole number.");
240
- // return;
241
- // }
242
-
243
- // // Send updated quantity to the server
244
- // fetch('/cart/update_quantity', {
245
- // method: 'POST',
246
- // headers: { 'Content-Type': 'application/json' },
247
- // body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
248
- // })
249
- // .then(response => response.json())
250
- // .then(data => {
251
- // if (data.success) {
252
- // // Update the item price and quantity in the UI
253
- // quantityInput.value = quantity;
254
- // let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
255
- // if (itemElement) {
256
- // let basePriceElement = itemElement.querySelector(".base-price");
257
- // let addonsPriceElement = itemElement.querySelector(".addons-price");
258
-
259
- // // Update the base price
260
- // if (basePriceElement) {
261
- // basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
262
- // }
263
-
264
- // // Update add-ons price if needed (optional)
265
- // if (addonsPriceElement && data.addons_price !== undefined) {
266
- // addonsPriceElement.innerText = data.addons_price.toFixed(2);
267
- // }
268
- // } else {
269
- // console.error(`Parent cart item element not found for item: ${itemName}`);
270
- // }
271
- // location.reload();
272
-
273
- // // Recalculate subtotal dynamically
274
 
275
- // } else {
276
- // alert("Error updating quantity: " + data.error);
277
- // }
278
- // })
279
- // .catch(err => console.error("Error:", err));
280
- // }
281
-
282
- // function updateQuantity(action, itemName, customerEmail) {
283
- // let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
284
- // let quantity = parseInt(quantityInput.value, 10); // Ensure we are working with an integer value
285
-
286
- // // Ensure that the parsed quantity is a valid integer
287
- // if (isNaN(quantity) || quantity < 1) {
288
- // alert("Invalid quantity! Quantity should be a whole number.");
289
- // return;
290
- // }
291
-
292
- // // Update quantity based on action
293
- // if (action === 'increase') {
294
- // quantity += 1; // Simply increase the quantity by 1
295
- // } else if (action === 'decrease' && quantity > 1) {
296
- // quantity -= 1; // Decrease the quantity by 1, ensuring it stays at least 1
297
- // }
298
-
299
- // // Update the input field with the new integer quantity
300
- // quantityInput.value = quantity;
301
-
302
- // // Send updated quantity to the server
303
- // fetch('/cart/update_quantity', {
304
- // method: 'POST',
305
- // headers: { 'Content-Type': 'application/json' },
306
- // body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
307
- // })
308
- // .then(response => response.json())
309
- // .then(data => {
310
- // if (data.success) {
311
- // // Update the base price based on the new quantity
312
- // let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
313
- // if (itemElement) {
314
- // let basePriceElement = itemElement.querySelector(".base-price");
315
- // let addonsPriceElement = itemElement.querySelector(".addons-price");
316
-
317
- // // Update the base price
318
- // if (basePriceElement) {
319
- // basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend returns price in two decimal format
320
- // }
321
-
322
- // // Update add-ons price if needed (optional)
323
- // if (addonsPriceElement && data.addons_price !== undefined) {
324
- // addonsPriceElement.innerText = data.addons_price.toFixed(2);
325
- // }
326
- // } else {
327
- // console.error(`Parent cart item element not found for item: ${itemName}`);
328
- // }
329
- // } else {
330
- // alert("Error updating quantity: " + data.error);
331
- // }
332
- // })
333
- // .catch(err => console.error("Error:", err));
334
- // }
335
- function updateQuantity(action, itemName, customerEmail) {
336
- let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
337
- let quantity = parseInt(quantityInput.value, 10); // Ensure we are working with an integer value
338
-
339
- // Ensure that the parsed quantity is a valid integer
340
- if (isNaN(quantity) || quantity < 1) {
341
- alert("Invalid quantity! Quantity should be a whole number.");
342
- return;
343
- }
344
-
345
- // Update quantity based on action
346
- if (action === 'increase') {
347
- quantity += 1; // Simply increase the quantity by 1
348
- } else if (action === 'decrease' && quantity > 0) {
349
- quantity -= 1; // Decrease the quantity by 1, ensuring it can reach 0
350
- }
351
-
352
- // If quantity reaches 0, remove the item
353
- if (quantity === 0) {
354
- removeItemFromCart(itemName);
355
- return; // Don't continue with quantity update request if item is removed
356
- }
357
-
358
- // Update the input field with the new integer quantity
359
- quantityInput.value = quantity;
360
-
361
- // Send updated quantity to the server
362
- fetch('/cart/update_quantity', {
363
- method: 'POST',
364
- headers: { 'Content-Type': 'application/json' },
365
- body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
366
- })
367
- .then(response => response.json())
368
- .then(data => {
369
- if (data.success) {
370
- // Update the base price based on the new quantity
371
- let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
372
- if (itemElement) {
373
- let basePriceElement = itemElement.querySelector(".base-price");
374
- let addonsPriceElement = itemElement.querySelector(".addons-price");
375
-
376
- // Update the base price
377
- if (basePriceElement) {
378
- basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend returns price in two decimal format
379
- }
380
-
381
- // Update add-ons price if needed (optional)
382
- if (addonsPriceElement && data.addons_price !== undefined) {
383
- addonsPriceElement.innerText = data.addons_price.toFixed(2);
384
  }
385
- } else {
386
- console.error(`Parent cart item element not found for item: ${itemName}`);
387
- }
388
- } else {
389
- alert("Error updating quantity: " + data.error);
390
- }
391
- })
392
- .catch(err => console.error("Error:", err));
393
- }
394
-
395
- function removeItemFromCart(itemName) {
396
- // Find and remove the item element from the DOM
397
- let itemElement = document.querySelector(`.cart-item[data-item-name="${itemName}"]`);
398
- if (itemElement) {
399
- itemElement.remove(); // Remove the item from the cart UI
400
- }
401
-
402
- // Optionally, also send a request to the server to remove the item
403
- fetch('/cart/remove_item', {
404
- method: 'POST',
405
- headers: { 'Content-Type': 'application/json' },
406
- body: JSON.stringify({ item_name: itemName })
407
- })
408
- .then(response => response.json())
409
- .then(data => {
410
- if (data.success) {
411
- console.log("Item removed from cart successfully");
412
- } else {
413
- alert("Error removing item from cart: " + data.error);
414
- }
415
- })
416
- .catch(err => console.error("Error:", err));
417
- }
418
-
419
-
420
- function removeItemFromCart(itemName) {
421
- // Hide the item or remove it from the cart UI
422
- let itemElement = document.querySelector(`.cart-item[data-item-name="${itemName}"]`);
423
- if (itemElement) {
424
- itemElement.remove(); // Remove the item element from the DOM
425
- }
426
-
427
- // Optionally, also send a request to the server to remove the item
428
- fetch('/cart/remove_item', {
429
- method: 'POST',
430
- headers: { 'Content-Type': 'application/json' },
431
- body: JSON.stringify({ item_name: itemName })
432
- })
433
- .then(response => response.json())
434
- .then(data => {
435
- if (data.success) {
436
- console.log("Item removed from cart successfully");
437
- } else {
438
- alert("Error removing item from cart: " + data.error);
439
  }
440
- })
441
- .catch(err => console.error("Error:", err));
442
- }
443
-
444
-
445
-
446
  function toggleCouponDropdown() {
447
  let couponCheckbox = document.getElementById('couponCheckbox');
448
  let couponDropdown = document.getElementById('couponDropdown');
449
-
450
  // Enable or disable the dropdown based on checkbox status
451
  couponDropdown.disabled = !couponCheckbox.checked;
452
-
453
  // If unchecked, reset discount and total
454
  if (!couponCheckbox.checked) {
455
  document.getElementById("discountText").innerText = `Discount: $0`;
456
  document.getElementById("totalBillText").innerText = `Total Bill: ${{ subtotal }}`;
457
  }
458
  }
459
-
460
  function calculateDiscount() {
461
  let couponCheckbox = document.getElementById('couponCheckbox');
462
  let couponDropdown = document.getElementById('couponDropdown');
463
  let subtotal = parseFloat("{{ subtotal }}");
464
-
465
  // If checkbox is selected
466
  if (couponCheckbox.checked) {
467
  let selectedCoupon = couponDropdown.value.trim();
@@ -471,29 +268,23 @@ function removeItemFromCart(itemName) {
471
  document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
472
  return;
473
  }
474
-
475
 
476
-
477
  // Apply 10% discount
478
  let discount = subtotal * 0.10;
479
  let total = subtotal - discount;
480
-
481
  // Update UI
482
  document.getElementById("discountText").innerText = `Discount: $${discount.toFixed(2)}`;
483
  document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;
484
-
485
  } else {
486
  // If checkbox is not selected, reset discount
487
  document.getElementById("discountText").innerText = `Discount: $0`;
488
  document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
489
  }
490
  }
491
-
492
  function proceedToOrder() {
493
  let couponCheckbox = document.getElementById('couponCheckbox');
494
  let couponDropdown = document.getElementById('couponDropdown');
495
  let selectedCoupon = ""; // Default to empty coupon
496
-
497
  if (couponCheckbox && couponCheckbox.checked) {
498
  if (couponDropdown) {
499
  selectedCoupon = couponDropdown.value.trim();
@@ -524,7 +315,6 @@ function removeItemFromCart(itemName) {
524
  })
525
  .catch(err => console.error('Error during checkout:', err));
526
  }
527
-
528
  function calculateSubtotal() {
529
  let subtotal = 0;
530
  document.querySelectorAll('.cart-item').forEach(item => {
@@ -533,7 +323,6 @@ function removeItemFromCart(itemName) {
533
  const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
534
  subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
535
  });
536
-
537
  // Update the subtotal in the HTML
538
  document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
539
  return subtotal;
@@ -613,7 +402,6 @@ function removeItemFromCart(itemName) {
613
  }
614
  function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
615
  const customerEmail = "{{ customer_email }}"; // Get customer email from session
616
-
617
  // Create the data object to send to the server
618
  const data = {
619
  item_name: itemName,
@@ -624,7 +412,6 @@ function removeItemFromCart(itemName) {
624
  instructions: "", // Default to empty, you can adjust if needed
625
  customer_email: customerEmail
626
  };
627
-
628
  // Send the data to the backend via a POST request
629
  fetch('/cart/add_suggestion_to_cart', {
630
  method: 'POST',
@@ -644,8 +431,6 @@ function removeItemFromCart(itemName) {
644
  })
645
  .catch(err => console.error('Error adding item:', err));
646
  }
647
-
648
-
649
 
650
 
651
  </script>
 
6
  <title>Cart</title>
7
  <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
 
 
 
9
  <style>
10
  body {
11
  font-family: Arial, sans-serif;
 
66
  text-align: right;
67
  margin-top: 15px;
68
  }
 
 
 
 
 
 
69
  .checkout-button {
70
+ background-color: #5bbfc1;
71
  color: #fff;
72
  padding: 10px;
73
  border-radius: 5px;
 
108
  background-color: #4a5d68;
109
  color: #fff;
110
  }
 
 
 
 
 
 
 
 
 
 
 
 
111
  </style>
112
  </head>
113
  <body>
 
117
  <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
118
  </div>
119
 
120
+ <h4 class="mb-6">Your Cart</h4>
121
 
122
  <!-- Cart Items -->
123
  {% for item in cart_items %}
 
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 %}
 
194
 
195
  <script>
196
  // Example function to handle the increase/decrease button clicks
197
+ function updateQuantity(action, itemName, customerEmail) {
198
+ let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
199
+ let quantity = parseInt(quantityInput.value);
200
+ // Update quantity based on action
201
+ if (action === 'increase') {
202
+ quantity++;
203
+ } else if (action === 'decrease' && quantity > 1) {
204
+ quantity--;
205
+ }
206
+ quantityInput.value = quantity;
207
+ // Validate quantity
208
+ if (isNaN(quantity) || quantity < 1) {
209
+ alert("Invalid quantity!");
210
+ return;
211
+ }
212
+ // Send updated quantity to the server
213
+ fetch('/cart/update_quantity', {
214
+ method: 'POST',
215
+ headers: { 'Content-Type': 'application/json' },
216
+ body: JSON.stringify({ email: customerEmail, item_name: itemName, quantity: quantity })
217
+ })
218
+ .then(response => response.json())
219
+ .then(data => {
220
+ if (data.success) {
221
+ // Update the item price and quantity in the UI
222
+ quantityInput.value = quantity;
223
+ let itemElement = quantityInput.closest(".cart-item"); // Locate the parent cart item
224
+ if (itemElement) {
225
+ let basePriceElement = itemElement.querySelector(".base-price");
226
+ let addonsPriceElement = itemElement.querySelector(".addons-price");
227
+ // Update the base price
228
+ if (basePriceElement) {
229
+ basePriceElement.innerText = data.new_item_price.toFixed(2); // Assuming backend sends this
230
+ }
231
+ // Update add-ons price if needed (optional)
232
+ if (addonsPriceElement && data.addons_price !== undefined) {
233
+ addonsPriceElement.innerText = data.addons_price.toFixed(2);
234
+ }
235
+ } else {
236
+ console.error(`Parent cart item element not found for item: ${itemName}`);
237
+ }
238
+ location.reload();
239
+ // Recalculate subtotal dynamically
 
 
 
 
 
 
 
 
240
 
241
+ } else {
242
+ alert("Error updating quantity: " + data.error);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  }
244
+ })
245
+ .catch(err => console.error("Error:", err));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  }
 
 
 
 
 
 
247
  function toggleCouponDropdown() {
248
  let couponCheckbox = document.getElementById('couponCheckbox');
249
  let couponDropdown = document.getElementById('couponDropdown');
 
250
  // Enable or disable the dropdown based on checkbox status
251
  couponDropdown.disabled = !couponCheckbox.checked;
 
252
  // If unchecked, reset discount and total
253
  if (!couponCheckbox.checked) {
254
  document.getElementById("discountText").innerText = `Discount: $0`;
255
  document.getElementById("totalBillText").innerText = `Total Bill: ${{ subtotal }}`;
256
  }
257
  }
 
258
  function calculateDiscount() {
259
  let couponCheckbox = document.getElementById('couponCheckbox');
260
  let couponDropdown = document.getElementById('couponDropdown');
261
  let subtotal = parseFloat("{{ subtotal }}");
 
262
  // If checkbox is selected
263
  if (couponCheckbox.checked) {
264
  let selectedCoupon = couponDropdown.value.trim();
 
268
  document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
269
  return;
270
  }
 
271
 
 
272
  // Apply 10% discount
273
  let discount = subtotal * 0.10;
274
  let total = subtotal - discount;
 
275
  // Update UI
276
  document.getElementById("discountText").innerText = `Discount: $${discount.toFixed(2)}`;
277
  document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;
 
278
  } else {
279
  // If checkbox is not selected, reset discount
280
  document.getElementById("discountText").innerText = `Discount: $0`;
281
  document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
282
  }
283
  }
 
284
  function proceedToOrder() {
285
  let couponCheckbox = document.getElementById('couponCheckbox');
286
  let couponDropdown = document.getElementById('couponDropdown');
287
  let selectedCoupon = ""; // Default to empty coupon
 
288
  if (couponCheckbox && couponCheckbox.checked) {
289
  if (couponDropdown) {
290
  selectedCoupon = couponDropdown.value.trim();
 
315
  })
316
  .catch(err => console.error('Error during checkout:', err));
317
  }
 
318
  function calculateSubtotal() {
319
  let subtotal = 0;
320
  document.querySelectorAll('.cart-item').forEach(item => {
 
323
  const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
324
  subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
325
  });
 
326
  // Update the subtotal in the HTML
327
  document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
328
  return subtotal;
 
402
  }
403
  function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
404
  const customerEmail = "{{ customer_email }}"; // Get customer email from session
 
405
  // Create the data object to send to the server
406
  const data = {
407
  item_name: itemName,
 
412
  instructions: "", // Default to empty, you can adjust if needed
413
  customer_email: customerEmail
414
  };
 
415
  // Send the data to the backend via a POST request
416
  fetch('/cart/add_suggestion_to_cart', {
417
  method: 'POST',
 
431
  })
432
  .catch(err => console.error('Error adding item:', err));
433
  }
 
 
434
 
435
 
436
  </script>