document.addEventListener('zrx-satc-loaded', function () { const form = document.querySelector('.zrx-sticky-atc-product-form'); if (!form) { console.warn('[sticky] .zrx-sticky-atc-product-form not found'); return; } let variantContainer = form.querySelector('.zrx-sticky-atc-product-variants'); if (!variantContainer) { console.log('[sticky] Variant container not found, creating...'); variantContainer = document.createElement('span'); variantContainer.className = 'zrx-sticky-atc-product-variants'; variantContainer.innerHTML = `

`; form.appendChild(variantContainer); } const stickySelect = variantContainer.querySelector('select.zrx-sticky-atc-select'); const bundleBars = document.querySelectorAll('.kaching-bundles__bar'); if (!stickySelect || bundleBars.length === 0) { console.warn('[sticky] Missing sticky select or bundle bars'); return; } const bundleOptions = [...bundleBars].map(bar => { const titleEl = bar.querySelector('.kaching-bundles__bar-title'); const id = bar.getAttribute('data-deal-bar-id'); return titleEl && id ? { label: titleEl.textContent.trim(), value: id } : null; }).filter(Boolean); stickySelect.innerHTML = ''; bundleOptions.forEach(({ label, value }) => { const option = document.createElement('option'); option.value = value; option.textContent = label; stickySelect.appendChild(option); }); function getSelectedBundleBar() { const bar = document.querySelector('.kaching-bundles__bar--selected'); if (!bar) console.warn('[sticky] No selected bundle bar found'); return bar; } function updateStickyPricing() { const selectedBar = getSelectedBundleBar(); if (!selectedBar) return; const priceEl = selectedBar.querySelector('.kaching-bundles__bar-price'); const fullPriceEl = selectedBar.querySelector('.kaching-bundles__bar-full-price'); console.log('[sticky] Price:', priceEl?.textContent?.trim()); console.log('[sticky] Full price:', fullPriceEl?.textContent?.trim()); const stickyPriceEl = form.querySelector('.zrx-sticky-atc-product-price'); const stickyCompareEl = form.querySelector('.zrx-sticky-atc-compare-price'); if (stickyPriceEl && priceEl) { stickyPriceEl.textContent = priceEl.textContent.trim(); } if (stickyCompareEl && fullPriceEl) { stickyCompareEl.textContent = fullPriceEl.textContent.trim(); } } function syncStickyToBundle(value) { const targetRadio = document.querySelector(`.kaching-bundles__bar input[type="radio"][value="${value}"]`); if (targetRadio) { const bar = targetRadio.closest('.kaching-bundles__bar'); const label = bar?.querySelector('label'); if (!targetRadio.checked) { targetRadio.checked = true; targetRadio.dispatchEvent(new Event('change', { bubbles: true })); label?.click(); } else { label?.click(); } setTimeout(() => { syncBundleToSticky(); updateStickyPricing(); }, 100); } } function syncBundleToSticky() { const selectedBar = getSelectedBundleBar(); if (!selectedBar) return; const selectedId = selectedBar.getAttribute('data-deal-bar-id'); if (stickySelect.value !== selectedId) { console.log('[sticky] Updating sticky select value to:', selectedId); stickySelect.value = selectedId; } updateStickyPricing(); } stickySelect.addEventListener('change', () => { console.log('[sticky] Dropdown changed to:', stickySelect.value); syncStickyToBundle(stickySelect.value); }); bundleBars.forEach(bar => { const radio = bar.querySelector('input[type="radio"]'); if (radio) { radio.addEventListener('change', () => { if (radio.checked) { console.log('[sticky] Radio changed to:', radio.value); syncBundleToSticky(); } }); } }); function enforceStickyPriceSync() { const stickyWrapper = form.querySelector('.zrx-sticky-atc-product-price-wrapper'); if (!stickyWrapper) { console.warn('[sticky] Price wrapper not found for MutationObserver'); return; } const stickyPriceEl = stickyWrapper.querySelector('.zrx-sticky-atc-product-price'); const stickyCompareEl = stickyWrapper.querySelector('.zrx-sticky-atc-compare-price'); const observer = new MutationObserver(() => { const selectedBar = getSelectedBundleBar(); if (!selectedBar) return; const correctPrice = selectedBar.querySelector('.kaching-bundles__bar-price')?.textContent?.trim(); const correctCompare = selectedBar.querySelector('.kaching-bundles__bar-full-price')?.textContent?.trim(); const currentPrice = stickyPriceEl?.textContent?.trim(); const currentCompare = stickyCompareEl?.textContent?.trim(); if (correctPrice && currentPrice !== correctPrice) { console.log('[observer] Fixing sticky price:', currentPrice, '→', correctPrice); stickyPriceEl.textContent = correctPrice; } if (correctCompare && currentCompare !== correctCompare) { console.log('[observer] Fixing sticky compare price:', currentCompare, '→', correctCompare); stickyCompareEl.textContent = correctCompare; } }); observer.observe(stickyWrapper, { childList: true, subtree: true, characterData: true }); console.log('[observer] Sticky price observer attached'); } // First load: retry until bundle content is ready const maxAttempts = 10; let attempts = 0; function tryInitialSync() { const selectedBar = getSelectedBundleBar(); if (selectedBar && selectedBar.querySelector('.kaching-bundles__bar-price')) { console.log('[sticky] Initial sync successful'); syncBundleToSticky(); enforceStickyPriceSync(); } else if (attempts < maxAttempts) { attempts++; console.log(`[sticky] Retrying initial sync (${attempts}/${maxAttempts})...`); setTimeout(tryInitialSync, 200); } else { console.warn('[sticky] Gave up on initial sync after multiple attempts'); } } tryInitialSync(); });