https://www.whiteandwarren.com/cdn/shop/t/360/assets/component-var…?v=123663005627099677971790108762

1import{LitElement}from"@lit";import"@nova/utils";class NovaVariantPicker extends LitElement{static properties={productUrl:{type:String,attribute:"product-url"},sectionId:{type:String,attribute:"section-id"},variantData:{type:Object},currentVariant:{type:Object,state:!0}};connectedCallback(){super.connectedCallback(),this.productUrlChanged=!1,this._initializeElements(),this._addEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this._removeEventListeners()}_initializeElements(){this.$optionInputs=this.querySelectorAll(".js-options-input"),this.$colorLegend=this.querySelector(".js-color-legend")}_addEventListeners(){for(const $input of this.$optionInputs)$input.addEventListener("change",this._handleOptionChange);document.addEventListener("nova:product:render-variant-picker",this._handleVariantPickerUpdate)}_removeEventListeners(){for(const $input of this.$optionInputs)$input.removeEventListener("change",this._handleOptionChange);document.removeEventListener("nova:product:render-variant-picker",this._handleVariantPickerUpdate)}_handleVariantPickerUpdate=event=>{this.updateContent(event.detail.html),document.dispatchEvent(new CustomEvent("nova:product:render-variant-picker-finished",{detail:{html:event.detail.html}}))};updateURL(){const searchParams=new URLSearchParams(document.location.search);this.currentVariant?.id&&searchParams.set("variant",this.currentVariant.id);const url=searchParams.size>0?`${this.productUrl}?${searchParams.toString()}`:this.productUrl;window.history.replaceState({},"",url)}_handleOptionChange=event=>{const optionType=event.target.name,selectedVariantId=Number.parseInt(event.target.dataset.variantId);if(this.currentVariant=structuredClone(this.variantData.find(variant=>variant.id===selectedVariantId)),optionType==="color"&&this.$colorLegend){const colorOptionIndex=Number.parseInt(event.target.dataset.colorOptionIndex);this.$colorLegend.textContent=this.currentVariant.options[colorOptionIndex],this.productUrlChanged=event.target.dataset.productUrl!==this.productUrl,event.target.dataset.productUrl&&(this.productUrl=event.target.dataset.productUrl)}this.updateURL(),this._fetchProductSection()};async _fetchProductSection(){const responseText=await(await fetch(`${this.productUrl}?variant=${this.currentVariant.id}&section_id=${this.sectionId}`)).text(),sectionHtml=new DOMParser().parseFromString(responseText,"text/html"),$media=sectionHtml.querySelector("nova-product-gallery");$media&&document.dispatchEvent(new CustomEvent("nova:product:render-gallery",{detail:{html:$media}}));const $variantPicker=sectionHtml.querySelector("nova-variant-picker");$variantPicker&&document.dispatchEvent(new CustomEvent("nova:product:render-variant-picker",{detail:{html:$variantPicker}}));const $form=sectionHtml.querySelector(".js-product-form");$form&&document.dispatchEvent(new CustomEvent("nova:product:render-form",{detail:{html:$form}}));const $price=sectionHtml.querySelector("nova-price");$price&&document.dispatchEvent(new CustomEvent("nova:product:render-price",{detail:{html:$price}}));const $title=sectionHtml.querySelector(".js-product-title");$title&&document.dispatchEvent(new CustomEvent("nova:product:render-title",{detail:{html:$title}}));const $description=sectionHtml.querySelector(".js-product-description");$description&&document.dispatchEvent(new CustomEvent("nova:product:render-description",{detail:{html:$description}}));const $quantity=sectionHtml.querySelector("nova-quantity-input");$quantity&&document.dispatchEvent(new CustomEvent("nova:product:render-quantity-input",{detail:{html:$quantity}}));const $upsellProducts=sectionHtml.querySelector(".js-product-upsell");$upsellProducts&&document.dispatchEvent(new CustomEvent("nova:product:render-upsell",{detail:{html:$upsellProducts}}));const $sizeGuideContent=sectionHtml.querySelector(".js-size-guide-content");$sizeGuideContent&&document.dispatchEvent(new CustomEvent("nova:product:render-size-guide",{detail:{html:$sizeGuideContent}}));const $inventoryCallout=sectionHtml.querySelector(".js-inventory-callout");$inventoryCallout&&document.dispatchEvent(new CustomEvent("nova:product:render-inventory-callout",{detail:{html:$inventoryCallout}}));const $collapsibleTabs=sectionHtml.querySelectorAll(".js-update-on-variant-change");document.dispatchEvent(new CustomEvent("nova:product:render-collapsible-tabs",{detail:{html:$collapsibleTabs}}));const $callout=sectionHtml.querySelector(".js-product-callout");$callout&&document.dispatchEvent(new CustomEvent("nova:product:render-product-callout",{detail:{html:$callout}})),this.productUrlChanged&&window.reloadKlaviyoBIS&&(this.productUrlChanged=!1,window.reloadKlaviyoBIS())}updateContent(content){if(content){for(;this.firstChild;)this.removeChild(this.firstChild);for(;content.firstChild;)this.appendChild(content.firstChild);this.requestUpdate(),this._initializeElements(),this._addEventListeners()}}createRenderRoot(){return this}}customElements.define("nova-variant-picker",NovaVariantPicker);
2//# sourceMappingURL=/cdn/shop/t/360/assets/component-variant-picker.js.map?v=123663005627099677971790108762