Spaces:
Sleeping
Sleeping
Update templates/menu.html
Browse files- templates/menu.html +106 -11
templates/menu.html
CHANGED
|
@@ -537,7 +537,24 @@ form-check-input addon-option{
|
|
| 537 |
width: 40px; /* Adjust input size for smaller screens */
|
| 538 |
height: 35px;
|
| 539 |
}
|
| 540 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 541 |
</style>
|
| 542 |
</head>
|
| 543 |
<body>
|
|
@@ -645,8 +662,20 @@ form-check-input addon-option{
|
|
| 645 |
</div>
|
| 646 |
<div class= "d-flex flex-column align-item-center justify-content-center">
|
| 647 |
<!-- <button class="btn btn-primary>ADD</button> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 648 |
|
| 649 |
-
|
|
|
|
| 650 |
<button class="btn btn btn-primary "
|
| 651 |
data-bs-toggle="modal" data-bs-target="#itemModal"
|
| 652 |
onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
|
|
@@ -660,15 +689,8 @@ form-check-input addon-option{
|
|
| 660 |
{% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
|
| 661 |
<h5 class="customisable-text">Customisable</h5>
|
| 662 |
{% endif %}
|
|
|
|
| 663 |
</div>
|
| 664 |
-
|
| 665 |
-
|
| 666 |
-
|
| 667 |
-
</div>
|
| 668 |
-
|
| 669 |
-
|
| 670 |
-
|
| 671 |
-
|
| 672 |
</div>
|
| 673 |
</div>
|
| 674 |
|
|
@@ -975,7 +997,80 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
| 975 |
});
|
| 976 |
});
|
| 977 |
|
| 978 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 979 |
|
| 980 |
</script>
|
| 981 |
|
|
|
|
| 537 |
width: 40px; /* Adjust input size for smaller screens */
|
| 538 |
height: 35px;
|
| 539 |
}
|
| 540 |
+
}
|
| 541 |
+
.quantity-control {
|
| 542 |
+
display: flex;
|
| 543 |
+
align-items: center;
|
| 544 |
+
gap: 5px;
|
| 545 |
+
}
|
| 546 |
+
|
| 547 |
+
.quantity {
|
| 548 |
+
font-size: 14px;
|
| 549 |
+
font-weight: bold;
|
| 550 |
+
min-width: 20px;
|
| 551 |
+
text-align: center;
|
| 552 |
+
}
|
| 553 |
+
|
| 554 |
+
.btn-sm {
|
| 555 |
+
padding: 2px 8px;
|
| 556 |
+
font-size: 12px;
|
| 557 |
+
}
|
| 558 |
</style>
|
| 559 |
</head>
|
| 560 |
<body>
|
|
|
|
| 662 |
</div>
|
| 663 |
<div class= "d-flex flex-column align-item-center justify-content-center">
|
| 664 |
<!-- <button class="btn btn-primary>ADD</button> -->
|
| 665 |
+
{% if item.Section__c == 'Soft Drinks' %}
|
| 666 |
+
<!-- Soft Drinks: Direct Add-to-Cart Button -->
|
| 667 |
+
<div id="quantity-control-{{ loop.index }}" class="quantity-control" style="display: none;">
|
| 668 |
+
<button class="btn btn-outline-secondary btn-sm" onclick="decreaseQuantity('{{ item.Name }}', {{ loop.index }})">−</button>
|
| 669 |
+
<span class="quantity mx-2" id="quantity-{{ loop.index }}">1</span>
|
| 670 |
+
<button class="btn btn-outline-secondary btn-sm" onclick="increaseQuantity('{{ item.Name }}', {{ loop.index }})">+</button>
|
| 671 |
+
</div>
|
| 672 |
+
<button class="btn btn-primary" id="add-btn-{{ loop.index }}"
|
| 673 |
+
onclick="addSoftDrinkToCart('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image1__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ loop.index }})">
|
| 674 |
+
ADD
|
| 675 |
+
</button>
|
| 676 |
|
| 677 |
+
{% else %}
|
| 678 |
+
<!-- Other Items: Modal Button -->
|
| 679 |
<button class="btn btn btn-primary "
|
| 680 |
data-bs-toggle="modal" data-bs-target="#itemModal"
|
| 681 |
onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
|
|
|
|
| 689 |
{% if item.Section__c != 'Apetizer' and item.Section__c != 'Customized dish' and item.Section__c !='Soft Drinks' %}
|
| 690 |
<h5 class="customisable-text">Customisable</h5>
|
| 691 |
{% endif %}
|
| 692 |
+
</div>
|
| 693 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 694 |
</div>
|
| 695 |
</div>
|
| 696 |
|
|
|
|
| 997 |
});
|
| 998 |
});
|
| 999 |
|
| 1000 |
+
// Function to add Soft Drink to cart directly
|
| 1001 |
+
function addSoftDrinkToCart(name, price, image, section, category, index) {
|
| 1002 |
+
const itemPrice = parseFloat(price);
|
| 1003 |
+
const quantity = 1; // Default quantity
|
| 1004 |
+
|
| 1005 |
+
const cartPayload = {
|
| 1006 |
+
itemName: name,
|
| 1007 |
+
itemPrice: itemPrice,
|
| 1008 |
+
itemImage: image || '/static/placeholder.jpg',
|
| 1009 |
+
section: section,
|
| 1010 |
+
category: category,
|
| 1011 |
+
addons: [], // No add-ons for Soft Drinks
|
| 1012 |
+
instructions: '', // No instructions for Soft Drinks
|
| 1013 |
+
quantity: quantity
|
| 1014 |
+
};
|
| 1015 |
+
|
| 1016 |
+
fetch('/cart/add', {
|
| 1017 |
+
method: 'POST',
|
| 1018 |
+
headers: {
|
| 1019 |
+
'Content-Type': 'application/json',
|
| 1020 |
+
},
|
| 1021 |
+
body: JSON.stringify(cartPayload)
|
| 1022 |
+
})
|
| 1023 |
+
.then(response => response.json())
|
| 1024 |
+
.then(data => {
|
| 1025 |
+
if (data.success) {
|
| 1026 |
+
// Hide the ADD button and show quantity controls
|
| 1027 |
+
document.getElementById(`add-btn-${index}`).style.display = 'none';
|
| 1028 |
+
document.getElementById(`quantity-control-${index}`).style.display = 'flex';
|
| 1029 |
+
updateCartUI(data.cart);
|
| 1030 |
+
alert('Soft Drink added to cart successfully!');
|
| 1031 |
+
} else {
|
| 1032 |
+
alert(data.error || 'Failed to add Soft Drink to cart.');
|
| 1033 |
+
}
|
| 1034 |
+
})
|
| 1035 |
+
.catch(err => {
|
| 1036 |
+
console.error('Error adding Soft Drink to cart:', err);
|
| 1037 |
+
alert('An error occurred while adding the Soft Drink to the cart.');
|
| 1038 |
+
});
|
| 1039 |
+
}
|
| 1040 |
+
// Function to increase quantity
|
| 1041 |
+
function increaseQuantity(name, index) {
|
| 1042 |
+
let quantityElement = document.getElementById(`quantity-${index}`);
|
| 1043 |
+
let currentQuantity = parseInt(quantityElement.innerText);
|
| 1044 |
+
currentQuantity++;
|
| 1045 |
+
quantityElement.innerText = currentQuantity;
|
| 1046 |
+
|
| 1047 |
+
updateCartQuantity(name, currentQuantity);
|
| 1048 |
+
}
|
| 1049 |
+
|
| 1050 |
+
// Function to decrease quantity
|
| 1051 |
+
function decreaseQuantity(name, index) {
|
| 1052 |
+
let quantityElement = document.getElementById(`quantity-${index}`);
|
| 1053 |
+
let currentQuantity = parseInt(quantityElement.innerText);
|
| 1054 |
+
if (currentQuantity > 1) {
|
| 1055 |
+
currentQuantity--;
|
| 1056 |
+
quantityElement.innerText = currentQuantity;
|
| 1057 |
+
updateCartQuantity(name, currentQuantity);
|
| 1058 |
+
} else {
|
| 1059 |
+
// Remove from cart and revert to ADD button
|
| 1060 |
+
removeFromCart(name, index);
|
| 1061 |
+
}
|
| 1062 |
+
}
|
| 1063 |
+
// Existing updateCartUI function (unchanged, but included for reference)
|
| 1064 |
+
function updateCartUI(cart) {
|
| 1065 |
+
if (!Array.isArray(cart)) {
|
| 1066 |
+
console.error('Invalid cart data:', cart);
|
| 1067 |
+
return;
|
| 1068 |
+
}
|
| 1069 |
+
const cartIcon = document.getElementById('cart-icon');
|
| 1070 |
+
if (cartIcon) {
|
| 1071 |
+
cartIcon.innerText = cart.length; // Update cart icon if it exists
|
| 1072 |
+
}
|
| 1073 |
+
}
|
| 1074 |
|
| 1075 |
</script>
|
| 1076 |
|