https://www.lyleandscott.com/cdn/shop/t/458/assets/lyle-product-cards.js?v=126658171629247725891788364384

1import{AlgoliaProductCardRenderer}from"@lyle/algolia-product-card";import{AlgoliaProductFetcher}from"@lyle/algolia-product-fetcher";import{createMoneyFormatter,formatMoney,parseJson}from"@lyle/algolia-product-utils";class LyleProductCards extends HTMLElement{#abortController=null;#cardRenderer=null;#config=null;#fetcher=null;#hydratedSwatches=new WeakSet;#icons={};#intersectionObserver=null;#moneyFormatter=null;#quickView=null;#quickViewPromise=null;#swatchObserver=null;connectedCallback(){if(this.#config=this.#parseConfig(),!!this.#config){if(this.#abortController=new AbortController,this.#icons=window.icons||{},this.#moneyFormatter=createMoneyFormatter({currencyCode:this.#config.market.currencyCode,language:this.#config.market.language}),this.#fetcher=new AlgoliaProductFetcher({config:this.#config,signal:this.#abortController.signal}),this.#cardRenderer=new AlgoliaProductCardRenderer({config:this.#config,icons:this.#icons,isMobile:()=>this.#isMobile()}),this.#bindEvents(),!("IntersectionObserver"in window)){this.hydrate();return}this.#intersectionObserver=new IntersectionObserver(entries=>{entries.some(entry=>entry.isIntersecting)&&(this.#intersectionObserver?.disconnect(),this.#intersectionObserver=null,this.hydrate())},{rootMargin:"400px 0px"}),this.#intersectionObserver.observe(this)}}disconnectedCallback(){this.#abortController?.abort(),this.#intersectionObserver?.disconnect(),this.#swatchObserver?.disconnect()}async hydrate(scope=this){const cardProducts=new Map,familyTags=[],handles=[];(scope.matches?.("[data-product-card]")?[scope]:scope.querySelectorAll("[data-product-card]")).forEach(card=>{const product=this.#cardProduct(card);if(!product)return;const familyTag=this.#fetcher.familyTag(product);if(familyTag&&familyTags.push(familyTag),card.querySelector("[data-card-product]")){this.#observeCardSwatches(card,product);return}cardProducts.set(card,product),product.handle&&handles.push(product.handle)}),familyTags.length&&this.#fetcher.fetchRelatedProductsBatch(familyTags),await this.#renderFromAlgolia(cardProducts,handles)}#parseConfig(){const script=this.querySelector("[data-product-cards-config]");if(!script?.textContent)return null;try{return JSON.parse(script.textContent)}catch{return null}}#bindEvents(){this.addEventListener("click",this.#handleClick,{signal:this.#abortController.signal}),this.#config.quickView&&this.querySelector("[data-quick-view-overlay]")?.addEventListener("toggle",event=>this.#quickView?.handleToggle(event),{signal:this.#abortController.signal})}#handleClick=event=>{const swatch=event.target.closest("[data-card-swatch]"),quickView=event.target.closest("[data-quick-view]"),quickViewClose=event.target.closest("[data-quick-view-close]"),quickViewAdd=event.target.closest("[data-quick-view-add]"),quickViewArrow=event.target.closest("[data-quick-view-arrow]"),quickViewSize=event.target.closest("[data-quick-view-size]"),quickViewSwatch=event.target.closest("[data-quick-view-swatch]");if(this.#config.quickView&&quickView){event.preventDefault(),this.#openQuickView(quickView);return}if(this.#quickView&&quickViewClose){event.preventDefault(),this.#quickView.close();return}if(this.#quickView&&quickViewAdd){event.preventDefault(),this.#quickView.add(quickViewAdd);return}if(this.#quickView&&quickViewArrow){event.preventDefault(),this.#quickView.scrollGallery();return}if(this.#quickView&&quickViewSize){event.preventDefault(),this.#quickView.selectVariant(quickViewSize);return}if(this.#quickView&&quickViewSwatch){event.preventDefault(),this.#quickView.selectSwatch(quickViewSwatch);return}swatch&&(event.preventDefault(),this.#selectSwatch(swatch))};async#openQuickView(button){this.#quickViewPromise||(this.#quickViewPromise=import("@lyle/algolia-product-card-quick-view"));const{AlgoliaProductCardQuickView}=await this.#quickViewPromise;this.isConnected&&(this.#quickView||(this.#quickView=new AlgoliaProductCardQuickView({callbacks:{cardProduct:card=>this.#cardProduct(card),familyTag:product=>this.#fetcher.familyTag(product),fetchProductJson:handle=>this.#fetcher.fetchProductJson(handle),fetchRelatedProductsBatch:tags=>this.#fetcher.fetchRelatedProductsBatch(tags),filterColourProducts:(product,relatedProducts)=>this.#fetcher.filterColourProducts(product,relatedProducts),formatMoney:value=>this.#formatMoney(value),sendConversionEvent:()=>{}},config:this.#config,icons:this.#icons,root:this})),await this.#quickView.open(button))}async#renderFromAlgolia(cardProducts,handles){const productsByHandle=await this.#fetcher.fetchProductsByHandles(handles);

1cardProducts.forEach((liquidProduct,card)=>{if(!card.isConnected)return;const algoliaProduct=productsByHandle.get(liquidProduct.handle);algoliaProduct?this.#replaceCard(card,algoliaProduct,liquidProduct):this.#observeCardSwatches(card,liquidProduct)})}#observeCardSwatches(card,product){if(!(this.#hydratedSwatches.has(card)||!this.#fetcher.familyTag(product))){if(!("IntersectionObserver"in window)){this.#hydrateCardSwatches(card);return}this.#swatchObserver||(this.#swatchObserver=new IntersectionObserver(entries=>{entries.forEach(entry=>{entry.isIntersecting&&(this.#swatchObserver?.unobserve(entry.target),this.#hydrateCardSwatches(entry.target))})},{rootMargin:"600px 0px"})),this.#swatchObserver.observe(card)}}async#hydrateCardSwatches(card){if(this.#hydratedSwatches.has(card))return;this.#hydratedSwatches.add(card);const product=this.#cardProduct(card),familyTag=product?this.#fetcher.familyTag(product):"";if(!familyTag)return;const relatedProducts=(await this.#fetcher.fetchRelatedProductsBatch([familyTag])).get(familyTag)||[];card.isConnected&&this.#cardRenderer.renderSwatches(card,product,this.#fetcher.filterColourProducts(product,relatedProducts))}#selectSwatch(swatch){const card=swatch.closest("[data-product-card]"),product=parseJson(swatch.dataset.product);if(!card||!product)return;const currentProduct=this.#cardProduct(card);product.handle!==currentProduct?.handle&&this.#replaceCard(card,{...product,__indexName:currentProduct?.__indexName||product.__indexName,__position:currentProduct?.__position||product.__position,__queryID:currentProduct?.__queryID||product.__queryID})}#replaceCard(card,product,liquidProduct=null){const cards=[...this.querySelectorAll("[data-product-card]")],index=Math.max(cards.indexOf(card),0),template=document.createElement("template"),imageOptions=this.#cardImageOptions(card),productToRender=this.#productWithImageAlts(product,liquidProduct);template.innerHTML=this.#cardRenderer.render(productToRender,index,imageOptions).trim();const newCard=template.content.firstElementChild;newCard&&(newCard.className=card.className,imageOptions.imageOrder!=null&&(newCard.dataset.imageOrder=imageOptions.imageOrder,newCard.dataset.useAltImage=imageOptions.useAltImage?"true":"false"),card.replaceWith(newCard),this.#observeCardSwatches(newCard,productToRender))}#cardImageOptions(card){return card?.hasAttribute("data-image-order")?{imageOrder:card.dataset.imageOrder||"modal",useAltImage:card.dataset.useAltImage==="true"}:{}}#productWithImageAlts(algoliaProduct,liquidProduct){const liquidImages=liquidProduct?.images;if(!Array.isArray(liquidImages)||!liquidImages.length)return algoliaProduct;const altById=new Map,altByPath=new Map;for(const image of liquidImages){image?.id!=null&&altById.set(String(image.id),image.alt||"");const path=this.#imagePath(image?.src);path&&altByPath.set(path,image.alt||"")}const mergedImages=(algoliaProduct.images||[]).map(image=>{if(image?.alt)return image;const alt=altById.get(String(image?.id))||altByPath.get(this.#imagePath(image?.src))||"";return alt?{...image,alt}:image}),hasAltLanding=images=>(images||[]).some(image=>image?.alt?.includes("alt_landing_image"));return{...algoliaProduct,images:hasAltLanding(mergedImages)?mergedImages:hasAltLanding(liquidImages)?liquidImages:mergedImages}}#imagePath(src){if(!src)return"";try{return new URL(src,window.location.origin).pathname.replace(/_(?:\d+x(?:\d+)?|crop_center|pico|icon|thumb|small|compact|medium|large|grande|master)(?=\.|$)/g,"")}catch{return String(src).split("?")[0]}}#cardProduct(card){const script=card?.querySelector("[data-card-product], [data-product-card-json]");return parseJson(script?.textContent)}#formatMoney(value){return formatMoney(value,{currencySymbol:this.#config.market.currencySymbol,formatter:this.#moneyFormatter})}#isMobile(){return window.matchMedia("(width < 1024px)").matches}}customElements.get("lyle-product-cards")||customElements.define("lyle-product-cards",LyleProductCards);
2//# sourceMappingURL=/cdn/shop/t/458/assets/lyle-product-cards.js.map?v=126658171629247725891788364384