style updates

views/templates/hook/breadcrumb_price_display_switcher.tpl

@@ -0,0 +1,113 @@
+{*
+ * 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>
+    </select>
+  </div>
+</div>
+
+{literal}
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+
+      const priceToggleSelect = document.getElementById('priceDisplayToggle');
+      const vpcElements = document.querySelectorAll('.vpcrender');
+      const mpcElements = document.querySelectorAll('.mpcrender');
+      const storageKey = 'priceDisplayPreference'; // Key for localStorage
+
+      // Function to apply visibility based on preference
+      function applyPriceVisibility(preference) {
+        console.log('Applying preference:', preference); // For debugging
+        console.log('Found VPC elements:', vpcElements.length); // For debugging
+        console.log('Found MPC elements:', mpcElements.length); // For debugging
+
+        switch (preference) {
+          case 'vpc':
+            // Show VPC, Hide MPC
+            vpcElements.forEach(el => el.style.display = ''); // Reset to default display (usually block or inline)
+            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 = ''); // Reset to default display
+            break;
+          case 'both':
+          default:
+            // Show Both
+            vpcElements.forEach(el => el.style.display = ''); // Reset to default display
+            mpcElements.forEach(el => el.style.display = ''); // Reset to default display
+            break;
+        }
+      }
+
+      // Function to save preference to localStorage
+      function savePreference(preference) {
+        try {
+          localStorage.setItem(storageKey, preference);
+          console.log('Saved preference:', preference); // For debugging
+        } catch (e) {
+          console.error('Failed to save preference to localStorage:', e);
+          // LocalStorage might be disabled or full
+        }
+      }
+
+      // Function to load preference from localStorage
+      function loadPreference() {
+        try {
+          return localStorage.getItem(storageKey);
+        } catch (e) {
+          console.error('Failed to load preference from localStorage:', e);
+          return null; // Return null if localStorage is inaccessible
+        }
+      }
+
+      // --- Initialization ---
+
+      if (priceToggleSelect) {
+        // 1. Load saved preference
+        const savedPreference = loadPreference();
+
+        // 2. Set the select element's value and apply visibility
+      if (savedPreference && ['both', 'vpc', 'mpc'].includes(savedPreference)) {
+        priceToggleSelect.value = savedPreference;
+        applyPriceVisibility(savedPreference);
+      } else {
+        // No valid saved preference, use the default value from the select element
+        const initialPreference = priceToggleSelect.value || 'both'; // Fallback to 'both'
+        applyPriceVisibility(initialPreference);
+        // Optionally save the default if nothing was stored
+        // savePreference(initialPreference);
+      }
+
+      // 3. Add event listener for changes
+      priceToggleSelect.addEventListener('change', function(event) {
+        const selectedPreference = event.target.value;
+        applyPriceVisibility(selectedPreference);
+        savePreference(selectedPreference);
+      });
+
+    } else {
+      console.warn('Price display toggle select element (#priceDisplayToggle) not found.');
+      }
+
+      // Initial check in case elements are added dynamically later (less common for prices)
+      // If you expect prices to load via AJAX *after* DOMContentLoaded,
+      // you might need a MutationObserver or trigger applyPriceVisibility again.
+      // For standard page loads, the above should be sufficient.
+
+    });
+  </script>
+{/literal}