// document.addEventListener('sezerium:swatch:update', (event) => { // const { el, product, variant } = event.detail; // const swatch = el.querySelector(`.ecom-collection__product-picker-colors-item--preview="${product.title.replace('&', '&')} | ${variant.title.replace('&', '&')}"]`); // if (swatch) swatch.click(); // }); document.addEventListener('sezerium:variant:initialize', (e) => { const { el, variant } = e.detail; // Daha önce init edilmişse atla if (el.classList.contains('sezerium-original')) return; const form = el.querySelector('.ecom-collection__product-form'); if (!form) return; const selectEl = form.querySelector('select[name="variant_id"]'); if (!selectEl) return; const productJsonEl = el.querySelector('.product-json'); if (!productJsonEl) return; let productData = null; try { productData = JSON.parse(productJsonEl.innerHTML); } catch (err) { return; } // OptionSelectors'ı başlat if (window.EComposer && window.EComposer.OptionSelectors) { new window.EComposer.OptionSelectors(selectEl.id, { product: productData, onVariantSelected: function(selectedVariant, selector) { // variant değişimini burada yönet }, enableHistoryState: false }); } // Swatch click event'lerini ekle el.querySelectorAll('.ecom-collection__product-swatch-item').forEach(function(swatchItem) { swatchItem.addEventListener('click', function() { const li = this.closest('li'); if (!li) return; if (li.classList.contains('ecom-product-swatch-item--active')) return; // Diğer aktif swatch'ları temizle li.parentNode.querySelectorAll('.ecom-product-swatch-item--active').forEach(function(activeItem) { activeItem.classList.remove('ecom-product-swatch-item--active'); }); li.classList.add('ecom-product-swatch-item--active'); const optionIndex = li.getAttribute('data-option-index'); const value = li.getAttribute('data-value'); // İlgili hidden select'i güncelle ve change tetikle const targetSelect = el.querySelector('select#' + selectEl.id + '-option-' + optionIndex); if (targetSelect) { targetSelect.value = value; targetSelect.dispatchEvent(new Event('change')); } }); }); // Swatch dropdown select (select bazlı) — eksik kalan kısım el.querySelectorAll('select.ecom-collection__product-swatch-select').forEach(function(swatchSelect) { swatchSelect.addEventListener('change', function() { const optionIndex = this.getAttribute('data-option-index'); const value = this.value; el.querySelectorAll('select#' + selectEl.id + '-option-' + optionIndex).forEach(function(targetSelect) { targetSelect.value = value; targetSelect.dispatchEvent(new Event('change')); }); }); }); }); SezeriumAppSettings.selectors.product = 'ul > li.product-grid__item, main .ecom-collection div.ecom-collection__product-item'; SezeriumAppSettings.selectors.title = 'a.ecom-collection__product-item-information-title, .user-select-text div'; SezeriumAppSettings.selectors.image = '.product-media-container img'; document.addEventListener('sezerium:variant:initialize', (e) => { if (!SezeriumCollection.search) return; const { el, variant, product } = e.detail; el.id = `product-card-${variant.id}`; el.dataset.productId = variant.id; const overflowList = el.querySelector('swatches-variant-picker-component overflow-list'); if (overflowList) { const template = document.createElement('template'); template.setAttribute('shadowrootmode', 'open'); const uniqueVersion = Date.now() + Math.floor(Math.random() * 1000); template.innerHTML = `

`; overflowList.prepend(template); } // comment it out for a custom swatch not working on mobile with touchable, we need to find why we added it for. // || window.SezeriumHelper.isMobile() if (!overflowList) { Array.from(el.querySelectorAll('slideshow-slide')).slice(2).forEach(slide => slide.remove()); 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 if (overflowList) { const 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 hoverImageSrc = window.SezeriumImageHandler.getHoverImage(variant.image, product.images); // Get the next sibling element let 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); 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); } 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'); hoverSlideImg.classList.add('sezerium-hover-image'); e.detail.product.images = []; e.detail.variant.image = ''; e.detail.product.tmpImages = product.images; e.detail.variant.tmpImage = variant.image; } } }); document.addEventListener('sezerium:image:update', (event) => { const { el } = event.detail; if (!SezeriumCollection.search) return; 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 slider = img.closest('slideshow-slide'); if (!slider) return; const sliderId = slider.getAttribute('slide-id'); if (!sliderId) return; setTimeout(() => { sliderComp.select({id:sliderId}, undefined, { animate: false }); }, 250); }); document.addEventListener('sezerium:price:update', (event) => { const { el, variant, isOnSale } = event.detail; if (!SezeriumCollection.search) return; 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; if (!SezeriumCollection.search) return; const firstOption = color.replace(/&/g, '&') || variant.option1.replace(/&/g, '&'); const secondOption = variant.option2.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'); const targetInput = fieldset.querySelector(`input[value="${firstOption}"]`); 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; const targetInput = fieldset.querySelector(`input[value="${selectedOption}"]`); 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 (!SezeriumCollection.search) return; 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; if (!SezeriumCollection.search) return; const productCountDiv = document.querySelector('div.products-count-wrapper > span'); if (productCountDiv) { productCountDiv.textContent = productCountDiv.textContent.replace(/[0-9]+/, productCount); } }); if (SezeriumCollection.search) { SezeriumAppSettings.selectors.product = '.product-grid__item, .sf__product-listing .sf__col-item, ul > li.product-grid__item, .resource-list__item, ul.product-grid > li'; SezeriumAppSettings.selectors.title = "a[ref='productTitleLink'] p, .product-card__title, .group-block p"; SezeriumAppSettings.selectors.image = '.product-media img, .product-card__image img, .card-gallery img'; SezeriumAppSettings.selectors.price = ".price, .product-card__price, product-price > div[ref='priceContainer'] > .price"; SezeriumAppSettings.selectors.salePrice = ".compare-at-price, .product-card__compare-price"; }

Wildflowers

Tops

Bras

Leggings

Shorts

Skirts

Accessories

Bags

Dresses

Lounge

Impact Bra

In My Element Leggings

Go With The Flow Bra

In My Element Shorts