https://www.volero.de/cdn/shop/t/156/assets/product-card.js?v=90380277391693472801788359872

1import{OverflowList}from"@theme/critical";import VariantPicker from"@theme/variant-picker";import{Component}from"@theme/component";import{debounce,isDesktopBreakpoint,mediaQueryLarge,requestYieldCallback,resetImageFadeIn}from"@theme/utilities";import{ThemeEvents,VariantSelectedEvent,SlideshowSelectEvent}from"@theme/events";import{morph}from"@theme/morph";export class ProductCard extends Component{requiredRefs=["productCardLink"];get productPageUrl(){return this.refs.productCardLink.href}getSelectedVariantId(){return this.querySelector('input[type="radio"]:checked[data-variant-id]')?.dataset.variantId||null}getProductCardLink(){return this.refs.productCardLink||null}#fetchProductPageHandler=()=>{this.refs.quickAdd?.fetchProductPage(this.productPageUrl)};#navigateToURL=(event,url)=>{if(event instanceof MouseEvent&&(event.metaKey||event.ctrlKey||event.shiftKey||event.button===1)){event.preventDefault(),window.open(url.href,"_blank");return}else window.location.href=url.href};connectedCallback(){if(super.connectedCallback(),!(this.refs.productCardLink instanceof HTMLAnchorElement))throw new Error("Product card link not found");this.#handleQuickAdd(),this.addEventListener(ThemeEvents.variantUpdate,this.#handleVariantUpdate),this.addEventListener(ThemeEvents.variantSelected,this.#handleVariantSelected),this.addEventListener(SlideshowSelectEvent.eventName,this.#handleSlideshowSelect),mediaQueryLarge.addEventListener("change",this.#handleQuickAdd),this.addEventListener("click",this.navigateToProduct),this.addEventListener("pointerenter",this.#hydrateHoverImage),this.addEventListener("focusin",this.#hydrateHoverImage),this.dataset.showSecondImage==="true"&&this.#hydrateHoverImage(),setTimeout(()=>{this.refs.slideshow?.isNested&&this.#preloadNextPreviewImage()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.navigateToProduct),this.removeEventListener("pointerenter",this.#hydrateHoverImage),this.removeEventListener("focusin",this.#hydrateHoverImage)}#hydrateHoverImage=()=>{const template=this.querySelector("template[data-hover-image]");template instanceof HTMLTemplateElement&&template.replaceWith(template.content.cloneNode(!0))};#preloadNextPreviewImage(){this.refs.slideshow?.slides?.[this.refs.slideshow?.current]?.nextElementSibling?.querySelector('img[loading="lazy"]')?.removeAttribute("loading")}#handleQuickAdd=()=>{this.removeEventListener("pointerenter",this.#fetchProductPageHandler),this.removeEventListener("focusin",this.#fetchProductPageHandler),isDesktopBreakpoint()&&(this.addEventListener("pointerenter",this.#fetchProductPageHandler),this.addEventListener("focusin",this.#fetchProductPageHandler))};#handleVariantSelected=event=>{this.#variantUpdatePending=!0,this.resetVariant.cancel(),this.#debouncedPreview.cancel(),this.#pendingPreview=null,event.target!==this.variantPicker&&this.variantPicker?.updateSelectedOption(event.detail.resource.id)};#handleVariantUpdate=event=>{event.stopPropagation(),this.#variantUpdatePending=!1,this.updatePrice(event),this.#isUnavailableVariantSelected(event),this.#updateProductUrl(event),this.#updateCardMedia(event),(this.dataset.showSecondImage==="true"||this.matches(":hover"))&&this.#hydrateHoverImage(),this.refs.quickAdd?.fetchProductPage(this.productPageUrl),event.target!==this.variantPicker&&this.variantPicker?.updateVariantPicker(event.detail.data.html),this.#updateVariantImages(),this.#previousSlideIndex=null,this.#originalImageSrc=null,this.#originalImageSrcset=null,this.removeAttribute("data-no-swatch-selected"),this.#updateOverflowList()};#updateProductUrl(event){const anchorElement=event.detail.data.html?.querySelector("product-card a");if(anchorElement instanceof HTMLAnchorElement){if(anchorElement.getAttribute("href")?.trim()==="")return;const productUrl=anchorElement.href,{productCardLink,productTitleLink,cardGalleryLink}=this.refs;productCardLink.href=productUrl,cardGalleryLink instanceof HTMLAnchorElement&&(cardGalleryLink.href=productUrl),productTitleLink instanceof HTMLAnchorElement&&(productTitleLink.href=productUrl)}}#updateOverflowList(){const overflowList=this.querySelector("swatches-variant-picker-component overflow-list"),isActiveOverflowList=!!overflowList?.querySelector('[slot="overflow"]');!overflowList||!isActiveOverflowList||requestAnimationFrame(()=>{overflowList.dispatchEvent(new CustomEvent("reflow",{bubbles:!0,detail:{}}))})}updatePrice(event){if(!event.detail.data.html)return;const priceContainers=Array.from(this.querySelectorAll("product-price [ref='priceContainer']")),newPriceElement=event.detail.data.html.querySelector("product-price [ref='priceContainer']");newPriceElement&&priceContainers.length>

10&&priceContainers.forEach(priceContainer=>{priceContainer.replaceWith(newPriceElement.cloneNode(!0))})}#updateCardMedia(event){if(!event.detail.data.html)return;const currentContent=this.querySelector(".product-card-media__content"),newContent=event.detail.data.html.querySelector(".product-card-media__content");if(currentContent&&newContent){const mediaMode=this.querySelector(".product-card-media[data-media-mode]")?.dataset.mediaMode,isSiblingUpdate=!!event.detail.data.newProduct,currentMainImage=currentContent.querySelector(".product-card-media__image"),isShowingPreview=this.#originalImageSrc!=null;if(mediaMode==="carousel")isSiblingUpdate&&this.#replaceCarouselContent(currentContent,newContent);else{if((mediaMode==="hover"||mediaMode==="single")&&this.#transformCarouselToHover(newContent,mediaMode==="single"),isShowingPreview&&currentMainImage){const newMainImage=newContent.querySelector(".product-card-media__image");if(newMainImage){const stripQuery=url=>url?.split("?")[0]||"",currentPath=stripQuery(currentMainImage.src),newPath=stripQuery(newMainImage.getAttribute("src")||"");currentPath===newPath&&(newMainImage.removeAttribute("data-fade-in"),newMainImage.setAttribute("data-loaded","true"))}}morph(currentContent,newContent)}resetImageFadeIn(currentContent)}}#transformCarouselToHover(content,disableHover=!1){const carousel=content.querySelector("basic-carousel");if(!carousel)return;const slides=carousel.querySelectorAll(".splide__slide img");if(slides.length===0)return;const baseImage=slides[0],hoverImage=slides.length>1?slides[1]:null,fragment=document.createDocumentFragment(),newBaseImage=baseImage.cloneNode(!0);if(newBaseImage.className="product-card-media__image",newBaseImage.setAttribute("data-fade-in",""),newBaseImage.setAttribute("onload","this.setAttribute('data-loaded', 'true')"),fragment.appendChild(newBaseImage),hoverImage&&!disableHover){const newHoverImage=hoverImage.cloneNode(!0);newHoverImage.className="product-card-media__hover-image",newHoverImage.setAttribute("data-fade-in",""),newHoverImage.setAttribute("onload","this.setAttribute('data-loaded', 'true')"),fragment.appendChild(newHoverImage)}content.innerHTML="",content.appendChild(fragment)}#replaceCarouselContent(currentContent,newContent){const existingCarousel=currentContent.querySelector("basic-carousel"),template=document.createElement("template");template.innerHTML=newContent.innerHTML;const firstImage=template.content.querySelector(".splide__slide img");firstImage&&(firstImage.removeAttribute("data-fade-in"),firstImage.setAttribute("data-loaded","true")),currentContent.appendChild(template.content.cloneNode(!0)),existingCarousel?.disconnectedCallback?.(),existingCarousel?.remove()}#isUnavailableVariantSelected(event){const allVariants=event.detail.data.html.querySelectorAll("input:checked");for(const variant of allVariants)this.#toggleAddToCartButton(variant.dataset.optionAvailable==="true")}#toggleAddToCartButton(enable){const addToCartButton=this.querySelector(".add-to-cart__button button");addToCartButton instanceof HTMLButtonElement&&(addToCartButton.disabled=!enable)}#updateVariantImages(){const{slideshow}=this.refs;if(!this.variantPicker?.selectedOption)return;const selectedImageId=this.variantPicker?.selectedOption.dataset.optionMediaId;if(slideshow&&selectedImageId){const{slides=[]}=slideshow.refs;for(const slide of slides)slide.getAttribute("variant-image")!=null&&(slide.hidden=slide.getAttribute("slide-id")!==selectedImageId);slideshow.select({id:selectedImageId},void 0,{animate:!1})}}get allVariants(){return this.querySelectorAll("input[data-variant-id]")}get variantPicker(){return this.querySelector("swatches-variant-picker-component")}#previousSlideIndex=null;#originalImageSrc=null;#originalImageSrcset=null;#variantUpdatePending=!1;#swatchImagesPreloaded=!1;#handleSlideshowSelect=event=>{event.detail.userInitiated&&(this.#previousSlideIndex=event.detail.index)};#getMainImage(){return this.querySelector(".product-card-media__image")}#swapImageWithTransition(image,swapCallback){const hadDataLoaded=image.hasAttribute("data-loaded");image.removeAttribute("data-loaded"),image.setAttribute("data-preview-loading","");const removeLoading=()=>{image.removeAttribute("data-preview-loading"),hadDataLoaded&&image.setAttribute("data-loaded",""),image.removeEventListener("load",removeLoading)};image.addEventListener("load",removeLoading),swapCallback(),image.complete&&removeLoading()}#pendingPreview=null;previewVariant(idOrEvent,maybeEvent){const id=idOrEvent instanceof Event?null:idOrEvent,event=idOrEvent instanceof Event?idOrEvent:maybeEvent;if(!isDesktopBreakpoint()||event.pointerType!=="mouse")return;this.resetVariant.cancel();const{slideshow}=this.refs;if(slideshow&&id){slideshow.select({id},void 0,{animate:!1});return}this.#pendingPreview={target:event.target},this.#debouncedPreview()}preloadSwatchImages(){if(this.#swatchImagesPreloaded)return;this.#swatchImagesPreloaded=!0;const urls=new Set;for(const el of this.querySelectorAll("[data-preview-image-url]")){const url=el.dataset.previewImageUrl;url&&urls.add(url)}for(const url of urls){const img=new Image;img.src=url}}#debouncedPreview=debounce(()=>{if(!this.#pendingPreview)return;const previewImageUrl=this.#pendingPreview.target.dataset.previewImageUrl;if(!previewImageUrl)return;const mainImage=this.#getMainImage();if(!mainImage)return;this.querySelector("basic-carousel.product-card-carousel")?.goTo?.(0),this.#originalImageSrc||(this.#originalImageSrc=mainImage.src,this.#originalImageSrcset=mainImage.srcset),this.#swapImageWithTransition(mainImage,()=>{mainImage.srcset="",mainImage.src=previewImageUrl})},100);previewImage(event){if(event.pointerType!=="mouse")return;const{slideshow}=this.refs;slideshow&&(this.resetVariant.cancel(),this.#previousSlideIndex!=null&&this.#previousSlideIndex>0?slideshow.select(this.#previousSlideIndex,void 0,{animate:!1}):(slideshow.next(void 0,{animate:!1}),setTimeout(()=>this.#preloadNextPreviewImage())))}resetImage(event){if(event.pointerType!=="mouse")return;const{slideshow}=this.refs;if(this.variantPicker)this.#resetVariant();

