114 lines
4.5 KiB
Smarty
114 lines
4.5 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
|
|
|
|
// 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.
|
|
|
|
});
|
|
</script>
|
|
{/literal} |