fix latest fixes

views/templates/hook/breadcrumb_price_display_switcher.tpl

@@ -1,16 +1,10 @@
 {*
  * Price Display Toggle Template
- *
  * Module: B2bpayments
- * Author: Panariga
+ *}
- *
- * Provides a select element to switch between showing VPC, MPC, or both prices.
- * Saves the user's preference in localStorage.
-*}
 <div class="price-display-switcher">
   <div id="price-display-switcher" class="payments-selection">
     <select id="priceDisplayToggle" name="price_display_preference" class="custom-select">
-      {* Default option, selected if nothing is stored or if 'both' is stored *}
       <option value="both">{l s='Show VPC & MPC' d='Modules.B2bpayments.ShopBreadcrumb'}</option>
       <option value="vpc">{l s='Show VPC only (B2B)' d='Modules.B2bpayments.ShopBreadcrumb'}</option>
       <option value="mpc">{l s='Show MPC only (B2C)' d='Modules.B2bpayments.ShopBreadcrumb'}</option>
@@ -19,104 +13,126 @@
 </div>
 
 {literal}
-  <script>
+<script>
-    document.addEventListener('DOMContentLoaded', function() {
+  // Define functions in a way that they are accessible when needed.
+  const b2bStorageKey = 'priceDisplayPreference';
 
-      const priceToggleSelect = document.getElementById('priceDisplayToggle');
+  /**
-      const storageKey = 'priceDisplayPreference'; // Key for localStorage
+   * Main logic to hide/show prices.
+   * It queries the DOM every time it runs to handle AJAX-injected elements.
+   * @param {string} preference - The user's choice ('vpc', 'mpc', 'both').
+   */
+  function b2bApplyPriceVisibility(preference) {
+    const vpcElements = document.querySelectorAll('.vpcrender');
+    const mpcElements = document.querySelectorAll('.mpcrender');
 
-      // --- Core Functions ---
+    const pref = preference || 'both';
-
-      // Function to apply visibility based on preference
-      function applyPriceVisibility(preference) {
-        const vpcElements = document.querySelectorAll('.vpcrender');
-        const mpcElements = document.querySelectorAll('.mpcrender');
-
-        switch (preference) {
-          case 'vpc':
-            // Show VPC, Hide MPC
-            vpcElements.forEach(el => el.style.display = ''); 
-            mpcElements.forEach(el => el.style.display = 'none');
-            break;
-          case 'mpc':
-            // Hide VPC, Show MPC
-            vpcElements.forEach(el => el.style.display = 'none');
-            mpcElements.forEach(el => el.style.display = ''); 
-            break;
-          case 'both':
-          default:
-            // Show Both
-            vpcElements.forEach(el => el.style.display = ''); 
-            mpcElements.forEach(el => el.style.display = ''); 
-            break;
-        }
-      }
-
-      // Function to save preference to localStorage
-      function savePreference(preference) {
-        try {
-          localStorage.setItem(storageKey, preference);
-        } catch (e) {
-          console.error('Failed to save preference to localStorage:', e);
-        }
-      }
-
-      // Function to load preference from localStorage
-      function loadPreference() {
-        try {
-          return localStorage.getItem(storageKey);
-        } catch (e) {
-          return null; 
-        }
-      }
-
-      // --- Initialization Logic ---
-
-      function initSwitcher() {
-        if (!priceToggleSelect) return;
-
-        // 1. Load saved preference or use default
-        const savedPreference = loadPreference();
-        const currentPreference = (savedPreference && ['both', 'vpc', 'mpc'].includes(savedPreference)) 
-                                  ? savedPreference 
-                                  : (priceToggleSelect.value || 'both');
-
-        // 2. Sync Select Element and Apply
-        priceToggleSelect.value = currentPreference;
-        applyPriceVisibility(currentPreference);
-      }
-
-      // --- Event Listeners ---
-
-      if (priceToggleSelect) {
-        // Initial Load
-        initSwitcher();
-
-        // User changes the select dropdown
-        priceToggleSelect.addEventListener('change', function(event) {
-          const selectedPreference = event.target.value;
-          applyPriceVisibility(selectedPreference);
-          savePreference(selectedPreference);
-        });
-      }
-
-      // Hook into PrestaShop Events
-
-      // 1. Product Page: Attribute update (e.g. Size S -> Size L)
-      prestashop.on('updatedProduct', function(updatedData) {
-        if(priceToggleSelect) {
-            applyPriceVisibility(priceToggleSelect.value);
-        }
-      });
-
-      // 2. Category/List Page: AJAX Pagination, Sorting, Filter update
-      prestashop.on('updateProductList', function(data) {
-        if(priceToggleSelect) {
-            // Re-apply the current value of the select box to the newly injected DOM elements
-            applyPriceVisibility(priceToggleSelect.value);
-        }
-      });
 
+    vpcElements.forEach(el => {
+      el.style.display = (pref === 'mpc') ? 'none' : '';
     });
-  </script>
+    mpcElements.forEach(el => {
+      el.style.display = (pref === 'vpc') ? 'none' : '';
+    });
+  }
+
+  /**
+   * Saves the user's preference to localStorage.
+   * @param {string} preference
+   */
+  function b2bSavePreference(preference) {
+    try {
+      localStorage.setItem(b2bStorageKey, preference);
+    } catch (e) {
+      console.error('B2B Payments: LocalStorage is not available.', e);
+    }
+  }
+
+  /**
+   * Loads the user's preference from localStorage.
+   * @returns {string|null}
+   */
+  function b2bLoadPreference() {
+    try {
+      return localStorage.getItem(b2bStorageKey);
+    } catch (e) {
+      console.error('B2B Payments: LocalStorage is not available.', e);
+      return null;
+    }
+  }
+
+  /**
+   * Determines the current price display preference.
+   * @returns {string}
+   */
+  function b2bGetCurrentPreference() {
+    const saved = b2bLoadPreference();
+    if (['both', 'vpc', 'mpc'].includes(saved)) {
+      return saved;
+    }
+    // Fallback to the dropdown's current value if it exists, otherwise default.
+    const toggle = document.getElementById('priceDisplayToggle');
+    return toggle ? toggle.value : 'both';
+  }
+
+  /**
+   * Initializes PrestaShop-specific event listeners.
+   * This function should only be called after the 'prestashop' object is available.
+   */
+  function initPrestaShopListeners() {
+    console.log('B2B Payments: Attaching PrestaShop listeners.');
+
+    // Event for faceted search, pagination, and sorting updates.
+    prestashop.on('updateProductList', (data) => {
+      console.log('B2B Payments: updateProductList event triggered.');
+      const currentPref = b2bGetCurrentPreference();
+      // Use a small timeout to ensure the DOM is fully updated by the theme.
+      setTimeout(() => b2bApplyPriceVisibility(currentPref), 50);
+    });
+
+    // Event for product variant changes on the product page.
+    prestashop.on('updatedProduct', (data) => {
+      console.log('B2B Payments: updatedProduct event triggered.');
+      const currentPref = b2bGetCurrentPreference();
+      setTimeout(() => b2bApplyPriceVisibility(currentPref), 50);
+    });
+  }
+
+  // --- Main Execution ---
+
+  // This event fires after the initial HTML document has been completely loaded and parsed,
+  // without waiting for stylesheets, images, and subframes to finish loading.
+  document.addEventListener('DOMContentLoaded', () => {
+    const priceToggleSelect = document.getElementById('priceDisplayToggle');
+    const currentPref = b2bGetCurrentPreference();
+
+    // 1. Apply the preference on initial page load.
+    b2bApplyPriceVisibility(currentPref);
+
+    // 2. Setup the dropdown listener if it exists.
+    if (priceToggleSelect) {
+      priceToggleSelect.value = currentPref; // Sync dropdown
+      priceToggleSelect.addEventListener('change', (event) => {
+        const selectedPreference = event.target.value;
+        b2bSavePreference(selectedPreference);
+        b2bApplyPriceVisibility(selectedPreference);
+      });
+    }
+
+    // 3. Wait for PrestaShop's core JS to be ready.
+    // The 'prestashop' object is often not ready right at DOMContentLoaded.
+    // A robust way is to poll for it.
+    let attempts = 0;
+    const psReadyCheck = setInterval(() => {
+      if (typeof prestashop !== 'undefined' && prestashop.on) {
+        clearInterval(psReadyCheck); // Stop polling
+        initPrestaShopListeners();   // Initialize listeners
+      } else if (attempts > 50) { // Stop trying after ~5 seconds
+        clearInterval(psReadyCheck);
+        console.warn('B2B Payments: PrestaShop object was not found.');
+      }
+      attempts++;
+    }, 100);
+  });
+</script>
 {/literal}