Update templates/cart.html
Browse files- 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 }}'
|
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
|
528 |
-
alert('An error occurred during
|
529 |
});
|
530 |
}
|
531 |
|
@@ -546,13 +778,12 @@
|
|
546 |
.catch(err => console.error('Error removing item:', err));
|
547 |
}
|
548 |
|
549 |
-
function addToCartSuggestion(itemName, itemPrice, itemImage
|
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 |
-
|
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));
|