class CustomProduct extends HTMLElement{constructor(){super();const selectors={mediaImage:".drawer_recommend__image",form:".drawer-rec__form-wrapper>form",variantSelect:".recomd-product__select",variantsJson:".pr_variants_json",optionsJson:".pr_options_json",priceWrapper:".recomd-product__price-group",nowPrice:".recomd-product__price",comparePrice:".recomd-product__compare_price",swatch:".drawer-rec-inner",swatchOption:" .recomd-swatch__option",swatchOptionLabel:".recomd-swatch__title .recomd-swatch__current",swatchOptionItem:".recomd-swatch__item",qtyMinus:".quantity-selector.is--minus",qtyPlus:".quantity-selector.is--plus",qtyInput:".quantity-input",buybutton:".drawer-rec__form-btn-submit"},marks={selectedClass:"is--selected",optionDisabledClass:"is--disabled",soldStatus:{available:"available",soldOut:"sold-out"},activeClass:"active"},elements={mediaImage:this.querySelector(selectors.mediaImage),buyButton:this.querySelector(selectors.buybutton),form:this.querySelector(selectors.form),variantSelect:this.querySelector(selectors.variantSelect),variantsJson:this.querySelector(selectors.variantsJson),optionsJson:this.querySelector(selectors.optionsJson),priceWrapper:this.querySelector(selectors.priceWrapper),nowPrice:this.querySelector(selectors.nowPrice),comparePrice:this.querySelector(selectors.comparePrice),swatch:this.querySelector(selectors.swatch),swatchOptionList:this.querySelectorAll(selectors.swatchOption),swatchOptionItemList:this.querySelectorAll(selectors.swatchOptionItem),qtyMinus:this.querySelector(selectors.qtyMinus),qtyPlus:this.querySelector(selectors.qtyPlus),qtyInput:this.querySelector(selectors.qtyInput)},variantsJson=JSON.parse(elements.variantsJson.innerHTML),optionsJson=JSON.parse(elements.optionsJson.innerHTML),_refOrigin={variant:null},proxyHander={get(target,key){return target[key]},set(target,property,value){return target[property]=value,handleRefChanged(_refOrigin),!0}},ref=new Proxy(_refOrigin,proxyHander),selectOptons=[];for(let option of optionsJson)selectOptons[option.position-1]=option.values[0];ref.variant=variantsJson.find((v,i)=>v.available==!0);function handleRefChanged(refOrigin){elements.variantSelect.value=refOrigin.variant.id,selectOptons.length=0,selectOptons.push(...refOrigin.variant.options);for(let optionEl of elements.swatchOptionList){const optionPosition=optionEl.getAttribute("data-option-position"),labelEl=optionEl.querySelector(selectors.swatchOptionLabel);labelEl.innerHTML=selectOptons[optionPosition-1]}for(let optionItemEl of elements.swatchOptionItemList){const optionPosition=optionItemEl.getAttribute("data-option-position"),value=optionItemEl.getAttribute("data-value"),nowIsActived=optionItemEl.classList.contains(marks.selectedClass),needIsActived=value==selectOptons[optionPosition-1];nowIsActived!=needIsActived&&(nowIsActived?(optionItemEl.classList.remove(marks.selectedClass),optionItemEl.setAttribute("aria-checked","false"),optionItemEl.setAttribute("tabindex","-1")):(optionItemEl.classList.add(marks.selectedClass),optionItemEl.setAttribute("aria-checked","true"),optionItemEl.setAttribute("tabindex","0")));const tempOptions=[...selectOptons];tempOptions[optionPosition-1]=value;const isExist=variantsJson.findIndex(v=>v.available.toString()=="true"&&v.options.toString()==tempOptions.toString())>-1,isDisabled=optionItemEl.classList.contains(marks.optionDisabledClass);isExist==isDisabled&&(isExist?optionItemEl.classList.remove(marks.optionDisabledClass):optionItemEl.classList.add(marks.optionDisabledClass))}ref.variant.featured_image&&elements.mediaImage.querySelector("img").setAttribute("src",ref.variant.featured_image.src);const comparePrice=ref.variant.compare_at_price,price=ref.variant.price;elements.comparePrice.innerHTML=comparePrice&&comparePrice>0?`${window.active_currency_symbol}${(comparePrice/100).toFixed(2)}`:"",elements.nowPrice.innerHTML=`${window.active_currency_symbol}${(price/100).toFixed(2)}`,elements.priceWrapper.setAttribute("data-discounted",comparePrice>price),elements.form.setAttribute("data-sold-status",refOrigin.variant.available?marks.soldStatus.available:marks.soldStatus.soldOut),elements.buyButton.setAttribute("data-variant-id",elements.variantSelect.value)}elements.variantSelect.addEventListener("change",e=>{const variantId=elements.variantSelect.value,selectedVariant=variantsJson.find((v,i,obj)=>v.id==variantId);ref.variant=selectedVariant}),elements.qtyMinus.addEventListener("click",e=>{elements.qtyInput.value>1&&elements.qtyInput.value--}),elements.qtyPlus.addEventListener("click",e=>{elements.qtyInput.value<(ref.variant.quantity_rule.max??1/0)&&elements.qtyInput.value++}),elements.swatchOptionList.forEach(swatchitem=>{swatchitem.addEventListener("click",e=>{const currentEl=e.target;if(currentEl.classList.contains(marks.selectedClass))return;currentEl.classList.remove(marks.selectedClass);const optionPosition=currentEl.getAttribute("data-option-position"),optionValue=currentEl.getAttribute("data-value");selectOptons[optionPosition-1]=optionValue;const find=variantsJson.find((v,i)=>v.options.toString()==selectOptons.toString());find&&(ref.variant=find)}),swatchitem.addEventListener("keyup",e=>{let target=e.target;e.key=="Tab"&&target.click();let element=target.closest(".recomd-swatch__list"),index=parseInt(target.getAttribute("data-index")),total_size=parseInt(element.querySelectorAll(".recomd-swatch__item").length),next_index=index+1,prev_index=index-1;if(next_index>total_size&&(next_index=1),prev_index<1&&(prev_index=total_size),e.key=="ArrowRight"||e.key=="ArrowDown"){let nextEl=element.querySelector(`.recomd-swatch__item[data-index='${next_index}']`);nextEl.click(),nextEl.focus()}if(e.key=="ArrowLeft"||e.key=="ArrowUp"){let prevEl=element.querySelector(`.recomd-swatch__item[data-index='${prev_index}']`);prevEl.click(),prevEl.focus()}})})}}customElements.define("custom-product",CustomProduct);
//# sourceMappingURL=/cdn/shop/t/106/assets/component-recommend-product.js.map?v=136317391252127299711752133284