Update templates/menu.html

templates/menu.html

@@ -9,9 +9,9 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <!-- Preload Placeholder Image -->
     <link rel="preload" href="/static/placeholder.jpg" as="image">
-    <!-- Preload First Few Menu Item Images (Example) -->
+    <!-- Preload First Few Menu Item Images -->
     {% for section, items in ordered_menu.items() %}
-        {% for item in items[:2] %} <!-- Preload images for the first 2 items in each section -->
+        {% for item in items[:2] %}
             <link rel="preload" href="{{ item.Image1__c }}" as="image">
         {% endfor %}
     {% endfor %}
@@ -35,22 +35,22 @@
             margin: auto;
             display: flex;
             flex-direction: column;
-            opacity: 0; /* Initially hidden for lazy loading */
+            opacity: 0;
             transition: opacity 0.3s ease-in-out;
         }
         .menu-card.visible {
-            opacity: 1; /* Visible when in viewport */
+            opacity: 1;
         }
         .menu-image {
             height: 200px;
             width: 100%;
             object-fit: fill;
             border-radius: 15px 15px 0 0;
-            opacity: 0; /* Initially hidden for fade-in effect */
+            opacity: 0;
             transition: opacity 0.5s ease-in-out;
         }
         .menu-image.loaded {
-            opacity: 1; /* Fade in when loaded */
+            opacity: 1;
         }
         .card-title {
             font-size: 1.2rem;
@@ -350,6 +350,42 @@
             height: 40px;
             width: 40px;
         }
+        /* New Styles for Ingredients, Nutritional Info, and Allergens */
+        .modal-ingredients, .modal-nutritional-info, .modal-allergens {
+            margin-top: 15px;
+        }
+        .modal-ingredients h6, .modal-nutritional-info h6, .modal-allergens h6 {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #343a40;
+            margin-bottom: 10px;
+        }
+        .modal-ingredients ul {
+            list-style: none;
+            padding: 0;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 5px;
+        }
+        .modal-ingredients li {
+            font-size: 0.9rem;
+            color: #6c757d;
+        }
+        .modal-nutritional-info .nutritional-grid {
+            display: flex;
+            justify-content: space-between;
+            background-color: #f8f9fa;
+            padding: 10px;
+            border-radius: 5px;
+        }
+        .modal-nutritional-info .nutritional-item {
+            font-size: 0.9rem;
+            color: #343a40;
+        }
+        .modal-allergens p {
+            font-size: 0.9rem;
+            color: #dc3545; /* Red for allergens to highlight them */
+        }
         @media (max-width: 576px) {
             .modal-dialog {
                 max-width: 98%;
@@ -362,6 +398,10 @@
                 width: 40px;
                 height: 35px;
             }
+            .modal-nutritional-info .nutritional-grid {
+                flex-direction: column;
+                gap: 5px;
+            }
         }
     </style>
 </head>
@@ -423,9 +463,7 @@
                     {% for item in items %}
                         <div class="col-md-6 mb-4">
                             <div class="card menu-card">
-                                <!-- Use <picture> for WebP with fallback -->
                                 <picture>
-                                    <!-- Assume item.Image1__c_webp is the WebP version (server-side generated) -->
                                     <source srcset="{{ item.Image1__c_webp if item.Image1__c_webp else item.Image1__c }}" type="image/webp">
                                     <img src="{{ item.Image1__c }}"
                                          srcset="{{ item.Image1__c }} 350w, {{ item.Image1__c_small if item.Image1__c_small else item.Image1__c }} 175w"
@@ -445,7 +483,7 @@
                                         <div class="d-flex flex-column align-item-center justify-content-center">
                                             <div>
                                                 <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal" 
-                                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
+                                                    onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}', '{{ selected_category }}', {{ item.Ingredients__c | tojson }}, {{ item.NutritionalInfo__c | tojson }}, {{ item.Allergens__c | tojson }})">
                                                     ADD
                                                 </button>
                                             </div>
@@ -484,6 +522,29 @@
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
 
