/* =========================== OPUS — CUSTOM SCRIPT (FINAL / HARD FIX) Targets: - iOS Safari address bar TOP vs BOTTOM (visualViewport) - Safari "Request Desktop Website" (scaled desktop on phone) - Shadow DOM Opus drawer: white gap, CGV too low, untappable checkout Keeps: - open drawer after /cart/add - free gift titles & “Gratuit/Complimentary” - arrows on upsell buttons - extra checkout text block =========================== */ (function () { // ---------- 1) Viewport vars (must be visible inside Shadow DOM) ---------- function getVV() { const vv = window.visualViewport; const w = vv ? vv.width : window.innerWidth; const h = vv ? vv.height : window.innerHeight; const scale = vv ? vv.scale : 1; const bottomUI = vv ? Math.max(0, window.innerHeight - (vv.height + vv.offsetTop)) : 0; return { w, h, scale, bottomUI }; } function setCSSVars() { const { h, bottomUI } = getVV(); const vvhPx = `${Math.round(h)}px`; const bottomPx = `${Math.round(bottomUI)}px`; // html document.documentElement.style.setProperty('--opus-vvh', vvhPx); document.documentElement.style.setProperty('--opus-bottom-ui', bottomPx); // Shadow DOM host (CRITICAL) const host = document.getElementById('opus-shadow-container'); if (host) { host.style.setProperty('--opus-vvh', vvhPx); host.style.setProperty('--opus-bottom-ui', bottomPx); } } // ---------- 2) Force-mobile flag even in “Desktop Website” ---------- function computeForceMobile() { const { w, scale } = getVV(); const hasTouch = (navigator.maxTouchPoints || 0) > 0; // On iPhone with “Request Desktop Website”, visualViewport.width can be ~980 and scale < 1. // This catches that reliably on real devices. const looksLikePhoneDesktopMode = hasTouch && scale < 0.95; // Normal mobile (real mobile layout) const looksLikeMobileWidth = w <= 540; // iPhone logical widths are usually <= 430–480 return looksLikePhoneDesktopMode || looksLikeMobileWidth; } function applyForceMobileClass() { const force = computeForceMobile(); document.documentElement.classList.toggle('opus-force-mobile', force); const host = document.getElementById('opus-shadow-container'); if (host) host.classList.toggle('opus-force-mobile', force); } function burstAll() { setCSSVars(); applyForceMobileClass(); requestAnimationFrame(() => { setCSSVars(); applyForceMobileClass(); }); setTimeout(() => { setCSSVars(); applyForceMobileClass(); }, 120); setTimeout(() => { setCSSVars(); applyForceMobileClass(); }, 320); } // Init listeners burstAll(); window.addEventListener('pageshow', burstAll); window.addEventListener('resize', burstAll); if (window.visualViewport) { window.visualViewport.addEventListener('resize', burstAll); window.visualViewport.addEventListener('scroll', burstAll); } window.addEventListener('OpusOpenCartState', burstAll); window.addEventListener('OpusCartChange', burstAll); // ---------- 3) Auto-open Opus after add-to-cart ---------- (function (ns, fetch) { ns.fetch = function () { const response = fetch.apply(this, arguments); response.then(res => { try { if (res.url && res.url.includes('/cart/add')) { const url = new URL(res.url); const isOpus = url.searchParams.get("opus"); if (isOpus) return; window?.opusOpen?.(); } } catch (_) {} }); return response; }; }(window, window.fetch)); // ---------- 4) “Gratuit/Complimentary” for zero prices ---------- function updateFreePriceText(country) { const priceEls = document.querySelectorAll('.opus-price-display .money .money'); priceEls.forEach(el => { const text = (el.textContent || '').trim(); const isZero = text === '0,00' || text === '0.00' || text === '€0,00' || text === '€0.00' || /(^|[^\d])0[,\.]00([^\d]|$)/.test(text); if (isZero && !el.dataset.freeUpdated) { el.textContent = (country === 'fr') ? 'Gratuit' : 'Complimentary'; el.dataset.freeUpdated = 'true'; } }); } // ---------- 5) HARD FIX: layout + CGV + hit-testing inside shadowRoot ---------- function hardFixShadowLayout(shadowRoot) { const force = document.documentElement.classList.contains('opus-force-mobile'); if (!force) return; // find checkout CTA by text (robust across class changes) const checkoutEl = findCheckoutCTA(shadowRoot); if (!checkoutEl) return; const footer = closestUsefulContainer(checkoutEl, [ '.cd-checkout-section-container', '[class*="checkout"]', '[data-checkout]' ]) || checkoutEl.parentElement; // scroller: find the main cart area (try common classes, else fallback to drawer body) const scroller = shadowRoot.querySelector('.cd-cart-container') || shadowRoot.querySelector('.cd-cart-items-container') || shadowRoot.querySelector('.cd-cart-items') || shadowRoot.querySelector('[class*="cart"][class*="container"]') || shadowRoot.querySelector('[class*="drawer"][class*="container"]') || footer?.parentElement; const main = shadowRoot.querySelector('.cd-main-cart-container') || shadowRoot.querySelector('.cd-cart-drawer-container') || shadowRoot.querySelector('.cd-drawer-container') || scroller?.parentElement; // 1) make main a proper column (kills giant blank spacer from space-between) if (main) { main.style.display = 'flex'; main.style.flexDirection = 'column'; main.style.height = '100%'; main.style.minHeight = '0'; main.style.justifyContent = 'flex-start'; } // 2) sticky footer if (footer) { footer.style.position = 'sticky'; footer.style.bottom = '0'; footer.style.zIndex = '9999'; footer.style.background = '#fff'; footer.style.transform = 'translateZ(0)'; } // 3) move CGV block ABOVE CTA inside footer if (footer) { const termsBlock = findTermsBlock(shadowRoot); if (termsBlock && !footer.contains(termsBlock)) { const extra = footer.querySelector('.opus-extra-text-checkout'); if (extra) extra.insertAdjacentElement('afterend', termsBlock); else footer.insertAdjacentElement('afterbegin', termsBlock); termsBlock.style.margin = '10px 0 12px'; } } // 4) remove flex-grow spacer elements (white gap) if (main) { Array.from(main.children).forEach((child) => { const txt = (child.textContent || '').trim(); const empty = txt.length === 0 && child.children.length === 0; if (!empty) return; const cs = getComputedStyle(child); const grow = parseFloat(cs.flexGrow) || 0; if (grow > 0) { child.style.flex = '0 0 auto'; child.style.height = '0'; child.style.minHeight = '0'; child.style.margin = '0'; child.style.padding = '0'; } }); } // 5) reserve space for footer + safe area + Safari UI if (scroller && footer) { const { bottomUI } = getVV(); const footerH = footer.getBoundingClientRect().height || 160; scroller.style.overflowY = 'auto'; scroller.style.webkitOverflowScrolling = 'touch'; scroller.style.minHeight = '0'; scroller.style.paddingBottom = `calc(${Math.round(footerH + 24)}px + env(safe-area-inset-bottom) + ${Math.round(bottomUI)}px)`; } // 6) iOS hit-testing wake-up if (scroller) { const prev = scroller.scrollTop; scroller.scrollTop = prev + 1; scroller.scrollTop = prev; requestAnimationFrame(() => { const p = scroller.scrollTop; scroller.scrollTop = p + 1; scroller.scrollTop = p; }); } } function findCheckoutCTA(root) { const nodes = Array.from(root.querySelectorAll('button, a')); // FR + EN keywords const keys = ['passer à la caisse', 'passer a la caisse', 'checkout', 'proceed to checkout', 'payer']; return nodes.find((el) => { const t = (el.textContent || '').toLowerCase().replace(/\s+/g, ' ').trim(); return keys.some(k => t.includes(k)); }) || null; } function findTermsBlock(root) { // Prefer checkbox label container const inputs = Array.from(root.querySelectorAll('input[type="checkbox"]')); const candidate = inputs.find((cb) => { const wrap = cb.closest('label') || cb.closest('div') || cb.parentElement; const t = (wrap?.textContent || '').toLowerCase(); return t.includes('conditions générales') || t.includes('conditions generales') || t.includes('cgv') || t.includes('terms'); }); if (candidate) return candidate.closest('label') || candidate.closest('div') || candidate.parentElement; // Fallback: any block containing terms text const blocks = Array.from(root.querySelectorAll('label, div, p, span')); return blocks.find((el) => { const t = (el.textContent || '').toLowerCase(); return t.includes('conditions générales') || t.includes('conditions generales') || t.includes('cgv') || t.includes('terms'); }) || null; } function closestUsefulContainer(el, selectors) { for (const sel of selectors) { const found = el.closest(sel); if (found) return found; } return null; } // ---------- 6) Your existing enhancements + run hard fix ---------- function handleCartEvents() { burstAll(); const country = (window.Shopify && Shopify.locale) ? Shopify.locale : ''; const arrTitleFree = [ { en: 'CHOOSE YOUR 2 COMPLIMENTARY SAMPLES', fr: 'VOS 2 ÉCHANTILLONS OFFERTES' }, { en: 'CHOOSE YOUR COMPLIMENTARY MINIATURE', fr: 'CHOISISSEZ UNE MINIATURE OFFERTE' }, ]; // Update free gifts titles + free price text let countTimer = 0; const timerFree = setInterval(() => { countTimer++; const freeGifts = document.querySelectorAll('.opus-carousel-container.free-gift'); if (freeGifts.length > 0) { const infoFreeGift = window.opusWidget?.settings?.freeGifts?.listOffers || []; const nameProducts = infoFreeGift.map(group => ( (group.freeProducts || []).map(product => product.title) )); freeGifts.forEach((freeGift) => { const titleProduct = freeGift.querySelector('.cd-product-title')?.textContent; if (nameProducts[0]?.includes(titleProduct)) { const el = freeGift.querySelector('.opus-free-gift-title'); if (el) el.textContent = arrTitleFree[0][country] || arrTitleFree[0].en; } if (nameProducts[1]?.includes(titleProduct)) { const el = freeGift.querySelector('.opus-free-gift-title'); if (el) el.textContent = arrTitleFree[1][country] || arrTitleFree[1].en; } }); } updateFreePriceText(country); if (countTimer > 30) clearInterval(timerFree); }, 100); const svgIcon = ` `; if (country === 'fr') { window.OpusFreeGiftSvg = `Ajouter au panier ${svgIcon}`; window.checkoutErrorText = "Veuillez accepter les conditions générales pour passer à la caisse"; } else { window.OpusFreeGiftSvg = `Add to cart ${svgIcon}`; window.checkoutErrorText = "Please agree to the Terms and Conditions to checkout."; } const shadowRoot = document.getElementById('opus-shadow-container')?.shadowRoot; if (!shadowRoot) return; // Inject arrow in upsell buttons let attempts = 0; const maxAttempts = 4; const intervalId = setInterval(() => { const buttons = shadowRoot.querySelectorAll('.add-to-cart-upsell-button.cd-main-button'); if (buttons?.length) { buttons.forEach(button => { if (!button.querySelector('svg.icon-arrow')) { button.insertAdjacentHTML('beforeend', svgIcon); } }); } attempts++; if (attempts >= maxAttempts) clearInterval(intervalId); }, 350); // Extra checkout text once const arrText = { fr: ["Paiement sécurisé", "Retour 14 jours", "Livraison rapide (2–4 jours)"], en: ["Secure payment", "14-day return policy", "Fast delivery (2–4 days)"] }; const countryText = window.location.pathname.includes('/en') ? "en" : "fr"; const footer = shadowRoot.querySelector('.cd-checkout-section-container') || shadowRoot.querySelector('[class*="checkout"]'); if (footer && !shadowRoot.querySelector('.opus-extra-text-checkout')) { footer.insertAdjacentHTML("afterbegin", `

${arrText[countryText][0]}

${arrText[countryText][1]}

${arrText[countryText][2]}

`); } // APPLY HARD FIX (with bursts because Opus animates) hardFixShadowLayout(shadowRoot); requestAnimationFrame(() => hardFixShadowLayout(shadowRoot)); setTimeout(() => hardFixShadowLayout(shadowRoot), 120); setTimeout(() => hardFixShadowLayout(shadowRoot), 320); } window.addEventListener('OpusCartChange', handleCartEvents); window.addEventListener('OpusOpenCartState', handleCartEvents); })();

LAYERING ATELIER