Add vanilla JavaScript implementation for single radio selection in payment options
- Introduced a new self-invoking function to handle radio button selection without jQuery. - Implemented visibility check for radio buttons and their labels. - Added a MutationObserver to monitor changes in the payment options section and trigger selection accordingly. - Included a fallback mechanism to ensure the selection function runs periodically.
This commit is contained in:
@@ -1179,4 +1179,51 @@ $(document).ready(function () {
|
||||
|
||||
localStorage.removeItem('selectedSize')
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// WERSJA BEZ jQuery
|
||||
(() => {
|
||||
const isVisible = (el) => {
|
||||
if (!el) return false;
|
||||
const s = getComputedStyle(el);
|
||||
if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return false;
|
||||
const r = el.getBoundingClientRect();
|
||||
return !!(r.width || r.height || el.getClientRects().length);
|
||||
};
|
||||
|
||||
const findRadios = () => {
|
||||
const container = document.querySelector('#checkout-payment-step .payment-options, .payment-options');
|
||||
if (!container) return [];
|
||||
return [...container.querySelectorAll('input[name="payment-option"][type="radio"]')]
|
||||
.filter(r => !r.disabled && isVisible(r.closest('.payment-option') || r));
|
||||
};
|
||||
|
||||
const selectSingle = () => {
|
||||
const radios = findRadios();
|
||||
if (radios.length === 1 && !radios[0].checked) {
|
||||
const r = radios[0];
|
||||
const label = document.querySelector(`label[for="${r.id}"]`);
|
||||
label ? label.click() : (r.checked = true, r.dispatchEvent(new Event('change', {bubbles:true})));
|
||||
}
|
||||
};
|
||||
|
||||
// start
|
||||
selectSingle();
|
||||
|
||||
// obserwator zmian sekcji płatności
|
||||
const target = document.querySelector('#checkout-payment-step') || document.body;
|
||||
const observer = new MutationObserver((muts) => {
|
||||
if (muts.some(m =>
|
||||
(m.target?.closest?.('.payment-options')) ||
|
||||
[...m.addedNodes].some(n => n.nodeType === 1 && (n.matches?.('.payment-options') || n.querySelector?.('.payment-options')))
|
||||
)) {
|
||||
clearTimeout(observer._t);
|
||||
observer._t = setTimeout(selectSingle, 60);
|
||||
}
|
||||
});
|
||||
observer.observe(target, { childList: true, subtree: true, attributes: true, attributeFilter: ['class','style'] });
|
||||
|
||||
// lekki fallback
|
||||
let tries = 0;
|
||||
const iv = setInterval(() => { selectSingle(); if (++tries > 20) clearInterval(iv); }, 500);
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user