lokeshloki143 commited on
Commit
4fb7c97
·
verified ·
1 Parent(s): e8c2e24

Update templates/cart.html

Browse files
Files changed (1) hide show
  1. templates/cart.html +237 -6
templates/cart.html CHANGED
@@ -339,6 +339,118 @@
339
  align-items: flex-start;
340
  margin-left: auto;
341
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
342
  </style>
343
  </head>
344
  <body>
@@ -399,7 +511,7 @@
399
  <div>{{ suggestion.Name }}</div>
400
  <div class="text-muted">${{ suggestion.Price__c }}</div>
401
  </div>
402
- <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">+</button>
403
  </div>
404
  {% endfor %}
405
  </div>
@@ -439,7 +551,49 @@
439
  </div>
440
  </div>
441
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
442
  <script>
 
 
 
443
  function updateQuantity(action, itemName, customerEmail) {
444
  let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
445
  let quantity = parseInt(quantityInput.value);
@@ -515,6 +669,84 @@
515
  body: JSON.stringify({ selectedCoupon: selectedCoupon })
516
  })
517
  .then(response => response.json())
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
518
  .then(data => {
519
  if (data.success) {
520
  alert(data.message);
@@ -524,8 +756,8 @@
524
  }
525
  })
526
  .catch(err => {
527
- console.error('Error during checkout:', err);
528
- alert('An error occurred during checkout. Please try again.');
529
  });
530
  }
531
 
@@ -546,13 +778,12 @@
546
  .catch(err => console.error('Error removing item:', err));
547
  }
548
 
549
- function addToCartSuggestion(itemName, itemPrice, itemImage, itemId) {
550
  const customerEmail = "{{ customer_email }}";
551
  const data = {
552
  item_name: itemName,
553
  item_price: itemPrice,
554
  item_image: itemImage,
555
- item_id: itemId,
556
  addons: [],
557
  instructions: "",
558
  customer_email: customerEmail
@@ -568,7 +799,7 @@
568
  alert('Item added to cart!');
569
  location.reload();
570
  } else {
571
- alert('Error adding item to cart: ' + data.error);
572
  }
573
  })
574
  .catch(err => console.error('Error adding item:', err));
 
339
  align-items: flex-start;
340
  margin-left: auto;
341
  }
342
+
343
+ /* Modal Styles */
344
+ .modal {
345
+ display: none;
346
+ position: fixed;
347
+ top: 0;
348
+ left: 0;
349
+ width: 100%;
350
+ height: 100%;
351
+ background-color: rgba(0, 0, 0, 0.5);
352
+ z-index: 1000;
353
+ justify-content: center;
354
+ align-items: center;
355
+ }
356
+ .modal-content {
357
+ background-color: #fff;
358
+ padding: 20px;
359
+ border-radius: 10px;
360
+ width: 90%;
361
+ max-width: 600px;
362
+ max-height: 80vh;
363
+ overflow-y: auto;
364
+ position: relative;
365
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
366
+ }
367
+ .modal-content h3 {
368
+ text-align: center;
369
+ margin-bottom: 20px;
370
+ color: #333;
371
+ }
372
+ .close-modal {
373
+ position: absolute;
374
+ top: 10px;
375
+ right: 15px;
376
+ font-size: 1.5rem;
377
+ cursor: pointer;
378
+ color: #333;
379
+ }
380
+ .menu-items-container {
381
+ display: flex;
382
+ flex-wrap: wrap;
383
+ gap: 10px;
384
+ padding: 10px;
385
+ }
386
+ .menu-item {
387
+ display: flex;
388
+ align-items: center;
389
+ justify-content: space-between;
390
+ width: calc(50% - 10px);
391
+ padding: 10px;
392
+ border-radius: 8px;
393
+ background-color: #fff;
394
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
395
+ border: 2px solid #fdf4e3;
396
+ }
397
+ .menu-item img {
398
+ width: 50px;
399
+ height: 50px;
400
+ object-fit: cover;
401
+ border-radius: 5px;
402
+ margin-right: 10px;
403
+ }
404
+ .menu-item-details {
405
+ flex-grow: 1;
406
+ }
407
+ .menu-item-details small {
408
+ display: block;
409
+ color: #666;
410
+ }
411
+ .bill-item {
412
+ display: flex;
413
+ justify-content: space-between;
414
+ padding: 10px 0;
415
+ border-bottom: 1px solid #f0f0f0;
416
+ }
417
+ .bill-item-details {
418
+ flex: 1;
419
+ }
420
+ .bill-item-details small {
421
+ display: block;
422
+ color: #666;
423
+ }
424
+ .bill-item-price {
425
+ font-weight: bold;
426
+ color: #2e7d32;
427
+ }
428
+ .bill-summary {
429
+ margin-top: 20px;
430
+ }
431
+ .modal-actions {
432
+ display: flex;
433
+ justify-content: space-between;
434
+ margin-top: 20px;
435
+ }
436
+ .action-btn {
437
+ padding: 10px;
438
+ border: none;
439
+ border-radius: 8px;
440
+ cursor: pointer;
441
+ width: 48%;
442
+ text-align: center;
443
+ color: #fff;
444
+ }
445
+ .view-bill-btn {
446
+ background-color: #A52A2A;
447
+ }
448
+ .cancel-btn {
449
+ background-color: #6c757d;
450
+ }
451
+ .confirm-order-btn {
452
+ background-color: #A52A2A;
453
+ }
454
  </style>