1else{if(!slideshow)return;slideshow.previous(void 0,{animate:!1})}}#resetVariant=()=>{if(this.#variantUpdatePending)return;this.#debouncedPreview.cancel(),this.#pendingPreview=null;const{slideshow}=this.refs;if(!slideshow){if(this.#originalImageSrc){const mainImage=this.#getMainImage();if(mainImage){const originalSrc=this.#originalImageSrc,originalSrcset=this.#originalImageSrcset;this.#swapImageWithTransition(mainImage,()=>{mainImage.src=originalSrc,originalSrcset&&(mainImage.srcset=originalSrcset)})}this.#originalImageSrc=null,this.#originalImageSrcset=null}this.querySelector("basic-carousel.product-card-carousel")?.goTo?.(0);return}if(this.variantPicker?.selectedOption){const id=this.variantPicker.selectedOption.dataset.optionMediaId;if(id){slideshow.select({id},void 0,{animate:!1});return}}const initialSlide=slideshow.initialSlide,slideId=initialSlide?.getAttribute("slide-id");if(initialSlide&&slideshow.slides?.includes(initialSlide)&&slideId){slideshow.select({id:slideId},void 0,{animate:!1});return}slideshow.previous(void 0,{animate:!1})};navigateToProduct=event=>{if(!(event.target instanceof Element)||this.hasAttribute("data-no-navigation")||event.target.closest('button, input, label, select, [tabindex="1"]'))return;const link=this.refs.productCardLink;if(!link.href)return;const linkURL=new URL(link.href),productCardAnchor=link.getAttribute("id");if(!productCardAnchor)return;const url=new URL(window.location.href),parent=this.closest("li");url.hash=productCardAnchor,parent&&parent.dataset.page&&url.searchParams.set("page",parent.dataset.page),window.Shopify.designMode||requestYieldCallback(()=>{history.replaceState({},"",url.toString())}),event.target.closest("a")||this.#navigateToURL(event,linkURL)};resetVariant=debounce(this.#resetVariant,100)}customElements.get("product-card")||customElements.define("product-card",ProductCard);class SwatchesVariantPickerComponent extends VariantPicker{variantChanged(event){if(!(event.target instanceof HTMLElement))return;const clickedSwatch=event.target,connectedProductUrl=clickedSwatch.dataset.connectedProductUrl,currentProductUrl=this.dataset.productUrl?.split("?")[0];if(connectedProductUrl&&connectedProductUrl!==currentProductUrl){event.stopPropagation(),this.updateSelectedOption(clickedSwatch),this.dispatchEvent(new VariantSelectedEvent({id:clickedSwatch.dataset.optionValueId??""}));const url=new URL(connectedProductUrl,window.location.origin);url.searchParams.set("section_id","section-rendering-product-card"),this.fetchUpdatedSection(url.href);return}const isSwatchInput=event.target instanceof HTMLInputElement&&event.target.name?.includes("-swatch"),availableCount=parseInt(clickedSwatch.dataset.availableCount||"0"),firstAvailableVariantId=clickedSwatch.dataset.firstAvailableOrFirstVariantId;if(isSwatchInput&&availableCount>0&&firstAvailableVariantId){event.stopPropagation(),this.updateSelectedOption(clickedSwatch);const productUrl=this.dataset.productUrl?.split("?")[0];if(!productUrl)return;const url=new URL(productUrl,window.location.origin);url.searchParams.set("variant",firstAvailableVariantId),url.searchParams.set("section_id","section-rendering-product-card");const requestUrl=url.href;this.fetchUpdatedSection(requestUrl);return}super.variantChanged(event)}showAllSwatches(event){event?.preventDefault();const{overflowList}=this.refs;overflowList instanceof OverflowList&&overflowList.showAll()}}customElements.get("swatches-variant-picker-component")||customElements.define("swatches-variant-picker-component",SwatchesVariantPickerComponent);
2//# sourceMappingURL=/cdn/shop/t/156/assets/product-card.js.map?v=90380277391693472801788359872