Update templates/menu.html
Browse files- templates/menu.html +179 -154
templates/menu.html
CHANGED
|
@@ -135,7 +135,7 @@
|
|
| 135 |
top: 50%;
|
| 136 |
transform: translateY(-50%);
|
| 137 |
display: flex;
|
| 138 |
-
align-items:
|
| 139 |
justify-content: center;
|
| 140 |
}
|
| 141 |
.avatar-icon {
|
|
@@ -264,6 +264,9 @@
|
|
| 264 |
position: relative;
|
| 265 |
margin-right: 10px;
|
| 266 |
}
|
|
|
|
|
|
|
|
|
|
| 267 |
.addon-section .form-check-input:checked {
|
| 268 |
background-color: #006400;
|
| 269 |
border-color: #006400;
|
|
@@ -276,6 +279,16 @@
|
|
| 276 |
left: 4px;
|
| 277 |
color: white;
|
| 278 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 279 |
.addon-section .form-check-label {
|
| 280 |
font-size: 16px;
|
| 281 |
margin-left: 5px;
|
|
@@ -730,7 +743,6 @@
|
|
| 730 |
</style>
|
| 731 |
</head>
|
| 732 |
<body>
|
| 733 |
-
|
| 734 |
<div class="fixed-top-bar">
|
| 735 |
<div class="avatar-dropdown-container">
|
| 736 |
<div class="avatar-icon">
|
|
@@ -786,7 +798,7 @@
|
|
| 786 |
<div class="row">
|
| 787 |
{% for item in items %}
|
| 788 |
<div class="col-md-6 mb-4">
|
| 789 |
-
<div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}">
|
| 790 |
<video
|
| 791 |
class="card-img-top menu-video"
|
| 792 |
muted
|
|
@@ -814,7 +826,9 @@
|
|
| 814 |
data-item-price="{{ item.Price__c | default('0.00') }}"
|
| 815 |
data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
|
| 816 |
data-item-section="{{ item.Section__c | default(section) }}"
|
| 817 |
-
data-item-category="{{ selected_category }}"
|
|
|
|
|
|
|
| 818 |
{% if item.Section__c == 'Soft Drinks' %}
|
| 819 |
<button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
|
| 820 |
{% else %}
|
|
@@ -1089,6 +1103,130 @@
|
|
| 1089 |
}
|
| 1090 |
}
|
| 1091 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1092 |
document.addEventListener('DOMContentLoaded', function () {
|
| 1093 |
// Avatar Dropdown
|
| 1094 |
const avatarContainer = document.querySelector('.avatar-dropdown-container');
|
|
@@ -1115,21 +1253,47 @@
|
|
| 1115 |
window.location.href = '/search';
|
| 1116 |
});
|
| 1117 |
|
| 1118 |
-
//
|
| 1119 |
const selectedItem = localStorage.getItem('selectedItem');
|
| 1120 |
if (selectedItem) {
|
| 1121 |
-
|
| 1122 |
-
|
| 1123 |
-
const
|
| 1124 |
-
|
| 1125 |
-
|
| 1126 |
-
|
| 1127 |
-
|
| 1128 |
-
|
| 1129 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1130 |
}
|
| 1131 |
}
|
| 1132 |
-
})
|
|
|
|
|
|
|
| 1133 |
localStorage.removeItem('selectedItem');
|
| 1134 |
}
|
| 1135 |
|
|
@@ -1363,145 +1527,6 @@
|
|
| 1363 |
micIcon.style.display = 'none';
|
| 1364 |
}
|
| 1365 |
});
|
| 1366 |
-
|
| 1367 |
-
function showItemDetails(name, price, image, description, section, selectedCategory) {
|
| 1368 |
-
document.getElementById('modal-name').innerText = name;
|
| 1369 |
-
document.getElementById('modal-price').innerText = `$${price}`;
|
| 1370 |
-
const modalImg = document.getElementById('modal-img');
|
| 1371 |
-
modalImg.src = image || '/static/placeholder.jpg';
|
| 1372 |
-
document.getElementById('modal-description').innerText = description || 'No description available.';
|
| 1373 |
-
document.getElementById('addons-list').innerHTML = 'Loading customization options...';
|
| 1374 |
-
document.getElementById('modal-instructions').value = '';
|
| 1375 |
-
const modalSectionEl = document.getElementById('modal-section');
|
| 1376 |
-
modalSectionEl.setAttribute('data-section', section);
|
| 1377 |
-
modalSectionEl.setAttribute('data-category', selectedCategory);
|
| 1378 |
-
document.getElementById('quantityInput').value = 1;
|
| 1379 |
-
|
| 1380 |
-
fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
|
| 1381 |
-
.then(response => response.json())
|
| 1382 |
-
.then(data => {
|
| 1383 |
-
const addonsList = document.getElementById('addons-list');
|
| 1384 |
-
addonsList.innerHTML = '';
|
| 1385 |
-
if (!data.success || !data.addons || data.addons.length === 0) {
|
| 1386 |
-
addonsList.innerHTML = '<p>No customization options available.</p>';
|
| 1387 |
-
return;
|
| 1388 |
-
}
|
| 1389 |
-
data.addons.forEach(addon => {
|
| 1390 |
-
const sectionDiv = document.createElement('div');
|
| 1391 |
-
sectionDiv.classList.add('addon-section');
|
| 1392 |
-
const title = document.createElement('h6');
|
| 1393 |
-
title.innerText = addon.name;
|
| 1394 |
-
sectionDiv.appendChild(title);
|
| 1395 |
-
const optionsContainer = document.createElement('div');
|
| 1396 |
-
addon.options.forEach((option, index) => {
|
| 1397 |
-
const optionId = `addon-${addon.name.replace(/\s+/g, '')}-${index}`;
|
| 1398 |
-
const listItem = document.createElement('div');
|
| 1399 |
-
listItem.classList.add('form-check');
|
| 1400 |
-
listItem.innerHTML = `
|
| 1401 |
-
<input type="checkbox" class="form-check-input addon-option" id="${optionId}" value="${option}"
|
| 1402 |
-
data-name="${option}" data-group="${addon.name}" data-price="${addon.extra_charge ? addon.extra_charge_amount : 0}">
|
| 1403 |
-
<label class="form-check-label" for="${optionId}">
|
| 1404 |
-
${option} ${addon.extra_charge ? `($${addon.extra_charge_amount})` : ''}
|
| 1405 |
-
</label>
|
| 1406 |
-
`;
|
| 1407 |
-
optionsContainer.appendChild(listItem);
|
| 1408 |
-
});
|
| 1409 |
-
sectionDiv.appendChild(optionsContainer);
|
| 1410 |
-
addonsList.appendChild(sectionDiv);
|
| 1411 |
-
});
|
| 1412 |
-
})
|
| 1413 |
-
.catch(err => {
|
| 1414 |
-
console.error('Error fetching add-ons:', err);
|
| 1415 |
-
document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
|
| 1416 |
-
});
|
| 1417 |
-
}
|
| 1418 |
-
|
| 1419 |
-
document.addEventListener('click', function(event) {
|
| 1420 |
-
if (event.target.classList.contains('addon-option')) {
|
| 1421 |
-
handleAddonClick(event.target);
|
| 1422 |
-
}
|
| 1423 |
-
});
|
| 1424 |
-
|
| 1425 |
-
function handleAddonClick(checkbox) {
|
| 1426 |
-
const groupName = checkbox.getAttribute('data-group');
|
| 1427 |
-
const isMultiSelectGroup = ["Extra Toppings", "Choose Raita/Sides", "Select Dip/Sauce", "Extra Add-ons", "Make it a Combo", "Beverages", "Sauces"].includes(groupName);
|
| 1428 |
-
if (!isMultiSelectGroup) {
|
| 1429 |
-
const checkboxes = document.querySelectorAll(`.addon-option[data-group="${groupName}"]`);
|
| 1430 |
-
checkboxes.forEach(otherCheckbox => {
|
| 1431 |
-
if (otherCheckbox !== checkbox) {
|
| 1432 |
-
otherCheckbox.checked = false;
|
| 1433 |
-
}
|
| 1434 |
-
});
|
| 1435 |
-
}
|
| 1436 |
-
}
|
| 1437 |
-
|
| 1438 |
-
function addToCartFromModal() {
|
| 1439 |
-
const itemName = document.getElementById('modal-name').innerText;
|
| 1440 |
-
let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
|
| 1441 |
-
if (isNaN(itemPrice)) {
|
| 1442 |
-
alert('Invalid price for the item. Please check the item details.');
|
| 1443 |
-
return;
|
| 1444 |
-
}
|
| 1445 |
-
const itemImage = document.getElementById('modal-img').src;
|
| 1446 |
-
const modalSectionEl = document.getElementById('modal-section');
|
| 1447 |
-
const section = modalSectionEl.getAttribute('data-section');
|
| 1448 |
-
const selectedCategory = modalSectionEl.getAttribute('data-category');
|
| 1449 |
-
if (!itemName || !itemPrice || !section || !itemImage) {
|
| 1450 |
-
console.error('Missing data for cart item:', { itemName, itemPrice, section, itemImage });
|
| 1451 |
-
return;
|
| 1452 |
-
}
|
| 1453 |
-
const selectedAddOns = Array.from(
|
| 1454 |
-
document.querySelectorAll('#addons-list input[type="checkbox"]:checked')
|
| 1455 |
-
).map(addon => ({
|
| 1456 |
-
name: addon.getAttribute('data-name'),
|
| 1457 |
-
price: parseFloat(addon.getAttribute('data-price')) || 0
|
| 1458 |
-
}));
|
| 1459 |
-
const instructions = document.getElementById('modal-instructions').value;
|
| 1460 |
-
const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
|
| 1461 |
-
if (isProcessingRequest) return;
|
| 1462 |
-
isProcessingRequest = true;
|
| 1463 |
-
const cartPayload = {
|
| 1464 |
-
itemName: itemName,
|
| 1465 |
-
itemPrice: itemPrice,
|
| 1466 |
-
itemImage: itemImage,
|
| 1467 |
-
section: section,
|
| 1468 |
-
category: selectedCategory,
|
| 1469 |
-
addons: selectedAddOns,
|
| 1470 |
-
instructions: instructions,
|
| 1471 |
-
quantity: quantity
|
| 1472 |
-
};
|
| 1473 |
-
fetch('/cart/add', {
|
| 1474 |
-
method: 'POST',
|
| 1475 |
-
headers: {
|
| 1476 |
-
'Content-Type': 'application/json',
|
| 1477 |
-
},
|
| 1478 |
-
body: JSON.stringify(cartPayload)
|
| 1479 |
-
})
|
| 1480 |
-
.then(response => response.json())
|
| 1481 |
-
.then(data => {
|
| 1482 |
-
if (data.success) {
|
| 1483 |
-
updateCartUI(data.cart);
|
| 1484 |
-
const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
|
| 1485 |
-
modal.hide();
|
| 1486 |
-
} else {
|
| 1487 |
-
console.error('Failed to add item to cart:', data.error);
|
| 1488 |
-
const cart = addToCartLocalStorage(cartPayload);
|
| 1489 |
-
updateCartUI(cart);
|
| 1490 |
-
const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
|
| 1491 |
-
modal.hide();
|
| 1492 |
-
}
|
| 1493 |
-
})
|
| 1494 |
-
.catch(err => {
|
| 1495 |
-
console.error('Error adding item to cart:', err);
|
| 1496 |
-
const cart = addToCartLocalStorage(cartPayload);
|
| 1497 |
-
updateCartUI(cart);
|
| 1498 |
-
const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
|
| 1499 |
-
modal.hide();
|
| 1500 |
-
})
|
| 1501 |
-
.finally(() => {
|
| 1502 |
-
isProcessingRequest = false;
|
| 1503 |
-
});
|
| 1504 |
-
}
|
| 1505 |
</script>
|
| 1506 |
</body>
|
| 1507 |
</html>
|
|
|
|
| 135 |
top: 50%;
|
| 136 |
transform: translateY(-50%);
|
| 137 |
display: flex;
|
| 138 |
+
align-items: center;
|
| 139 |
justify-content: center;
|
| 140 |
}
|
| 141 |
.avatar-icon {
|
|
|
|
| 264 |
position: relative;
|
| 265 |
margin-right: 10px;
|
| 266 |
}
|
| 267 |
+
.addon-section .form-check-input[type="radio"] {
|
| 268 |
+
border-radius: 50%;
|
| 269 |
+
}
|
| 270 |
.addon-section .form-check-input:checked {
|
| 271 |
background-color: #006400;
|
| 272 |
border-color: #006400;
|
|
|
|
| 279 |
left: 4px;
|
| 280 |
color: white;
|
| 281 |
}
|
| 282 |
+
.addon-section .form-check-input[type="radio"]:checked::before {
|
| 283 |
+
content: '';
|
| 284 |
+
width: 12px;
|
| 285 |
+
height: 12px;
|
| 286 |
+
border-radius: 50%;
|
| 287 |
+
background-color: #006400;
|
| 288 |
+
position: absolute;
|
| 289 |
+
top: 4px;
|
| 290 |
+
left: 4px;
|
| 291 |
+
}
|
| 292 |
.addon-section .form-check-label {
|
| 293 |
font-size: 16px;
|
| 294 |
margin-left: 5px;
|
|
|
|
| 743 |
</style>
|
| 744 |
</head>
|
| 745 |
<body>
|
|
|
|
| 746 |
<div class="fixed-top-bar">
|
| 747 |
<div class="avatar-dropdown-container">
|
| 748 |
<div class="avatar-icon">
|
|
|
|
| 798 |
<div class="row">
|
| 799 |
{% for item in items %}
|
| 800 |
<div class="col-md-6 mb-4">
|
| 801 |
+
<div class="card menu-card" data-item-name="{{ item.Name | default('Unnamed Item') }}" data-item-section="{{ item.Section__c | default(section) }}">
|
| 802 |
<video
|
| 803 |
class="card-img-top menu-video"
|
| 804 |
muted
|
|
|
|
| 826 |
data-item-price="{{ item.Price__c | default('0.00') }}"
|
| 827 |
data-item-image="{{ item.Image1__c | default('/static/placeholder.jpg') }}"
|
| 828 |
data-item-section="{{ item.Section__c | default(section) }}"
|
| 829 |
+
data-item-category="{{ selected_category }}"
|
| 830 |
+
data-item-description="{{ item.Description__c | default('No description') }}"
|
| 831 |
+
data-item-image2="{{ item.Image2__c | default(item.Image1__c) }}">
|
| 832 |
{% if item.Section__c == 'Soft Drinks' %}
|
| 833 |
<button class="btn btn-primary add-to-cart-btn" onclick="showSoftDrinkModal(this)">ADD</button>
|
| 834 |
{% else %}
|
|
|
|
| 1103 |
}
|
| 1104 |
}
|
| 1105 |
|
| 1106 |
+
function showItemDetails(name, price, image, description, section, selectedCategory) {
|
| 1107 |
+
document.getElementById('modal-name').innerText = name;
|
| 1108 |
+
document.getElementById('modal-price').innerText = `$${price}`;
|
| 1109 |
+
const modalImg = document.getElementById('modal-img');
|
| 1110 |
+
modalImg.src = image || '/static/placeholder.jpg';
|
| 1111 |
+
document.getElementById('modal-description').innerText = description || 'No description available.';
|
| 1112 |
+
document.getElementById('addons-list').innerHTML = 'Loading customization options...';
|
| 1113 |
+
document.getElementById('modal-instructions').value = '';
|
| 1114 |
+
const modalSectionEl = document.getElementById('modal-section');
|
| 1115 |
+
modalSectionEl.setAttribute('data-section', section);
|
| 1116 |
+
modalSectionEl.setAttribute('data-category', selectedCategory);
|
| 1117 |
+
document.getElementById('quantityInput').value = 1;
|
| 1118 |
+
|
| 1119 |
+
fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
|
| 1120 |
+
.then(response => response.json())
|
| 1121 |
+
.then(data => {
|
| 1122 |
+
const addonsList = document.getElementById('addons-list');
|
| 1123 |
+
addonsList.innerHTML = '';
|
| 1124 |
+
if (!data.success || !data.addons || data.addons.length === 0) {
|
| 1125 |
+
addonsList.innerHTML = '<p>No customization options available.</p>';
|
| 1126 |
+
return;
|
| 1127 |
+
}
|
| 1128 |
+
data.addons.forEach(addon => {
|
| 1129 |
+
const sectionDiv = document.createElement('div');
|
| 1130 |
+
sectionDiv.classList.add('addon-section');
|
| 1131 |
+
const title = document.createElement('h6');
|
| 1132 |
+
title.innerText = addon.name;
|
| 1133 |
+
sectionDiv.appendChild(title);
|
| 1134 |
+
const optionsContainer = document.createElement('div');
|
| 1135 |
+
addon.options.forEach((option, index) => {
|
| 1136 |
+
const optionId = `addon-${addon.name.replace(/\s+/g, '-')}-${index}`;
|
| 1137 |
+
const formCheck = document.createElement('div');
|
| 1138 |
+
formCheck.classList.add('form-check');
|
| 1139 |
+
const input = document.createElement('input');
|
| 1140 |
+
input.classList.add('form-check-input');
|
| 1141 |
+
input.type = addon.multi_select ? 'checkbox' : 'radio';
|
| 1142 |
+
input.name = addon.multi_select ? optionId : addon.name.replace(/\s+/g, '-');
|
| 1143 |
+
input.id = optionId;
|
| 1144 |
+
input.value = option.name;
|
| 1145 |
+
input.dataset.price = option.price || 0;
|
| 1146 |
+
const label = document.createElement('label');
|
| 1147 |
+
label.classList.add('form-check-label');
|
| 1148 |
+
label.htmlFor = optionId;
|
| 1149 |
+
label.innerText = `${option.name} ${option.price ? `(+$${option.price})` : ''}`;
|
| 1150 |
+
formCheck.appendChild(input);
|
| 1151 |
+
formCheck.appendChild(label);
|
| 1152 |
+
optionsContainer.appendChild(formCheck);
|
| 1153 |
+
});
|
| 1154 |
+
sectionDiv.appendChild(optionsContainer);
|
| 1155 |
+
addonsList.appendChild(sectionDiv);
|
| 1156 |
+
});
|
| 1157 |
+
})
|
| 1158 |
+
.catch(err => {
|
| 1159 |
+
console.error('Error fetching addons:', err);
|
| 1160 |
+
document.getElementById('addons-list').innerHTML = '<p>Error loading customization options.</p>';
|
| 1161 |
+
});
|
| 1162 |
+
}
|
| 1163 |
+
|
| 1164 |
+
function addToCartFromModal() {
|
| 1165 |
+
if (isProcessingRequest) return;
|
| 1166 |
+
isProcessingRequest = true;
|
| 1167 |
+
|
| 1168 |
+
const modalSectionEl = document.getElementById('modal-section');
|
| 1169 |
+
const section = modalSectionEl.getAttribute('data-section');
|
| 1170 |
+
const selectedCategory = modalSectionEl.getAttribute('data-category');
|
| 1171 |
+
const itemName = document.getElementById('modal-name').innerText;
|
| 1172 |
+
const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')) || 0;
|
| 1173 |
+
const itemImage = document.getElementById('modal-img').src;
|
| 1174 |
+
const quantity = parseInt(document.getElementById('quantityInput').value) || 1;
|
| 1175 |
+
const instructions = document.getElementById('modal-instructions').value;
|
| 1176 |
+
|
| 1177 |
+
const addons = [];
|
| 1178 |
+
const addonInputs = document.querySelectorAll('#addons-list .form-check-input:checked');
|
| 1179 |
+
addonInputs.forEach(input => {
|
| 1180 |
+
addons.push({
|
| 1181 |
+
name: input.value,
|
| 1182 |
+
price: parseFloat(input.dataset.price) || 0
|
| 1183 |
+
});
|
| 1184 |
+
});
|
| 1185 |
+
|
| 1186 |
+
const cartPayload = {
|
| 1187 |
+
itemName: itemName,
|
| 1188 |
+
itemPrice: itemPrice,
|
| 1189 |
+
itemImage: itemImage,
|
| 1190 |
+
section: section,
|
| 1191 |
+
category: selectedCategory,
|
| 1192 |
+
addons: addons,
|
| 1193 |
+
instructions: instructions,
|
| 1194 |
+
quantity: quantity
|
| 1195 |
+
};
|
| 1196 |
+
|
| 1197 |
+
fetch('/cart/add', {
|
| 1198 |
+
method: 'POST',
|
| 1199 |
+
headers: {
|
| 1200 |
+
'Content-Type': 'application/json',
|
| 1201 |
+
},
|
| 1202 |
+
body: JSON.stringify(cartPayload)
|
| 1203 |
+
})
|
| 1204 |
+
.then(response => response.json())
|
| 1205 |
+
.then(data => {
|
| 1206 |
+
if (data.success) {
|
| 1207 |
+
updateCartUI(data.cart);
|
| 1208 |
+
const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
|
| 1209 |
+
modal.hide();
|
| 1210 |
+
} else {
|
| 1211 |
+
console.error('Failed to add item to cart:', data.error);
|
| 1212 |
+
const cart = addToCartLocalStorage(cartPayload);
|
| 1213 |
+
updateCartUI(cart);
|
| 1214 |
+
const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
|
| 1215 |
+
modal.hide();
|
| 1216 |
+
}
|
| 1217 |
+
})
|
| 1218 |
+
.catch(err => {
|
| 1219 |
+
console.error('Error adding item to cart:', err);
|
| 1220 |
+
const cart = addToCartLocalStorage(cartPayload);
|
| 1221 |
+
updateCartUI(cart);
|
| 1222 |
+
const modal = bootstrap.Modal.getInstance(document.getElementById('itemModal'));
|
| 1223 |
+
modal.hide();
|
| 1224 |
+
})
|
| 1225 |
+
.finally(() => {
|
| 1226 |
+
isProcessingRequest = false;
|
| 1227 |
+
});
|
| 1228 |
+
}
|
| 1229 |
+
|
| 1230 |
document.addEventListener('DOMContentLoaded', function () {
|
| 1231 |
// Avatar Dropdown
|
| 1232 |
const avatarContainer = document.querySelector('.avatar-dropdown-container');
|
|
|
|
| 1253 |
window.location.href = '/search';
|
| 1254 |
});
|
| 1255 |
|
| 1256 |
+
// Auto-open modal for selected item
|
| 1257 |
const selectedItem = localStorage.getItem('selectedItem');
|
| 1258 |
if (selectedItem) {
|
| 1259 |
+
try {
|
| 1260 |
+
const { name, section } = JSON.parse(selectedItem);
|
| 1261 |
+
const menuCards = document.querySelectorAll('.menu-card');
|
| 1262 |
+
let targetCard = null;
|
| 1263 |
+
let buttonContainer = null;
|
| 1264 |
+
|
| 1265 |
+
menuCards.forEach(card => {
|
| 1266 |
+
const itemName = card.getAttribute('data-item-name');
|
| 1267 |
+
const itemSection = card.getAttribute('data-item-section');
|
| 1268 |
+
if (itemName === name && itemSection === section) {
|
| 1269 |
+
targetCard = card;
|
| 1270 |
+
buttonContainer = card.querySelector('.button-container');
|
| 1271 |
+
card.classList.add('highlighted');
|
| 1272 |
+
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
| 1273 |
+
const toggleLink = card.querySelector('.toggle-details');
|
| 1274 |
+
if (toggleLink) {
|
| 1275 |
+
toggleLink.click();
|
| 1276 |
+
}
|
| 1277 |
+
}
|
| 1278 |
+
});
|
| 1279 |
+
|
| 1280 |
+
if (buttonContainer) {
|
| 1281 |
+
if (section === 'Soft Drinks') {
|
| 1282 |
+
showSoftDrinkModal(buttonContainer.querySelector('.add-to-cart-btn'));
|
| 1283 |
+
} else {
|
| 1284 |
+
const name = buttonContainer.getAttribute('data-item-name');
|
| 1285 |
+
const price = buttonContainer.getAttribute('data-item-price');
|
| 1286 |
+
const image = buttonContainer.getAttribute('data-item-image2');
|
| 1287 |
+
const description = buttonContainer.getAttribute('data-item-description');
|
| 1288 |
+
const category = buttonContainer.getAttribute('data-item-category');
|
| 1289 |
+
showItemDetails(name, price, image, description, section, category);
|
| 1290 |
+
const modal = new bootstrap.Modal(document.getElementById('itemModal'));
|
| 1291 |
+
modal.show();
|
| 1292 |
}
|
| 1293 |
}
|
| 1294 |
+
} catch (err) {
|
| 1295 |
+
console.error('Error parsing selected item:', err);
|
| 1296 |
+
}
|
| 1297 |
localStorage.removeItem('selectedItem');
|
| 1298 |
}
|
| 1299 |
|
|
|
|
| 1527 |
micIcon.style.display = 'none';
|
| 1528 |
}
|
| 1529 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1530 |
</script>
|
| 1531 |
</body>
|
| 1532 |
</html>
|