455
  </head>
456
  <body>
 
511
  <div>{{ suggestion.Name }}</div>
512
  <div class="text-muted">${{ suggestion.Price__c }}</div>
513
  </div>
514
+ <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}')">+</button>
515
  </div>
516
  {% endfor %}
517
  </div>
 
551
  </div>
552
  </div>
553
 
554
+ <!-- Anything Else Modal -->
555
+ <div class="modal" id="anythingElseModal">
556
+ <div class="modal-content">
557
+ <span class="close-modal" onclick="closeAnythingElseModal()">×</span>
558
+ <h3>Anything Else You Want?</h3>
559
+ <div class="menu-items-container" id="menuItems"></div>
560
+ <div class="modal-actions">
561
+ <button class="action-btn view-bill-btn" onclick="showBill()">View Bill</button>
562
+ <button class="action-btn cancel-btn" onclick="closeAnythingElseModal()">Cancel</button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+
567
+ <!-- Bill Modal -->
568
+ <div class="modal" id="billModal">
569
+ <div class="modal-content">
570
+ <span class="close-modal" onclick="closeBillModal()">×</span>
571
+ <h3>Your Bill</h3>
572
+ <div id="billItems"></div>
573
+ <div class="bill-summary">
574
+ <div class="bill-details">
575
+ <div class="label">Subtotal</div>
576
+ <div class="amount" id="billSubtotal">$0.00</div>
577
+ <div class="label">Discount</div>
578
+ <div class="amount" id="billDiscount">$0.00</div>
579
+ </div>
580
+ <div class="dotted-line"></div>
581
+ <div class="total-bill">
582
+ <div class="label">Total</div>
583
+ <div class="amount" id="billTotal">$0.00</div>
584
+ </div>
585
+ </div>
586
+ <div class="modal-actions">
587
+ <iml class="action-btn confirm-order-btn" onclick="submitOrder()">Confirm Order</button>
588
+ <button class="action-btn cancel-btn" onclick="closeBillModal()">Cancel</button>
589
+ </div>
590
+ </div>
591
+ </div>
592
+
593
  <script>
594
+ let currentCart = null;
595
+ let menuItems = [];
596
+
597
  function updateQuantity(action, itemName, customerEmail) {
598
  let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
599
  let quantity = parseInt(quantityInput.value);
 
669
  body: JSON.stringify({ selectedCoupon: selectedCoupon })
670
  })
671
  .then(response => response.json())
