b2bpayments/views/templates/hook/breadcrumb_price_display_switcher.tpl

{*
 * Price Display Toggle Template
 * Module: B2bpayments
 *}
<div class="price-display-switcher">
  <div id="price-display-switcher" class="payments-selection">
    <select id="priceDisplayToggle" name="price_display_preference" class="custom-select">
      <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>
  // Define functions in a way that they are accessible when needed.
  const b2bStorageKey = 'priceDisplayPreference';

  /**
   * 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');

    const pref = preference || 'both';

    vpcElements.forEach(el => {
      el.style.display = (pref === 'mpc') ? 'none' : '';
    });
    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}