https://float-from.com/cdn/shop/t/3/assets/variant-picker.js?v=90525394629431151391761310819

1import{Component}from"@theme/component";import{VariantSelectedEvent,VariantUpdateEvent}from"@theme/events";import{morph}from"@theme/morph";export default class VariantPicker extends Component{#pendingRequestUrl;#abortController;connectedCallback(){super.connectedCallback(),this.addEventListener("change",this.variantChanged.bind(this));const initialVariantId=this.querySelector("input[data-variant-id]:checked, select option[selected]")?.dataset.variantId;initialVariantId&&this.updateVariantLimit(initialVariantId)}variantChanged(event){if(!(event.target instanceof HTMLElement))return;this.updateSelectedOption(event.target),this.dispatchEvent(new VariantSelectedEvent({id:event.target.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=event.target.dataset.connectedProductUrl,loadsNewProduct=isOnProductPage&&!!newUrl&&newUrl!==currentUrl;this.fetchUpdatedSection(this.buildRequestUrl(event.target),loadsNewProduct);const url=new URL(window.location.href);let variantId;event.target instanceof HTMLInputElement&&event.target.type==="radio"?variantId=event.target.dataset.variantId||null:event.target instanceof HTMLSelectElement&&(variantId=event.target.options[event.target.selectedIndex]?.dataset.variantId||null),isOnProductPage&&(variantId?url.searchParams.set("variant",variantId):url.searchParams.delete("variant")),loadsNewProduct&&(url.pathname=newUrl),url.href!==window.location.href&&history.replaceState({},"",url.toString()),variantId?this.updateVariantLimit(variantId):this.resetVariantLimit()}updateVariantLimit(variantId){const messageEl=this.closest("variant-picker, quick-add-component")?.querySelector("#variant-limit-message")||document.querySelector("#variant-limit-message"),numberEl=messageEl?.querySelector(".variant-limit-number"),qtyInput=(this.closest("#quick-add-modal-content")||this.closest(".product-details")||this.closest("product-form-component"))?.querySelector('input[name="quantity"]');if(!messageEl||!numberEl||!qtyInput)return;const maxQty=document.querySelector(`[data-variant-id="${variantId}"]`)?.dataset.maximumQuantity||null;maxQty?(numberEl.textContent=maxQty,messageEl.style.setProperty("display","block","important"),qtyInput.setAttribute("max",maxQty),parseInt(qtyInput.value,10)>parseInt(maxQty,10)&&(qtyInput.value=maxQty)):this.resetVariantLimit()}resetVariantLimit(){const messageEl=this.closest("variant-picker, quick-add-component")?.querySelector("#variant-limit-message")||document.querySelector("#variant-limit-message"),numberEl=messageEl?.querySelector(".variant-limit-number"),qtyInput=(this.closest("#quick-add-modal-content")||this.closest(".product-details")||this.closest("product-form-component"))?.querySelector('input[name="quantity"]');!messageEl||!numberEl||!qtyInput||(messageEl.style.display="none",numberEl.textContent="",qtyInput.removeAttribute("max"))}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")}}buildRequestUrl(selectedOption,source=null,sourceSelectedOptionsValues=[]){let productUrl=selectedOption.dataset.connectedProductUrl||this.#pendingRequestUrl||this.dataset.productUrl;this.#pendingRequestUrl=productUrl;const params=[];return 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}`)),this.closest("quick-add-component")||this.closest("swatches-variant-picker-component")?(productUrl?.includes("?")&&(productUrl=productUrl.split("?")[0]),`${productUrl}?section_id=section-rendering-product-card&${params.join("&")}`):`${productUrl}?${params.join("&")}`}

1fetchUpdatedSection(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=html.querySelector('variant-picker script[type="application/json"]')?.textContent;if(textContent)if(shouldMorphMain)this.updateMain(html);else{const newProduct=this.updateVariantPicker(html);this.selectedOptionId&&this.dispatchEvent(new VariantUpdateEvent(JSON.parse(textContent),this.selectedOptionId,{html,productId:this.dataset.productId??"",newProduct}))}}).catch(error=>{error.name==="AbortError"?console.log("Fetch aborted by user"):console.error(error)})}updateVariantPicker(newHtml){let newProduct;const newVariantPickerSource=newHtml.querySelector(this.tagName.toLowerCase());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}morph(this,newVariantPickerSource);const currentVariantId=this.querySelector("input[data-variant-id]:checked, select option[selected]")?.dataset.variantId;let limitMessageEl=this.querySelector(".variant-limit-message");return limitMessageEl||(limitMessageEl=document.createElement("p"),limitMessageEl.id="variant-limit-message",limitMessageEl.className="variant-limit-message",limitMessageEl.style.setProperty("display","block","important"),limitMessageEl.innerHTML='\u3053\u306E\u5546\u54C1\u306F\u304A\u4E00\u4EBA\u69D8<span class="variant-limit-number"></span>\u500B\u307E\u3067\u3067\u3059\u3002',this.appendChild(limitMessageEl)),currentVariantId&&this.updateVariantLimit(currentVariantId),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/3/assets/variant-picker.js.map?v=90525394629431151391761310819