Update templates/menu.html

templates/menu.html

@@ -851,7 +851,7 @@
                                                         <button class="btn btn-primary" 
                                                                 data-bs-toggle="modal" 
                                                                 data-bs-target="#itemModal" 
-                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
+                                                                onclick="showItemDetails('{{ item.Name | default('Unnamed Item') }}', '{{ item.Price__c | default('0.00') }}', '{{ item.Image2__c | default(item.Image1__c) }}', '{{ item.Description__c | default('No description') }}', '{{ item.IngredientsInfo__c | default('Not specified') }}', '{{ item.NutritionalInfo__c | default('Not available') }}', '{{ item.Allergens__c | default('None listed') }}', '{{ item.Section__c | default(section) }}', '{{ selected_category }}')">
                                                             ADD
                                                         </button>
                                                     {% endif %}
@@ -865,25 +865,14 @@
                                     {% if item.Section__c != 'Soft Drinks' %}
                                         <div class="toggle-details" data-item-name="{{ item.Name | default('Unnamed Item') }}">Show Details</div>
                                         <div class="item-details" id="details-{{ item.Name | default('unnamed-item') | replace(' ', '-') }}">
-                                            {% if item.Ingredients__c %}
-                                                <h6>Ingredients</h6>
-                                                <p>{{ item.Ingredients__c }}</p>
-                                            {% endif %}
-                                            {% if item.Description__c %}
-                                                <h6>Description</h6>
-                                                <p>{{ item.Description__c }}</p>
-                                            {% endif %}
-                                            {% if item.Nutritional_Info__c %}
-                                                <h6>Nutritional Info</h6>
-                                                <p>{{ item.Nutritional_Info__c }}</p>
-                                            {% endif %}
-                                            {% if item.Allergens__c %}
-                                                <h6>Allergens</h6>
-                                                <p>{{ item.Allergens__c }}</p>
-                                            {% endif %}
-                                            {% if not (item.Ingredients__c or item.Description__c or item.Nutritional_Info__c or item.Allergens__c) %}
-                                                <p>No details available.</p>
-                                            {% endif %}
+                                            <h6>Description</h6>
+                                            <p>{{ item.Description__c | default('No description available') }}</p>
+                                            <h6>Ingredients</h6>
+                                            <p>{{ item.IngredientsInfo__c | default('Not specified') }}</p>
+                                            <h6>Nutritional Info</h6>
+                                            <p>{{ item.NutritionalInfo__c | default('Not available') }}</p>
+                                            <h6>Allergens</h6>
+                                            <p>{{ item.Allergens__c | default('None listed') }}</p>
                                         </div>
                                     {% endif %}
                                 </div>
@@ -901,7 +890,7 @@
         </a>
         <a href="{{ url_for('cart.cart') }}" class="btn btn-view-cart">
             <i class="bi bi-cart"></i> View Cart
-            <span class="cart-icon-badge" id="cart-item-count">0</span>
+            <span class="cart-icon-badge" id="cart-item-count">{{ cart_item_count }}</span>
         </a>
     </div>
 
@@ -918,6 +907,11 @@
                     <h5 id="modal-name" class="fw-bold text-center"></h5>
                     <p id="modal-price" class="text-muted text-center"></p>
                     <p id="modal-description" class="text-secondary"></p>
+                    <div class="nutritional-info">
+                        <strong>Ingredients:</strong> <span id="modal-ingredients"></span><br>
+                        <strong>Nutrition:</strong> <span id="modal-nutrition"></span><br>
+                        <strong>Allergens:</strong> <span id="modal-allergens"></span>
+                    </div>
                     <div id="modal-addons" class="modal-addons mt-4">
                         <h6>Customization Options</h6>
                         <div id="addons-list" class="addons-container">Loading customization options...</div>
@@ -940,7 +934,7 @@
         </div>
     </div>
 
-    <!-- Modified Modal for Soft Drinks Quantity Selection -->
+    <!-- Modal for Soft Drinks Quantity Selection -->
     <div class="modal fade" id="softDrinkModal" tabindex="-1" aria-labelledby="softDrinkModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content" style="border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
@@ -1194,7 +1188,6 @@
                     const detailsDiv = document.getElementById(`details-${itemName}`);
                     const isCurrentlyShown = detailsDiv.classList.contains('show');
 
-                    // Close all other details sections
                     document.querySelectorAll('.item-details.show').forEach(otherDetails => {
                         if (otherDetails !== detailsDiv) {
                             otherDetails.classList.remove('show');
@@ -1205,7 +1198,6 @@
                         }
                     });
 
-                    // Toggle the current details section
                     if (!isCurrentlyShown) {
                         detailsDiv.classList.add('show');
                         this.innerText = 'Hide Details';
@@ -1440,12 +1432,15 @@
             }
         }
 
-        function showItemDetails(name, price, image, description, section, selectedCategory) {
+        function showItemDetails(name, price, image, description, ingredients, nutrition, allergens, section, selectedCategory) {
             document.getElementById('modal-name').innerText = name;
             document.getElementById('modal-price').innerText = `$${price}`;
             const modalImg = document.getElementById('modal-img');
             modalImg.src = image || '/static/placeholder.jpg';
             document.getElementById('modal-description').innerText = description || 'No description available.';
+            document.getElementById('modal-ingredients').innerText = ingredients || 'Not specified';
+            document.getElementById('modal-nutrition').innerText = nutrition || 'Not available';
+            document.getElementById('modal-allergens').innerText = allergens || 'None listed';
             document.getElementById('addons-list').innerHTML = 'Loading customization options...';
             document.getElementById('modal-instructions').value = '';
             const modalSectionEl = document.getElementById('modal-section');