|
|
|
|
@@ -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,100 +13,126 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{literal}
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
<script>
|
|
|
|
|
// Define functions in a way that they are accessible when needed.
|
|
|
|
|
const b2bStorageKey = 'priceDisplayPreference';
|
|
|
|
|
|
|
|
|
|
prestashop.on('updatedProduct', function(updatedData) {
|
|
|
|
|
applyPriceVisibility(priceToggleSelect.value);
|
|
|
|
|
});
|
|
|
|
|
/**
|
|
|
|
|
* 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 priceToggleSelect = document.getElementById('priceDisplayToggle');
|
|
|
|
|
|
|
|
|
|
const storageKey = 'priceDisplayPreference'; // Key for localStorage
|
|
|
|
|
|
|
|
|
|
// Function to apply visibility based on preference
|
|
|
|
|
function applyPriceVisibility(preference) {
|
|
|
|
|
const vpcElements = document.querySelectorAll('.vpcrender');
|
|
|
|
|
const mpcElements = document.querySelectorAll('.mpcrender');
|
|
|
|
|
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.
|
|
|
|
|
const pref = preference || 'both';
|
|
|
|
|
|
|
|
|
|
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}
|