122 lines
4.1 KiB
Smarty
122 lines
4.1 KiB
Smarty
{*
|
|
* 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 storageKey = 'priceDisplayPreference'; // Key for localStorage
|
|
|
|
// --- 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);
|
|
}
|
|
});
|
|
|
|
});
|
|
</script>
|
|
{/literal} |