fix latest fixes
This commit is contained in:
@@ -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>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
<script>
|
||||
// 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 ---
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
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}
|
||||
Reference in New Issue
Block a user