https://junglueck.de/cdn/shop/t/676/assets/product-picker.js?v=114782043481731180581784807645

1class ProductPicker extends HTMLElement{siblingOptionsData=[];constructor(){super()}connectedCallback(){const optionValues=this.querySelectorAll("input.product-option-value"),scriptEl=this.querySelector("[data-sibling-metaobject]");if(!scriptEl){console.error("[product-picker] data-sibling-metaobject script not found",this);return}try{this.siblingOptionsData=JSON.parse(scriptEl.textContent)}catch(e){console.error("[product-picker] JSON parse error:",e,`
2Raw JSON:`,scriptEl.textContent);return}this.checkAvailability(optionValues);const isCollectionPage=!!this.closest(".product-grid-item");for(const optionValue of optionValues)optionValue.addEventListener("input",event=>{if(isCollectionPage)this.setProductOnTile(optionValues,event);else{const[productUrl,sku]=this.getOptionHandle.call(this,optionValues,event);productUrl&&this.setProduct.call(this,productUrl,sku)}})}getSelectedValue(event,key,optionValues){return event.target.dataset.key===key?event.target.dataset.value:Array.from(optionValues).find(option=>option.dataset.key===key&&option.checked)?.dataset.value}reduceOptionsBySelectedValues(event,optionValues){let siblingOptions=[...this.siblingOptionsData];const selectedMaterial=this.getSelectedValue(event,"material",optionValues),selectedColor=this.getSelectedValue(event,"color",optionValues),selectedSize=this.getSelectedValue(event,"size",optionValues);return selectedMaterial&&(siblingOptions=siblingOptions.filter(option=>option.material===selectedMaterial)),selectedColor&&(siblingOptions=siblingOptions.filter(option=>option.color===selectedColor)),selectedSize&&(siblingOptions=siblingOptions.filter(option=>option.size===selectedSize)),siblingOptions}getOptionHandle(optionValues,event){const eventKey=event.target.dataset.key,eventValue=event.target.dataset.value,inputValue=event.target.value;let siblingOptions=this.reduceOptionsBySelectedValues(event,optionValues);if(siblingOptions.length===0&&(siblingOptions=[...this.siblingOptionsData].filter(option=>option[eventKey]===eventValue)),!eventKey||!eventValue){const handleWithoutParams=(inputValue?.split("/")?.pop()??void 0)?.split("?")[0]??void 0,matchingSku=siblingOptions.filter(option=>handleWithoutParams==option.handle);return[inputValue,matchingSku[0].sku??""]}const path=document.location.pathname.split("/");return path.splice(-1,1),path.push(siblingOptions[0].handle),[path.join("/"),siblingOptions[0].sku]}checkAvailability(optionValues){let siblingOptions=[...this.siblingOptionsData];const availableSiblings=[],checkedOptions=this.querySelectorAll("input.product-option-value:checked"),availableOptions=[];if(checkedOptions.length===0)return;for(const sibling of siblingOptions)sibling[checkedOptions[0].dataset.key]===checkedOptions[0].dataset.value&&availableSiblings.push(sibling);for(let i=0;i<optionValues.length;i++)if(i===0)availableOptions.push(optionValues[i]);else{const siblings=availableSiblings.filter(sibling=>sibling[optionValues[i].dataset.key]===optionValues[i].dataset.value);for(const sibling of siblings)optionValues[i].dataset.value===sibling[optionValues[i].dataset.key]&&availableOptions.push(optionValues[i])}let firstKey=optionValues[0].dataset.key;for(const optionValue of optionValues){if(optionValue.dataset.key===firstKey){optionValue.disabled=!1;continue}availableOptions.indexOf(optionValue)===-1?optionValue.disabled=!0:optionValue.disabled=!1}}getSectionId(section){if(!section)return null;const sectionId=section?.id?.split("shopify-section-")?.pop();return sectionId&&sectionId!==""?sectionId:section.closest('[id^="shopify-section-"]')?.id?.split("shopify-section-")?.pop()}async fetcher(url){try{return await fetch(url.href,{credentials:"same-origin",headers:{"Content-Type":"application/json"},method:"GET"}).then(response=>response.json())}catch(e){this.classList.remove("loading"),console.error(e)}return null}async updateDOM(productUrl,variantSku){const that=this,dynamicId=that.closest(".shopify-section")?.id,sectionId=that.dataset.sectionId,newURL=new URL(productUrl,document.location.origin),product_description_section=document.querySelector("section.shopify-section-product-richtext"),product_tabs_section=document.querySelector("section.shopify-section-product-tabs"),product_about_section=document.querySelector("shopify-section.shopify-section-product-about"),product_compare_section=document.querySelector("section.shopify-section-compare-products"),product_tabs_v2_section=document.querySelector("section.shopify-section-product-tabs-v2"),product_description_id=this.getSectionId(product_description_section),product_tabs_id=this.getSectionId(product_tabs_section),product_about_id=this.getSectionId(product_about_section),product_compare_id=this.getSectionId(product_compare_section),product_tabs_v2_id=this.getSectionId(product_tabs_v2_section);newURL.searchParams.set("sections",`${sectionId}${product_description_id?","+product_description_id:""}${product_tabs_id?","+product_tabs_id:""}${product_about_id?","+product_about_id:""}${product_compare_id?","+product_compare_id:""}${product_tabs_v2_id?","+product_tabs_v2_id:""}`),that.classList.add("loading"),this.replaceAdditionalSections(productUrl);const data=await this.fetcher(newURL);if(!data)return!1;try{const template=document.createElement("template");template.innerHTML=data[sectionId].trim();const newSection=template.content.querySelector(`#shopify-section-${sectionId}`),oldSection=document.querySelector(`#shopify-section-${sectionId}`);if(that.hasAttribute("external")){const newVariantPicker=template.content.querySelector("variant-picker"),oldVariantPicker=document.querySelector(`#${dynamicId} variant-picker`),newProductPicker=template.content.querySelector("product-picker"),oldProductPicker=document.querySelector(`#${dynamicId} product-picker`),newPriceWrapper=template.content.querySelector(".product-price-wrapper"),oldPriceWrapper=document.querySelector(`#${dynamicId} .product-price-wrapper`),newProductOptionLabel=template.content.querySelector(".option-value-name"),oldProductOptionLabel=document.querySelector(`#${dynamicId} .option-value-name`),newButtonRedirect=template.content.querySelector(".product-redirect-button"),oldButtonRedirect=document.querySelector(`#${dynamicId} .product-redirect-button`),newProductTitle=template.content.querySelector(".product-title-wrapper .product-title"),oldProductTitle=document.querySelector(`#${dynamicId} .product-title-wrapper .product-title`);if(newProductTitle&&oldProductTitle&&oldProductTitle.replaceWith(newProductTitle),newButtonRedirect&&oldButtonRedirect&&oldButtonRedirect.replaceWith(newButtonRedirect),newVariantPicker&&oldVariantPicker?oldVariantPicker.replaceWith(newVariantPicker):!newVariantPicker&&oldVariantPicker?oldVariantPicker.style.display="none":newVariantPicker&&!oldVariantPicker&&oldProductPicker&&(document.querySelector(`#${dynamicId} #current-variant`)?.remove(),oldProductPicker.parentNode.insertBefore(newVariantPicker,oldProductPicker.nextSibling)),newProductPicker&&oldProductPicker&&oldProductPicker.replaceWith(newProductPicker),newPriceWrapper&&oldPriceWrapper&&oldPriceWrapper.replaceWith(newPriceWrapper),newProductOptionLabel&&oldProductOptionLabel)if(document.body.contains(oldProductOptionLabel))oldProductOptionLabel.replaceWith(newProductOptionLabel);else{const optionValueNameWrapper=document.querySelector(`#${dynamicId} .option-value-name-wrapper`);optionValueNameWrapper?optionValueNameWrapper.appendChild(newProductOptionLabel):console.log("Option value name wrapper not found")}const newVariantIdInput=template.content.querySelector("#current-variant"),oldVariantIdInput=document.querySelector(`#${dynamicId} #current-variant`),newProductIdInput=template.content.querySelector('form [name="product-id"]'),oldProductIdInput=document.querySelector(`#${dynamicId}

2 form [name="product-id"]`);newVariantIdInput&&oldVariantIdInput&&oldVariantIdInput.replaceWith(newVariantIdInput),newProductIdInput&&oldProductIdInput&&oldProductIdInput.replaceWith(newProductIdInput),window.dispatchEvent(new Event("product:changed"))}else oldSection&&newSection&&oldSection.replaceWith(newSection);if(ReviewsIoBadge?.getReviews(),window.dispatchEvent(new CustomEvent("variant:changed",{bubbles:!0,cancelable:!1,detail:variantSku})),product_description_section&&template.content.firstChild&&(template.innerHTML=data[product_description_section.id.split("shopify-section-").pop()].trim(),product_description_section.replaceWith(template.content.firstChild)),product_tabs_section){template.innerHTML=data[product_tabs_section.id.split("shopify-section-").pop()].trim();const ingredients_old=product_tabs_section.querySelector(".tab_wrapper.tab-ingredients"),ingredients_new=template.content.querySelector(".tab_wrapper.tab-ingredients");if(ingredients_old&&ingredients_new){const ingredients_old_content=ingredients_old.querySelector(".tab_content"),ingredients_new_content=ingredients_new.querySelector(".tab_content");ingredients_old_content.replaceWith(ingredients_new_content),ingredients_old.querySelector(".tab_content_wrapper").removeAttribute("style"),ingredients_old.classList.remove("open"),ingredients_old.classList.add("close")}}if(product_tabs_v2_section){const tabDrawerV2Id=this.getSectionId(product_tabs_v2_section),tabDrawerV2El=product_tabs_v2_section.querySelector("tab-drawer-v2");data[tabDrawerV2Id]&&tabDrawerV2El?.refreshFromHTML&&tabDrawerV2El.refreshFromHTML(data[tabDrawerV2Id])}if(product_compare_section&&product_compare_id&&data[product_compare_id]){template.innerHTML=data[product_compare_id].trim();const newCompareSection=template.content.firstChild;newCompareSection&&product_compare_section.replaceWith(newCompareSection)}that.classList.remove("loading")}catch(e){that.classList.remove("loading"),console.error(e)}}replaceAdditionalSections(productUrl){const replaceSections=[this.sectionReplacer(productUrl,".shopify-section.shopify-section-product-about"),this.sectionReplacer(productUrl,".shopify-section.shopify-section-product-tabs")];Promise.all(replaceSections.map(async replaceSection=>await replaceSection))}sectionReplacer(productUrl,sectionElementSelector){return new Promise(async(resolve,reject)=>{try{const sectionElement=document.querySelector(sectionElementSelector),sectionId=this.getSectionId(sectionElement),newURL=new URL(productUrl,document.location.origin);if(newURL.searchParams.set("sections",`${sectionId}`),sectionId){const data=await this.fetcher(newURL),template=document.createElement("div");template.innerHTML=data[sectionId].trim();let oldSection=document.querySelector(`#shopify-section-${sectionId}`);oldSection.querySelector(sectionElementSelector)&&(oldSection=oldSection.querySelector(sectionElementSelector)),oldSection&&oldSection.parentNode.replaceChild(template.querySelector(sectionElementSelector),oldSection),resolve()}}catch(e){console.log("##### fail",sectionElementSelector,e)}reject()})}updateURL(productUrl){const newURL=new URL(productUrl,document.location.origin);history.replaceState(null,"",newURL.href)}setProductOnTile(optionValues,event){const eventKey=event.target.dataset.key,eventValue=event.target.dataset.value;let siblingOptions;if(!eventKey||!eventValue){const handle=event.target.value?.split("/")?.pop()?.split("?")[0];siblingOptions=handle?[...this.siblingOptionsData].filter(o=>o.handle===handle):[]}else siblingOptions=this.reduceOptionsBySelectedValues(event,optionValues),siblingOptions.length===0&&(siblingOptions=[...this.siblingOptionsData].filter(o=>o[eventKey]===eventValue));if(siblingOptions.length===0)return;const sibling=siblingOptions[0],gridItem=this.closest(".product-grid-item"),variantInput=this.closest("form")?.querySelector('[name="id"]'),img=gridItem?.querySelector(".grid-item-featured-image img"),priceEl=gridItem?.querySelector(".grid-item-product-price .price");variantInput&&sibling.variant_id&&(variantInput.value=sibling.variant_id);const pw=img?.closest("picture-wrapper");if(gridItem&&sibling.image_url&&img&&(img.removeAttribute("srcset"),img.src=sibling.image_url,pw&&!pw.classList.contains("complete")&&pw.classList.add("complete")),gridItem&&sibling.url&&gridItem.querySelectorAll("a[data-product-id]").forEach(a=>{a.href=sibling.url}),gridItem&&sibling.price!=null){const moneyFormat=this.dataset.moneyFormat,fmt=cents=>

2Shopify?.theme?.tools?.formatMoney?Shopify.theme.tools.formatMoney(cents,moneyFormat):(cents/100).toFixed(2);if(priceEl){const hasDiscount=sibling.compare_at_price&&sibling.compare_at_price>sibling.price;priceEl.innerHTML=hasDiscount?`<span class="sale-price">${fmt(sibling.price)}&nbsp;</span><span class="compare-price">${fmt(sibling.compare_at_price)}</span>`:fmt(sibling.price)}const unitPriceEl=gridItem.querySelector(".grid-item-variant-unit-price");unitPriceEl&&(sibling.unit_price!=null&&sibling.unit_price_base_unit?unitPriceEl.textContent=`${fmt(sibling.unit_price)} / ${sibling.unit_price_base_unit}`:unitPriceEl.textContent="")}}setProduct(productUrl,variantSku){this.hasAttribute("external")||this.updateURL(productUrl),this.updateDOM(productUrl,variantSku)}}customElements.get("product-picker")||customElements.define("product-picker",ProductPicker);
3//# sourceMappingURL=/cdn/shop/t/676/assets/product-picker.js.map?v=114782043481731180581784807645