https://www.volero.nl/cdn/shop/t/156/assets/variant-picker.js?v=162113975382919153241787682409

1import{Component}from"@theme/component";import{VariantSelectedEvent,VariantUpdateEvent}from"@theme/events";import{morph}from"@theme/morph";import{debounce,requestYieldCallback}from"@theme/utilities";export default class VariantPicker extends Component{#pendingRequestUrl;#abortController;#userHasInteracted=!1;#prefetchedUrls=new Set;#isArrowKeyNavigation=!1;connectedCallback(){super.connectedCallback(),this.addEventListener("change",this.variantChanged.bind(this)),this.addEventListener("keydown",this.#trackArrowKeyNavigation)}#trackArrowKeyNavigation=event=>{this.#isArrowKeyNavigation=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(event.key)};prefetchPage=debounce(event=>{const link=event.target;!(link instanceof HTMLAnchorElement)||!link.href||this.#prefetchedUrls.has(link.href)||(this.#prefetchedUrls.add(link.href),fetch(link.href,{priority:"low"}))},200);variantChanged(event){if(!(event.target instanceof HTMLElement))return;const selectedOption=event.target instanceof HTMLSelectElement?event.target.options[event.target.selectedIndex]:event.target;if(!selectedOption)return;if(!this.#userHasInteracted&&this.hasAttribute("data-requires-selection")){const fieldset=event.target.closest(".variant-option"),optionPosition=fieldset instanceof HTMLElement?fieldset.dataset.optionPosition:void 0;(!fieldset||optionPosition&&parseInt(optionPosition)>1)&&(this.#userHasInteracted=!0,this.removeAttribute("data-requires-selection"))}this.updateSelectedOption(event.target),this.dispatchEvent(new VariantSelectedEvent({id:selectedOption.dataset.optionValueId??""}));const isOnProductPage=this.dataset.templateProductMatch==="true"&&!event.target.closest("product-card")&&!event.target.closest("quick-add-dialog"),currentUrl=this.dataset.productUrl?.split("?")[0],newUrl=selectedOption.dataset.connectedProductUrl,loadsNewProduct=isOnProductPage&&!!newUrl&&newUrl!==currentUrl;this.fetchUpdatedSection(this.buildRequestUrl(selectedOption),loadsNewProduct);const url=new URL(window.location.href),variantId=selectedOption.dataset.variantId||null;isOnProductPage&&(variantId?url.searchParams.set("variant",variantId):url.searchParams.delete("variant")),loadsNewProduct&&(url.pathname=newUrl),url.href!==window.location.href&&requestYieldCallback(()=>{history.replaceState({},"",url.toString())});const wasArrowKeyNavigation=this.#isArrowKeyNavigation;this.#isArrowKeyNavigation=!1,wasArrowKeyNavigation||this.closest("dialog-component")?.closeDialog()}updateSelectedOption(target){if(typeof target=="string"){const targetElement=this.querySelector(`[data-option-value-id="${target}"]`);if(!targetElement)throw new Error("Target element not found");target=targetElement}if(target instanceof HTMLInputElement&&(target.checked=!0),target instanceof HTMLSelectElement){const newValue=target.value,newSelectedOption=Array.from(target.options).find(option=>option.value===newValue);if(!newSelectedOption)throw new Error("Option not found");for(const option of target.options)option.removeAttribute("selected");newSelectedOption.setAttribute("selected","selected")}}#cardSwatchOptionValueId(quickAddBlock){return(quickAddBlock.closest("product-card")?.querySelector('swatches-variant-picker-component input[type="radio"]:checked')??null)?.dataset.optionValueId||null}buildRequestUrl(selectedOption,source=null,sourceSelectedOptionsValues=[]){let productUrl=selectedOption.dataset.connectedProductUrl||this.#pendingRequestUrl||this.dataset.productUrl;this.#pendingRequestUrl=productUrl;const params=[];this.selectedOptionsValues.length&&!source?params.push(`option_values=${this.selectedOptionsValues.join(",")}`):source==="product-card"&&(this.selectedOptionsValues.length?params.push(`option_values=${sourceSelectedOptionsValues.join(",")}`):params.push(`option_values=${selectedOption.dataset.optionValueId}`));const quickAddBlock=this.closest("quick-add-block");if(quickAddBlock||this.closest("swatches-variant-picker-component")){productUrl?.includes("?")&&(productUrl=productUrl.split("?")[0]);const sectionId=quickAddBlock?"section-rendering-quick-add":"section-rendering-product-card";if(quickAddBlock){const swatchOptionValueId=this.#cardSwatchOptionValueId(quickAddBlock);if(swatchOptionValueId){const merged=params.length?`${params[0]},${swatchOptionValueId}`:`option_values=${swatchOptionValueId}`;return`${productUrl}?section_id=${sectionId}&${merged}`}}

1return`${productUrl}?section_id=${sectionId}&${params.join("&")}`}return`${productUrl}?${params.join("&")}`}#findMatchingPicker(root){const tag=this.tagName.toLowerCase(),blockId=this.dataset.blockId;if(blockId){const byBlock=root.querySelector(`${tag}[data-block-id="${CSS.escape(blockId)}"]`);if(byBlock)return byBlock}return root.querySelector(`${tag}:not([data-cart-reward-picker])`)}fetchUpdatedSection(requestUrl,shouldMorphMain=!1){this.#abortController?.abort(),this.#abortController=new AbortController,fetch(requestUrl,{signal:this.#abortController.signal}).then(response=>response.text()).then(responseText=>{this.#pendingRequestUrl=void 0;const html=new DOMParser().parseFromString(responseText,"text/html");html.querySelector("overflow-list[defer]")?.removeAttribute("defer");const textContent=this.#findMatchingPicker(html)?.querySelector('script[type="application/json"]')?.textContent;if(textContent)if(shouldMorphMain)this.updateMain(html);else{let newProduct;this.closest("quick-add-block")||(newProduct=this.updateVariantPicker(html));const optionId=this.selectedOptionId??"";this.dispatchEvent(new VariantUpdateEvent(JSON.parse(textContent),optionId,{html,productId:this.dataset.productId??"",newProduct}))}}).catch(error=>{error.name==="AbortError"?console.warn("Fetch aborted by user"):console.error(error)})}updateVariantPicker(newHtml){let newProduct;const newVariantPickerSource=this.#findMatchingPicker(newHtml);if(!newVariantPickerSource)throw new Error("No new variant picker source found");if(newVariantPickerSource instanceof HTMLElement){const newProductId=newVariantPickerSource.dataset.productId,newProductUrl=newVariantPickerSource.dataset.productUrl;newProductId&&newProductUrl&&this.dataset.productId!==newProductId&&(newProduct={id:newProductId,url:newProductUrl}),this.dataset.productId=newProductId,this.dataset.productUrl=newProductUrl}return morph(this,newVariantPickerSource),newProduct}updateMain(newHtml){const main=document.querySelector("main"),newMain=newHtml.querySelector("main");if(!main||!newMain)throw new Error("No new main source found");morph(main,newMain)}get selectedOption(){const selectedOption=this.querySelector("select option[selected], fieldset input:checked");if(selectedOption instanceof HTMLInputElement||selectedOption instanceof HTMLOptionElement)return selectedOption}get selectedOptionId(){const{selectedOption}=this;if(!selectedOption)return;const{optionValueId}=selectedOption.dataset;if(!optionValueId)throw new Error("No option value ID found");return optionValueId}get selectedOptionsValues(){return Array.from(this.querySelectorAll("select option[selected], fieldset input:checked")).map(option=>{const{optionValueId}=option.dataset;if(!optionValueId)throw new Error("No option value ID found");return optionValueId})}}customElements.get("variant-picker")||customElements.define("variant-picker",VariantPicker);
2//# sourceMappingURL=/cdn/shop/t/156/assets/variant-picker.js.map?v=162113975382919153241787682409