+                    <!-- Ingredients Section -->
+                    <div class="modal-ingredients">
+                        <h6>Ingredients</h6>
+                        <ul id="modal-ingredients-list"></ul>
+                    </div>
+
+                    <!-- Nutritional Info Section -->
+                    <div class="modal-nutritional-info">
+                        <h6>Nutritional Info</h6>
+                        <div class="nutritional-grid" id="modal-nutritional-info-grid">
+                            <div class="nutritional-item" id="modal-calories"></div>
+                            <div class="nutritional-item" id="modal-protein"></div>
+                            <div class="nutritional-item" id="modal-carbs"></div>
+                            <div class="nutritional-item" id="modal-fats"></div>
+                        </div>
+                    </div>
+
+                    <!-- Allergens Section -->
+                    <div class="modal-allergens">
+                        <h6>Allergens</h6>
+                        <p id="modal-allergens-list"></p>
+                    </div>
+
                     <div id="first-row">
                         <h6 id="first-row-title" style="display: none;">Customization Options</h6>
                         <div class="addon-section">
@@ -531,7 +592,6 @@
             const menuCards = document.querySelectorAll('.menu-card');
             const menuImages = document.querySelectorAll('.menu-image');
 
-            // Observer for menu cards (to show the card when in viewport)
             const cardObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
@@ -545,13 +605,12 @@
                 threshold: 0.1
             });
 
-            // Observer for images (to add fade-in effect when loaded)
             const imageObserver = new IntersectionObserver((entries, observer) => {
                 entries.forEach(entry => {
                     if (entry.isIntersecting) {
                         const img = entry.target;
                         img.onload = () => img.classList.add('loaded');
-                        img.onerror = () => img.classList.add('loaded'); // Ensure fade-in even if image fails
+                        img.onerror = () => img.classList.add('loaded');
                         observer.unobserve(img);
                     }
                 });
@@ -574,14 +633,41 @@
             };
         }
 
-        function showItemDetails(name, price, image, description, section, selectedCategory) {
+        function showItemDetails(name, price, image, description, section, selectedCategory, ingredients, nutritionalInfo, allergens) {
             document.getElementById('modal-name').innerText = name;
-            document.getElementById('modal-price').innerText = `$${price}`;
+            document.getElementById('modal-price').innerText = `Starting from $${price}`;
             document.getElementById('modal-img').src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
 
+            // Display Ingredients
+            const ingredientsList = document.getElementById('modal-ingredients-list');
+            ingredientsList.innerHTML = '';
+            if (ingredients && ingredients.length > 0) {
+                ingredients.forEach(ingredient => {
+                    const li = document.createElement('li');
+                    li.innerText = ingredient;
+                    ingredientsList.appendChild(li);
+                });
+            } else {
+                ingredientsList.innerHTML = '<li>No ingredients listed.</li>';
+            }
+
+            // Display Nutritional Info
+            document.getElementById('modal-calories').innerText = `Calories: ${nutritionalInfo?.Calories || 'N/A'}`;
+            document.getElementById('modal-protein').innerText = `Protein: ${nutritionalInfo?.Protein || 'N/A'}`;
+            document.getElementById('modal-carbs').innerText = `Carbs: ${nutritionalInfo?.Carbs || 'N/A'}`;
+            document.getElementById('modal-fats').innerText = `Fats: ${nutritionalInfo?.Fats || 'N/A'}`;
+
+            // Display Allergens
+            const allergensList = document.getElementById('modal-allergens-list');
+            if (allergens && allergens.length > 0) {
+                allergensList.innerText = allergens.join(', ');
+            } else {
+                allergensList.innerText = 'None';
+            }
+
             const modalSectionEl = document.getElementById('modal-section');
             modalSectionEl.setAttribute('data-section', section);
             modalSectionEl.setAttribute('data-category', selectedCategory);
@@ -802,12 +888,11 @@
             });
         }
 
-        // Add Debounce to Search
         document.getElementById('searchBar').addEventListener('keyup', debounce(filterMenu, 300));
 
         function addToCartFromModal() {
             const itemName = document.getElementById('modal-name').innerText;
-            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', ''));
+            let itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('Starting from $', ''));
 
             if (isNaN(itemPrice)) {
                 alert('Invalid price for the item. Please check the item details.');