/* Installed in Ego's Custom script field; presentation only, no cart mutations. */ (() => { if (window.__upliefEgoPresentation) return; window.__upliefEgoPresentation = true; const overlayStyle=document.createElement('style'); overlayStyle.textContent='body.opus-modal-open #chat-bubble { visibility:hidden!important; pointer-events:none!important; }'; document.head.append(overlayStyle); const giftValue = 'S$58'; // Current single-item price, verified 2026-10-01. const setText = (el, text) => { if (el && el.textContent !== text) el.textContent = text; }; const amount = text => Number(String(text).replace(/[^0-9.]/g, '')); const money = (sample, value) => sample.replace(/[0-9][0-9,.]*/, value.toLocaleString('en-SG', {minimumFractionDigits: 2, maximumFractionDigits: 2})); const savingLabel = (originalCents, discountedCents) => `Save $${Math.round((originalCents - discountedCents) / 100).toLocaleString('en-SG')}`; const productPaths = new Map(); let productCatalogPromise; const getProductPath = async productId => { if (!productCatalogPromise) productCatalogPromise = (async () => { const rootPath = window.Shopify?.routes?.root || '/'; const catalog = new Map(); for (let page = 1; page <= 100; page++) { const response = await fetch(`${rootPath}products.json?limit=250&page=${page}`, {credentials:'same-origin'}); if (!response.ok) break; const data = await response.json(); const products = Array.isArray(data.products) ? data.products : []; products.forEach(product => catalog.set(String(product.id), `${rootPath}products/${encodeURIComponent(product.handle)}`)); if (products.length < 250) break; } return catalog; })().catch(() => new Map()); if (!productPaths.size) { const catalog = await productCatalogPromise; catalog.forEach((path, id) => productPaths.set(id, path)); } return productPaths.get(String(productId)) || null; }; const productIdFrom = card => { const item = card.closest('.cd-product-item-content') || card; const classes = typeof item.className === 'string' ? item.className : ''; return item.dataset.productid || item.dataset.productId || classes.match(/(?:^|\s)pro(\d+)(?:\s|$)/)?.[1] || classes.match(/(?:^|\s)prod-(\d+)(?:\s|$)/)?.[1] || card.dataset.productid || card.className.match?.(/(?:^|\s)id(\d+)(?:\s|$)/)?.[1] || null; }; const ensureProductLink = async card => { const productId = productIdFrom(card); if (!productId) return; const title = card.querySelector('.cd-product-item-title, .cd-product-title'); const image = card.querySelector('img'); const targets = [title?.closest('.cd-product-title-href') || title, image?.parentElement]; const missing = targets.filter(target => target && !target.closest('a[href]')); if (!missing.length) return; const path = productPaths.get(String(productId)) || await getProductPath(productId); if (!path) return; const variantId = (card.closest('.cd-product-item-content') || card).className.match?.(/(?:^|\s)id(\d+)(?:\s|$)/)?.[1]; const href = variantId ? `${path}?variant=${encodeURIComponent(variantId)}` : path; missing.forEach(target => { let link = target.querySelector('.uplief-product-details-link'); if (!link) { link = document.createElement('a'); link.className = 'uplief-product-details-link'; target.classList.add('uplief-product-link-target'); target.append(link); } link.href = href; link.setAttribute('aria-label', `View ${title?.textContent.trim() || image?.alt || 'product'} details and size chart`); }); }; const style = ` .uplief-product-link-target { position:relative; } .uplief-product-details-link { position:absolute; inset:0; z-index:1; display:block; border-radius:inherit; } .uplief-product-details-link:focus-visible { outline:2px solid #ff9f18; outline-offset:3px; } .uplief-offer-prices { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; margin:4px 0; } .uplief-offer-prices strong { font-weight:700; } .uplief-offer-prices del, .uplief-original-price { color:#666; font-size:0.9em; text-decoration:line-through; } .cd-carousel-product.uplief-priced .cd-item-price, .opus-warp-upsell-item.uplief-priced .cd-item-price > .money { display:none!important; } #opus-drawer-id .opus-discount-text, #opus-drawer-id .uplief-saving { color:#c62828!important; font-weight:700!important; } .uplief-original-hidden, .uplief-modal-priced .cd-item-price { display:none!important; } .cd-rewards-container .rewards-text { overflow-wrap:break-word; } [data-uplief-label] { font-size:0!important; } [data-uplief-label]::after { content:attr(data-uplief-label); font-size:12px; } .cd-discount-truncate.uplief-giveaway { max-width:none; white-space:normal; overflow:visible; } .uplief-gift-confirmation { font-size:14px; line-height:1.5; margin:0; } .rewards-text.uplief-reward-hidden { display:none!important; } `; function attach(root) { if (root.querySelector('#uplief-cart-presentation-style')) return; const sheet = document.createElement('style'); sheet.id = 'uplief-cart-presentation-style'; sheet.textContent = style; root.append(sheet); let queued = false; const observer = new MutationObserver(() => { if (!queued) { queued = true; requestAnimationFrame(() => { queued = false; render(); }); } }); function render() { observer.disconnect(); try { root.querySelectorAll('.cd-carousel-product:not(.freegift), .opus-warp-upsell-item').forEach(card => { const label = card.querySelector('.opus-discount-text'); const match = label?.textContent.match(/Save\s+(\d+(?:\.\d+)?)%/i); const base = card.querySelector('.opus-upsell-price, .cd-item-price > .money > .opus-money'); const percent = match ? Number(match[1]) : Number(card.dataset.upliefDiscountRate || 0); if (!base || !percent || percent >= 100) { card.classList.remove('uplief-priced'); card.querySelector('.uplief-offer-prices')?.remove(); return; } const sample = base.textContent.trim(), cents = Math.round(amount(sample) * 100); if (!Number.isFinite(cents)) return; const discountedCents = Math.round(cents * (1 - percent / 100)); let prices = card.querySelector('.uplief-offer-prices'); if (!prices) { prices = document.createElement('div'); prices.className = 'uplief-offer-prices'; prices.append(document.createElement('strong'), document.createElement('del')); if (card.matches('.opus-warp-upsell-item')) card.querySelector('.cd-item-price').prepend(prices); else card.querySelector('.cd-item-price').after(prices); } setText(prices.children[0], money(sample, discountedCents / 100)); setText(prices.children[1], sample); setText(label, savingLabel(cents, discountedCents)); card.dataset.upliefDiscountRate = String(percent); card.classList.add('uplief-priced'); }); root.querySelectorAll('.cd-modal-content').forEach(modal => { modal.querySelectorAll('.opus-option-group').forEach(group => { group.dataset.upliefOptions = /size/i.test(group.querySelector('label')?.textContent || '') ? 'size' : 'other'; }); const product = modal.querySelector('input[name="properties[__cd_opus_UpSell]"]')?.value; const card = product && (root.querySelector(`.cd-carousel-product.prod-${CSS.escape(product)}`) || root.querySelector(`[data-productid="${CSS.escape(product)}"]`)?.closest('.opus-warp-upsell-item')); const match = card?.querySelector('.opus-discount-text')?.textContent.match(/Save\s+(\d+(?:\.\d+)?)%/i); const base = modal.querySelector('.cd-item-price > .money:not(.cd-original-price)'); if ((!match && !card?.dataset.upliefDiscountRate) || !base) return; const rate = match ? Number(match[1]) : Number(card.dataset.upliefDiscountRate); const sample = base.textContent.trim(), cents = Math.round(amount(sample) * 100); if (!Number.isFinite(cents) || rate <= 0 || rate >= 100) return; const discountedCents = Math.round(cents * (1 - rate / 100)); let prices = modal.querySelector('.uplief-offer-prices'); if (!prices) { prices = document.createElement('div'); prices.className = 'uplief-offer-prices'; prices.append(document.createElement('strong'), document.createElement('del'), document.createElement('span')); prices.children[2].className = 'uplief-saving'; modal.querySelector('.cd-item-price').after(prices); } setText(prices.children[0], money(sample, discountedCents / 100)); setText(prices.children[1], sample); setText(prices.children[2], savingLabel(cents, discountedCents)); modal.classList.add('uplief-modal-priced'); }); root.querySelectorAll('.cd-product-item-upsell').forEach(row => { const discount = [...row.querySelectorAll('[class]')].map(e => e.className).join(' ').match(/discount--(\d+(?:\.\d+)?)%/); const final = row.querySelector('.opus-final-price'), original = row.querySelector('.opus-original-price'); if (!discount || !final || !original) { original?.classList.remove('uplief-original-hidden'); row.querySelector('.uplief-original-price')?.remove(); return; } const rate = Number(discount[1]); if (rate <= 0 || rate >= 100) return; let corrected = row.querySelector('.uplief-original-price'); if (!corrected) { corrected = document.createElement('del'); corrected.className = 'uplief-original-price'; original.after(corrected); } original.classList.add('uplief-original-hidden'); setText(corrected, money(final.textContent.trim(), Math.round(amount(final.textContent) * 100 / (1 - rate / 100)) / 100)); }); root.querySelectorAll('.cd-discount-truncate, .opus-discount-code span, .cd-discount-code span').forEach(label => { const text = label.textContent.trim(); const discount = text.match(/^-(\d+(?:\.\d+)?)%$/); const isGift = /^(?:Ego Free Gift|FREE GIFT)$/i.test(text); const replacement = isGift ? 'FREE GIFT' : discount ? `Save ${discount[1]}%` : ''; if (replacement) { label.dataset.upliefLabel = replacement; label.setAttribute('aria-label', replacement); } else { delete label.dataset.upliefLabel; label.removeAttribute('aria-label'); } label.classList.toggle('uplief-giveaway', isGift); label.classList.toggle('uplief-saving', !!discount); }); root.querySelectorAll('.cd-carousel-product.freegift').forEach(card => { const title=card.querySelector('.cd-product-title'); const name=card.querySelector('img')?.alt || 'Premium Bamboo Elbow Sleeves'; setText(title, name.replace(/^FREE\s+/i, '')); card.querySelectorAll('*').forEach(el => { if (!el.children.length && /^Free$/i.test(el.textContent.trim())) setText(el, 'FREE'); }); }); // Add product page links wherever the cart app renders an unlinked // product name or image. Resolve Shopify product IDs from the catalog, // so new products and all gift variants receive links automatically. root.querySelectorAll('.cd-product-item-content, .cd-carousel-product, .opus-warp-upsell-item, .cd-product-item-upsell').forEach(card => { ensureProductLink(card); }); // Gift reference price is the single-item selling price, not compare-at price. root.querySelectorAll('.cd-carousel-product.freegift, .cd-modal-content:has(input[name="properties[__cd_opus_free_gift]"])').forEach(container => { container.querySelectorAll('.cd-original-price').forEach(price => setText(price, money(price.textContent.trim(), amount(giftValue)))); }); const giftAdded = !!root.querySelector('.cd-product-item-free-gift'); const reward = root.querySelector('.rewards-text'); let confirmation = root.querySelector('.uplief-gift-confirmation'); if (giftAdded && reward) { if (!confirmation) { confirmation = document.createElement('p'); confirmation.className = 'uplief-gift-confirmation'; reward.after(confirmation); } setText(confirmation, 'Your FREE Mystery Gift has been added to cart!'); reward.classList.add('uplief-reward-hidden'); reward.setAttribute('aria-hidden','true'); } else { confirmation?.remove(); reward?.classList.remove('uplief-reward-hidden'); reward?.removeAttribute('aria-hidden'); } // Keep native React copy intact and render a formatted presentation alongside it. if (reward) { let copy = root.querySelector('.uplief-reward-copy'); if (!copy) { copy = document.createElement('p'); copy.className = 'uplief-reward-copy'; reward.after(copy); } const remaining = reward.textContent.match(/Spend\s+(?:S)?\$([\d,]+(?:\.\d+)?)/i); const rounded = remaining ? Math.ceil(Number(remaining[1].replace(/,/g, ''))).toLocaleString('en-SG') : null; const giftLabel = `FREE Mystery Gift worth $${amount(giftValue)}!`; const text = giftAdded ? 'Your FREE Mystery Gift has been added to cart!' : rounded !== null ? `Add $${rounded} to unlock ${giftLabel}` : 'Your FREE Mystery Gift is unlocked!'; if (copy.dataset.source !== text) { copy.dataset.source = text; copy.replaceChildren(); if (rounded !== null && !giftAdded) { const spend = document.createElement('strong'); spend.textContent = `$${rounded}`; const gift = document.createElement('strong'); gift.textContent = giftLabel; copy.append('Add ', spend, ' to unlock ', gift); } else if (!giftAdded) { const gift = document.createElement('strong'); gift.textContent = 'FREE Mystery Gift'; copy.append('Your ', gift, ' is unlocked!'); } else { const gift = document.createElement('strong'); gift.textContent = 'FREE Mystery Gift'; copy.append('Your ', gift, ' has been added to cart!'); } } reward.classList.add('uplief-reward-hidden'); reward.setAttribute('aria-hidden','true'); confirmation?.remove(); } root.querySelectorAll('.opus-carousel-container:has(.scroll-container)').forEach(container => { const slider = container.querySelector('.scroll-container'); if (container.querySelector('.uplief-carousel-prev')) return; const previous = document.createElement('button'), next = document.createElement('button'); [previous, next].forEach((button, index) => { button.type = 'button'; button.className = `uplief-carousel-arrow uplief-carousel-${index ? 'next' : 'prev'}`; button.setAttribute('aria-label', index ? 'Next recommended product' : 'Previous recommended product'); button.innerHTML = ``; button.addEventListener('click', () => { const cards = [...slider.children]; const current = Math.round(slider.scrollLeft / Math.max(1, slider.clientWidth)); const target = cards[Math.max(0, Math.min(cards.length - 1, current + (index ? 1 : -1)))]; if (target) slider.scrollTo({left: target.offsetLeft - cards[0].offsetLeft, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth'}); }); container.append(button); }); const update = () => { previous.disabled = slider.scrollLeft < 2; next.disabled = slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 2; }; slider.addEventListener('scroll', update, {passive:true}); new ResizeObserver(update).observe(slider); update(); }); const paymentSource=document.querySelector('.footer__payment .list-payment, .footer__payment .list-payment-lm'); const checkout=root.querySelector('.cd-checkout-section-button'); if (paymentSource && checkout) { let payments=root.querySelector('.uplief-dynamic-payments'); if (!payments) { payments=document.createElement('ul'); payments.className='uplief-dynamic-payments'; payments.setAttribute('aria-label','Accepted payment methods'); checkout.after(payments); } const signature=paymentSource.innerHTML; if (payments.dataset.source !== signature) { payments.dataset.source=signature; payments.replaceChildren(...[...paymentSource.children].map(item=>item.cloneNode(true))); payments.querySelectorAll('[id]').forEach(el=>{const old=el.id;el.id='uplief-cart-'+old;payments.querySelectorAll('[aria-labelledby]').forEach(svg=>{if(svg.getAttribute('aria-labelledby')===old)svg.setAttribute('aria-labelledby',el.id);});}); } } const bar = root.querySelector('.cd-progress-bar'); const track = root.querySelector('.cd-progress-bar-background'); if (bar && track) { let icon = track.querySelector('.uplief-progress-gift'); if (!icon) { icon=document.createElement('span'); icon.className='uplief-progress-gift'; icon.setAttribute('aria-hidden','true'); icon.innerHTML=''; track.append(icon); } const percent=Math.max(0,Math.min(100,parseFloat(bar.style.width)||0)); icon.style.left=`clamp(16px, ${percent}%, calc(100% - 16px))`; } root.querySelectorAll('.add-to-cart-upsell-button, .cd-carousel-product:not(.freegift) .cd-buy-button, .cd-modal-content .add-to-cart-model-button').forEach(button => { const label=button.closest('.cd-modal-content') ? 'CONFIRM' : 'ADD'; button.dataset.upliefAdd=label; button.setAttribute('aria-label',label); }); } finally { observer.observe(root, {childList:true, subtree:true, characterData:true, attributes:true, attributeFilter:['class','style']}); } } render(); } function findDrawer() { const root = document.querySelector('#opus-shadow-container')?.shadowRoot || document.querySelector('#opus-drawer-id'); if (root) attach(root); } findDrawer(); const discovery = new MutationObserver(findDrawer); discovery.observe(document.documentElement, {childList:true, subtree:true}); })();

You Might Also Like

Contact information