672
+ .then(data => {
673
+ if (data.success) {
674
+ currentCart = data.cart;
675
+ menuItems = data.menu_items;
676
+ displayAnythingElse();
677
+ } else {
678
+ alert(data.error || data.message);
679
+ }
680
+ })
681
+ .catch(err => {
682
+ console.error('Error during checkout:', err);
683
+ alert('An error occurred. Please try again.');
684
+ });
685
+ }
686
+
687
+ function displayAnythingElse() {
688
+ const menuItemsContainer = document.getElementById('menuItems');
689
+ menuItemsContainer.innerHTML = '';
690
+ menuItems.forEach(item => {
691
+ const itemElement = document.createElement('div');
692
+ itemElement.className = 'menu-item';
693
+ itemElement.innerHTML = `
694
+ <img src="${item.Image1__c}" alt="${item.Name}" onerror="this.src='/static/placeholder.jpg';">
695
+ <div class="menu-item-details">
696
+ <strong>${item.Name}</strong>
697
+ <small>${item.Veg_NonVeg__c} | ${item.Section__c}</small>
698
+ <small>$${item.Price__c.toFixed(2)}</small>
699
+ </div>
700
+ <button class="add-back-button" onclick="addToCartSuggestion('${item.Name}', '${item.Price__c}', '${item.Image1__c}')">+</button>
701
+ `;
702
+ menuItemsContainer.appendChild(itemElement);
703
+ });
704
+ document.getElementById('anythingElseModal').style.display = 'flex';
705
+ }
706
+
707
+ function closeAnythingElseModal() {
708
+ document.getElementById('anythingElseModal').style.display = 'none';
709
+ }
710
+
711
+ function showBill() {
712
+ closeAnythingElseModal();
713
+ const billItemsContainer = document.getElementById('billItems');
714
+ billItemsContainer.innerHTML = '';
715
+ currentCart.items.forEach(item => {
716
+ const itemElement = document.createElement('div');
717
+ itemElement.className = 'bill-item';
718
+ itemElement.innerHTML = `
719
+ <div class="bill-item-details">
720
+ <strong>${item.name} x${item.quantity}</strong>
721
+ <small>Add-ons: ${item.addons}</small>
722
+ <small>Instructions: ${item.instructions}</small>
723
+ </div>
724
+ <div class="bill-item-price">$${item.price.toFixed(2)}</div>
725
+ `;
726
+ billItemsContainer.appendChild(itemElement);
727
+ });
728
+ document.getElementById('billSubtotal').innerText = `$${currentCart.subtotal.toFixed(2)}`;
729
+ document.getElementById('billDiscount').innerText = `$${currentCart.discount.toFixed(2)}`;
730
+ document.getElementById('billTotal').innerText = `$${currentCart.total.toFixed(2)}`;
731
+ document.getElementById('billModal').style.display = 'flex';
732
+ }
733
+
734
+ function closeBillModal() {
735
+ document.getElementById('billModal').style.display = 'none';
736
+ currentCart = null;
737
+ }
738
+
739
+ function submitOrder() {
740
+ if (!currentCart) {
741
+ alert('No cart data available.');
742
+ return;
743
+ }
744
+ fetch('/cart/submit_order', {
745
+ method: 'POST',
746
+ headers: { 'Content-Type': 'application/json' },
747
+ body: JSON.stringify({ cart: currentCart })
748
+ })
749
+ .then(response => response.json())
750
  .then(data => {
751
  if (data.success) {
752
  alert(data.message);
 
756
  }
757
  })
758
  .catch(err => {
759
+ console.error('Error during order submission:', err);
760
+ alert('An error occurred during order submission. Please try again.');
761
  });
762
  }
763
 
 
778
  .catch(err => console.error('Error removing item:', err));
779
  }
780
 
781
+ function addToCartSuggestion(itemName, itemPrice, itemImage) {
782
  const customerEmail = "{{ customer_email }}";
783
  const data = {
784
  item_name: itemName,
785
  item_price: itemPrice,
786
  item_image: itemImage,
 
787
  addons: [],
788
  instructions: "",
789
  customer_email: customerEmail
 
799
  alert('Item added to cart!');
800
  location.reload();
801
  } else {
802
+ alert('Error adding item to cart: ' + data.error);
803
  }
804
  })
805
  .catch(err => console.error('Error adding item:', err));