Update templates/menu.html

templates/menu.html

@@ -591,7 +591,9 @@ form-check-input addon-option{
 
 <!-- JavaScript -->
 <script>
+    
    // Show item details and fetch customization options
+    // Show item details and fetch customization options
     function showItemDetails(name, price, image, description, section, selectedCategory) {
         document.getElementById('modal-name').innerText = name;
         document.getElementById('modal-price').innerText = `$${price}`;
@@ -602,30 +604,31 @@ form-check-input addon-option{
         const modalSectionEl = document.getElementById('modal-section');
         modalSectionEl.setAttribute('data-section', section);
         modalSectionEl.setAttribute('data-category', selectedCategory);
-         // Set the default quantity to 1
-             document.getElementById('quantityInput').value = 1;
-        
+    
+        // Set the default quantity to 1
+        document.getElementById('quantityInput').value = 1;
+
         // Fetch customization options based on the section
         fetch(`/api/addons?item_name=${encodeURIComponent(name)}&item_section=${encodeURIComponent(section)}`)
             .then(response => response.json())
-            .then(data => {
+        .then(data => {
                 const addonsList = document.getElementById('addons-list');
                 addonsList.innerHTML = ''; // Clear previous content
                 if (!data.success || !data.addons || data.addons.length === 0) {
                     addonsList.innerHTML = '<p>No customization options available.</p>';
                     return;
                 }
-                
+            
                 // Display customization options inside styled divs
                 data.addons.forEach(addon => {
                     const sectionDiv = document.createElement('div');
                     sectionDiv.classList.add('addon-section'); // Add styling class
-                    
+                
                     // Add section title
                     const title = document.createElement('h6');
                     title.innerText = addon.name;
                     sectionDiv.appendChild(title);
-                    
+                
                     // Create options list
                     const optionsContainer = document.createElement('div');
                     addon.options.forEach((option, index) => {
@@ -644,6 +647,18 @@ form-check-input addon-option{
                     sectionDiv.appendChild(optionsContainer);
                     addonsList.appendChild(sectionDiv);
                 });
+
+                // Pre-select the most common add-ons (if any)
+                if (window.most_common_addons && window.most_common_addons.length > 0) {
+                    const checkboxes = document.querySelectorAll('.addon-option');
+                    checkboxes.forEach(checkbox => {
+                        const checkboxName = checkbox.getAttribute('data-name');
+                        // If the checkbox option is one of the most common add-ons, select it
+                        if (window.most_common_addons.includes(checkboxName)) {
+                            checkbox.checked = true;
+                        }
+                    });
+                }
             })
             .catch(err => {
                 console.error('Error fetching add-ons:', err);
@@ -652,6 +667,7 @@ form-check-input addon-option{
     }
 
 
+
   function handleToggle(source) {
         const form = document.getElementById("filter-form");
         const veg = document.getElementById("veg-toggle");