`; overflowList.prepend(template); } let mainVariantSlide; let hoverSlide; const variantPicker = el.querySelector('swatches-variant-picker-component'); if (!variantPicker && !overflowList && comp?.disabled === true) { Array.from(el.querySelectorAll('slideshow-slide')).slice(2).forEach(slide => slide.remove()); Array.from(el.querySelectorAll('slideshow-slide')).forEach(slide => slide.removeAttribute('hidden')); const comp = el.querySelector('slideshow-component'); if (comp) { comp.style.setProperty('--slideshow-timeline', '--slide-1, --slide-2'); comp.setAttribute('data-generic-media-size', '2'); } } else { mainVariantSlide = Array.from(el.querySelectorAll('slideshow-slide[variant-image]')).find(slide => { const img = slide.querySelector('img'); return img && img.src.includes(variant.image); }); if (mainVariantSlide) { const productCard = el.querySelector('product-card'); productCard.dataset.initialMediaId = mainVariantSlide.getAttribute('slide-id'); const hoverImageSrc = window.SezeriumImageHandler.getHoverImage(variant.image, product.images); // Get the next sibling element hoverSlide = mainVariantSlide.nextElementSibling; let hoverSlideImg = hoverSlide?.querySelector('img'); // Check if next slide exists and has the hover image const hasHoverSlide = hoverSlideImg && hoverSlideImg.src.includes(hoverImageSrc); mainVariantSlide.removeAttribute('hidden'); mainVariantSlide.setAttribute('reveal', '') if (!hasHoverSlide && hoverImageSrc) { // Clone the main variant slide hoverSlide = mainVariantSlide.cloneNode(true); hoverSlideImg = hoverSlide.querySelector('img'); // Insert it after the main variant slide if (mainVariantSlide.nextSibling) { mainVariantSlide.parentNode.insertBefore(hoverSlide, mainVariantSlide.nextSibling); } else { mainVariantSlide.parentNode.appendChild(hoverSlide); } // Update the hover slide with new image source window.SezeriumImageHandler.updateImageSource(hoverSlideImg, window.SezeriumImageHandler.getImagePath(hoverSlideImg), hoverImageSrc); hoverSlide.removeAttribute('variant-image'); // Update slide-id with variant.id hoverSlide.setAttribute('slide-id', variant.id); hoverSlide.removeAttribute('hidden'); hoverSlide.setAttribute('reveal', '') } } } if ((variantPicker || overflowList || comp?.disabled === false) && mainVariantSlide) { el.querySelector('.sezerium-image')?.classList.remove('sezerium-image'); el.querySelector('.sezerium-hover-image')?.classList.remove('sezerium-hover-image'); mainVariantSlide.querySelector('img').classList.add('sezerium-image'); hoverSlide?.querySelector('img').classList.add('sezerium-hover-image'); e.detail.product.tmpImages = product.images; e.detail.variant.tmpImage = variant.image; e.detail.product.images = []; e.detail.variant.image = ''; } if (mainVariantSlide && comp) { const cont = mainVariantSlide.parentNode; if (cont) { if (hoverSlide && hoverSlide.parentNode === cont) cont.prepend(hoverSlide); cont.prepend(mainVariantSlide); const slides = Array.from(cont.querySelectorAll('slideshow-slide')); comp.style.setProperty('--slideshow-timeline', slides.map((_, i) => `--slide-${i}`).join(', ')); slides.forEach((s, i) => s.style.setProperty('--slideshow-timeline', `--slide-${i}`)); comp.setAttribute('initial-slide', '0'); comp.setAttribute('data-generic-media-size', String(slides.length)); try { comp.connectedCallback(); } catch (err) {} } } }); document.addEventListener('sezerium:image:update', (event) => { const { el, variant } = event.detail; el.querySelectorAll('slideshow-slide[hidden]').forEach(s => { s.removeAttribute('hidden'); s.setAttribute('reveal', ''); }); const sliderComp = el.querySelector('slideshow-component'); if (!sliderComp) return; const img = el.querySelector('.sezerium-image'); if (!img) return; const productLink = el.querySelector('product-card-link'); if (productLink) { productLink.setAttribute('data-product-id', variant.id); productLink.setAttribute('data-featured-media-url', img.src); } const slider = img.closest('slideshow-slide'); if (!slider) return; const slides = Array.from(sliderComp.querySelectorAll('slideshow-slide')); const idx = slides.indexOf(slider); if (idx < 0) return; slides.forEach(s => s.setAttribute('aria-hidden', s === slider ? 'false' : 'true')); sliderComp.setAttribute('initial-slide', String(idx)); try { sliderComp.connectedCallback(); } catch (e) {} requestAnimationFrame(() => { try { sliderComp.select(idx, undefined, { animate: false }); } catch (e) {} try { sliderComp.select(slider.getAttribute('slide-id'), undefined, { animate: false }); } catch (e) {} }); }); document.addEventListener('sezerium:price:update', (event) => { const { el, variant, isOnSale } = event.detail; if (isOnSale && !el.querySelector(SezeriumAppSettings.selectors.salePrice)) { const priceEl = el.querySelector(SezeriumAppSettings.selectors.price); if (!priceEl) return; const priceContainer = priceEl.parentElement; const salePrice = window.SezeriumPriceHandler.formatPrice(variant.compareAtPrice); priceContainer.innerHTML = ` ${priceEl.outerHTML} ${salePrice} `; } el.querySelector('.price-from')?.remove?.(); }); document.addEventListener('sezerium:swatch:update', (e) => { const { el, color, variant } = e.detail; const firstOption = color.replace(/&/g, '&') || variant.option1.replace(/&/g, '&'); const secondOption = variant.option2.replace(/&/g, '&'); const thirdOption = variant.option3.replace(/&/g, '&'); // if (window.SezeriumHelper.isMobile()) { // el.classList.add('sezerium-swatch'); // return; // } setTimeout(() => { el.querySelectorAll('swatches-variant-picker-component fieldset').forEach((fieldset) => { fieldset.classList.add('sezerium-swatch'); let targetInput = fieldset.querySelector(`input[value="${firstOption}"]`); if (!targetInput) { targetInput = fieldset.querySelector(`input[value="${secondOption}"]`); } if (!targetInput) { targetInput = fieldset.querySelector(`input[value="${thirdOption}"]`); } if (targetInput) { const checkedInput = fieldset.querySelector('input:checked'); if (checkedInput) { checkedInput.checked = false; checkedInput.removeAttribute('checked'); } if (variant.available) { targetInput.dataset.optionAvailable = 'true'; targetInput.ariaDisabled = 'false'; } else { targetInput.dataset.optionAvailable = 'false'; targetInput.ariaDisabled = 'true'; } targetInput.classList.add('sezerium-checked'); targetInput.checked = true; targetInput.setAttribute('checked', ''); targetInput.disabled = false; targetInput.dispatchEvent(new Event('change', { bubbles: true })); } }); }, 50); setTimeout(() => { el.querySelectorAll('variant-picker fieldset').forEach((fieldset, index) => { fieldset.classList.add('sezerium-swatch'); const selectedOption = index === 0 ? firstOption : secondOption; let targetInput = fieldset.querySelector(`input[value="${selectedOption}"]`); if (!targetInput) { targetInput = fieldset.querySelector(`input[value="${thirdOption}"]`); } if (targetInput) { const checkedInput = fieldset.querySelector('input:checked'); if (checkedInput) { checkedInput.checked = false; checkedInput.removeAttribute('checked'); checkedInput.dispatchEvent(new Event('input', { bubbles: true })); checkedInput.dispatchEvent(new Event('change', { bubbles: true })); } if (variant.available) { targetInput.dataset.optionAvailable = 'true'; targetInput.ariaDisabled = 'false'; } else { targetInput.dataset.optionAvailable = 'false'; targetInput.ariaDisabled = 'true'; } targetInput.classList.add('sezerium-checked'); targetInput.checked = true; targetInput.setAttribute('checked', 'checked'); targetInput.disabled = false; targetInput.dispatchEvent(new Event('input', { bubbles: true })); targetInput.dispatchEvent(new Event('change', { bubbles: true })); } }); }, 50); }); document.addEventListener('sezerium:js:unload', (e) => { const { collectionEl } = e.detail; if (!collectionEl) return; const slideshowComponent = collectionEl.closest('slideshow-component'); if (slideshowComponent) { const itemCount = collectionEl.querySelectorAll('.sezerium-product').length; const newTimeline = Array.from({length: itemCount}, (_, i) => `--slide-${i + 1}`) .join(', '); slideshowComponent.style.setProperty('--slideshow-timeline', newTimeline); collectionEl.querySelectorAll('slideshow-slide.sezerium-product').forEach((item, index) => { const slide = `--slide-${index+1}`; item.style.setProperty('--slideshow-timeline', slide); item.setAttribute('aria-hidden', false); }); slideshowComponent.connectedCallback(); setTimeout(()=> slideshowComponent.select(0, undefined, { animate: false }), 500) } }); document.addEventListener('sezerium:set:productCount', (e) => { const { productCount } = e.detail; const productCountDiv = document.querySelector('div.products-count-wrapper > span'); if (productCountDiv) { productCountDiv.textContent = productCountDiv.textContent.replace(/[0-9]+/, productCount); } }); document.addEventListener('sezerium:widget:update', (event) => { const { el, product, variant } = event.detail; const isSoldOut = variant.available === false || variant.availableForSale === false; const isProductCard = variant.keepOriginal === true || product.sezeriumKeepOriginal === true || variant.title === 'Default Title'; const singleVariant = variant.title === 'Default Title' || (variant.selectedOptions || []).some((o) => o.value === 'Default Title'); const wantChoose = isProductCard && !singleVariant; const t = SezeriumAppSettings.settings.translation.button; const qckComponent = el.querySelector('quick-add-component'); if (qckComponent) { qckComponent.setAttribute('data-quick-add-button', wantChoose ? 'choose' : 'add'); } const btnComponent = el.querySelector('add-to-cart-component'); if (btnComponent) { const btn = btnComponent.querySelector('button'); if (btn) btn.disabled = isSoldOut; const btnText = btnComponent.querySelector('.add-to-cart-text__content'); if (btnText) { const label = isSoldOut ? t.soldOut : (wantChoose ? t.chooseOptions : t.addToCart); btnText.innerHTML = '' + label + ''; } } });

Studded Clover Nail Bangle

You may also like