Update templates/menu.html
Browse files- templates/menu.html +23 -7
templates/menu.html
CHANGED
@@ -591,7 +591,9 @@ form-check-input addon-option{
|
|
591 |
|
592 |
<!-- JavaScript -->
|
593 |
<script>
|
|
|
594 |
// Show item details and fetch customization options
|
|
|
595 |
function showItemDetails(name, price, image, description, section, selectedCategory) {
|
596 |
document.getElementById('modal-name').innerText = name;
|
597 |
document.getElementById('modal-price').innerText = `$${price}`;
|
@@ -602,30 +604,31 @@ form-check-input addon-option{
|
|
602 |
const modalSectionEl = document.getElementById('modal-section');
|
603 |
modalSectionEl.setAttribute('data-section', section);
|
604 |
modalSectionEl.setAttribute('data-category', selectedCategory);
|
605 |
-
|
606 |
-
|
607 |
-
|
|
|
608 |
// Fetch customization options based on the section
|
609 |
fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
|
610 |
.then(response => response.json())
|
611 |
-
|
612 |
const addonsList = document.getElementById('addons-list');
|
613 |
addonsList.innerHTML = ''; // Clear previous content
|
614 |
if (!data.success || !data.addons || data.addons.length === 0) {
|
615 |
addonsList.innerHTML = '<p>No customization options available.</p>';
|
616 |
return;
|
617 |
}
|
618 |
-
|
619 |
// Display customization options inside styled divs
|
620 |
data.addons.forEach(addon => {
|
621 |
const sectionDiv = document.createElement('div');
|
622 |
sectionDiv.classList.add('addon-section'); // Add styling class
|
623 |
-
|
624 |
// Add section title
|
625 |
const title = document.createElement('h6');
|
626 |
title.innerText = addon.name;
|
627 |
sectionDiv.appendChild(title);
|
628 |
-
|
629 |
// Create options list
|
630 |
const optionsContainer = document.createElement('div');
|
631 |
addon.options.forEach((option, index) => {
|
@@ -644,6 +647,18 @@ form-check-input addon-option{
|
|
644 |
sectionDiv.appendChild(optionsContainer);
|
645 |
addonsList.appendChild(sectionDiv);
|
646 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
647 |
})
|
648 |
.catch(err => {
|
649 |
console.error('Error fetching add-ons:', err);
|
@@ -652,6 +667,7 @@ form-check-input addon-option{
|
|
652 |
}
|
653 |
|
654 |
|
|
|
655 |
function handleToggle(source) {
|
656 |
const form = document.getElementById("filter-form");
|
657 |
const veg = document.getElementById("veg-toggle");
|
|
|
591 |
|
592 |
<!-- JavaScript -->
|
593 |
<script>
|
594 |
+
|
595 |
// Show item details and fetch customization options
|
596 |
+
// Show item details and fetch customization options
|
597 |
function showItemDetails(name, price, image, description, section, selectedCategory) {
|
598 |
document.getElementById('modal-name').innerText = name;
|
599 |
document.getElementById('modal-price').innerText = `$${price}`;
|
|
|
604 |
const modalSectionEl = document.getElementById('modal-section');
|
605 |
modalSectionEl.setAttribute('data-section', section);
|
606 |
modalSectionEl.setAttribute('data-category', selectedCategory);
|
607 |
+
|
608 |
+
// Set the default quantity to 1
|
609 |
+
document.getElementById('quantityInput').value = 1;
|
610 |
+
|
611 |
// Fetch customization options based on the section
|
612 |
fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
|
613 |
.then(response => response.json())
|
614 |
+
.then(data => {
|
615 |
const addonsList = document.getElementById('addons-list');
|
616 |
addonsList.innerHTML = ''; // Clear previous content
|
617 |
if (!data.success || !data.addons || data.addons.length === 0) {
|
618 |
addonsList.innerHTML = '<p>No customization options available.</p>';
|
619 |
return;
|
620 |
}
|
621 |
+
|
622 |
// Display customization options inside styled divs
|
623 |
data.addons.forEach(addon => {
|
624 |
const sectionDiv = document.createElement('div');
|
625 |
sectionDiv.classList.add('addon-section'); // Add styling class
|
626 |
+
|
627 |
// Add section title
|
628 |
const title = document.createElement('h6');
|
629 |
title.innerText = addon.name;
|
630 |
sectionDiv.appendChild(title);
|
631 |
+
|
632 |
// Create options list
|
633 |
const optionsContainer = document.createElement('div');
|
634 |
addon.options.forEach((option, index) => {
|
|
|
647 |
sectionDiv.appendChild(optionsContainer);
|
648 |
addonsList.appendChild(sectionDiv);
|
649 |
});
|
650 |
+
|
651 |
+
// Pre-select the most common add-ons (if any)
|
652 |
+
if (window.most_common_addons && window.most_common_addons.length > 0) {
|
653 |
+
const checkboxes = document.querySelectorAll('.addon-option');
|
654 |
+
checkboxes.forEach(checkbox => {
|
655 |
+
const checkboxName = checkbox.getAttribute('data-name');
|
656 |
+
// If the checkbox option is one of the most common add-ons, select it
|
657 |
+
if (window.most_common_addons.includes(checkboxName)) {
|
658 |
+
checkbox.checked = true;
|
659 |
+
}
|
660 |
+
});
|
661 |
+
}
|
662 |
})
|
663 |
.catch(err => {
|
664 |
console.error('Error fetching add-ons:', err);
|
|
|
667 |
}
|
668 |
|
669 |
|
670 |
+
|
671 |
function handleToggle(source) {
|
672 |
const form = document.getElementById("filter-form");
|
673 |
const veg = document.getElementById("veg-toggle");
|