https://www.dropps.com/cdn/shop/t/2043/assets/scent-picker.js?v=56364867824462176381790589467

1import{Component}from"@theme/component";import{morph,MORPH_OPTIONS}from"@theme/morph";import{yieldToMainThread,getViewParameterValue}from"@theme/utilities";import{formatMoney}from"@theme/money-formatting";import{ProductSelectEvent}from"@shopify/events";export default class ScentPicker extends Component{#abortController;#scentMap={};#variantMedia={};#variantBadges=null;#boundDelegatedClick;constructor(){super(),this.#boundDelegatedClick=this.#handleDelegatedClick.bind(this)}connectedCallback(){super.connectedCallback(),this.#isProductCard?(this.#parseVariantMedia(),this.#parseVariantBadges()):(this.#parseScentData(),this.#initFromUrl()),this.addEventListener("click",this.#boundDelegatedClick)}updatedCallback(){super.updatedCallback(),this.#isProductCard?(this.#parseVariantMedia(),this.#parseVariantBadges()):this.#parseScentData()}disconnectedCallback(){super.disconnectedCallback(),this.#abortController?.abort(),this.removeEventListener("click",this.#boundDelegatedClick)}get#isProductCard(){return this.dataset.context==="product-card"||!!this.closest("product-card")}get#productCard(){return this.closest("product-card")}#parseScentData(){const script=this.querySelector('script[type="application/json"][data-scent-map]');if(script?.textContent)try{this.#scentMap=JSON.parse(script.textContent)}catch(e){console.error("[scent-picker] Failed to parse scent map JSON:",e)}}#parseVariantMedia(){const script=this.querySelector('script[type="application/json"][data-variant-media]');if(!script?.textContent){this.#variantMedia={};return}try{this.#variantMedia=JSON.parse(script.textContent)}catch(error){this.#variantMedia={},console.error("[scent-picker] Failed to parse variant media JSON:",error)}}#parseVariantBadges(){const script=this.#productCard?.querySelector('script[type="application/json"][data-variant-badges]');if(!script?.textContent){this.#variantBadges=null;return}try{this.#variantBadges=JSON.parse(script.textContent)}catch(error){this.#variantBadges=null,console.error("[scent-picker] Failed to parse variant badges JSON:",error)}}#initFromUrl(){const variantParam=new URL(window.location.href).searchParams.get("variant");if(!variantParam)return;const buttons=this.querySelectorAll(".scent-picker__option");for(const btn of buttons)btn.dataset.variantId===variantParam?(btn.setAttribute("aria-checked","true"),btn.classList.add("is-active"),this.#showDescription(btn.dataset.scentHandle||"")):(btn.setAttribute("aria-checked","false"),btn.classList.remove("is-active"))}#handleDelegatedClick(event){const target=event.target?.closest(".scent-picker__option");if(!target||!(target instanceof HTMLButtonElement)||target.disabled)return;const scentHandle=target.dataset.scentHandle,variantId=target.dataset.variantId;if(!variantId)return;if(this.#isProductCard){this.selectVariant(variantId);return}if(!scentHandle)return;const buttons=this.querySelectorAll(".scent-picker__option");for(const btn of buttons)btn.setAttribute("aria-checked","false"),btn.classList.remove("is-active");target.setAttribute("aria-checked","true"),target.classList.add("is-active");const nameLabel=this.querySelector('[ref="scentNameLabel"]');nameLabel&&(nameLabel.textContent=target.dataset.scentName||""),this.#showDescription(scentHandle);const section=this.closest(".shopify-section");if(section){const variantInput=section.querySelector('input[name="id"]');variantInput&&(variantInput.value=variantId)}this.#fetchVariantSection(variantId,target.dataset.available!=="false");const url=new URL(window.location.href);url.searchParams.set("variant",variantId),yieldToMainThread().then(()=>{history.replaceState({},"",url.toString())})}selectVariant(variantId){if(!this.#isProductCard)return;const target=this.querySelector(`.scent-picker__option[data-variant-id="${variantId}"]`);if(!target||target.disabled||target.classList.contains("is-active"))return;for(const button of this.querySelectorAll(".scent-picker__option")){const isTarget=button===target;button.classList.toggle("is-active",isTarget),button.setAttribute("aria-checked",String(isTarget))}const nameLabel=this.querySelector('[ref="scentNameLabel"]');nameLabel&&(nameLabel.textContent=target.dataset.scentName||target.getAttribute("aria-label")||"");const productCard=this.#productCard;productCard?.applyVariantToLinks(variantId),this.#showCardScentImage(variantId),this.#showCardBadges(variantId),this.#updateCardPrice(variantId),(productCard?.querySelector("card-quick-add")??null)?.selectScentByVariant?.(variantId)}#showCardBadges(variantId){const map=this.#variantBadges,productCard=this.#productCard;if(!map||!productCard)return;const container=productCard.querySelector("[data-card-badges]");if(!(container instanceof HTMLElement))return;const variantList=map.variants?.[variantId],badges=Array.isArray(variantList)&&variantList.length>0?variantList:Array.isArray(map.fallback)?map.fallback:[];if(container.replaceChildren(),badges.length===0){container.hidden=!0;return}container.hidden=!1;for(const badge of badges){if(!badge?.text)continue;const el=document.createElement("div");el.className="product-badges__badge product-badges__badge--rectangle product-badges__badge--card",el.textContent=badge.text,el.style.color=badge.textColor||"#231F20",el.style.borderColor=badge.borderColor||"transparent",el.style.backgroundColor=badge.backgroundColor||(badge.borderColor?"transparent":"#F4C9E3"),container.appendChild(el)}}#updateCardPrice(variantId){const entry=this.#variantMedia[variantId],productCard=this.#productCard;if(!entry||typeof entry.price!="number"||!productCard)return;const priceBlock=productCard.querySelector("product-price");if(!priceBlock||priceBlock.querySelector(".volume-pricing-note"))return;const container=priceBlock.querySelector('[ref="priceContainer"]');if(!container)return;const format=this.dataset.moneyFormat||"{{amount}}",currency=this.dataset.currency||"",priceSpan=(className,hiddenLabel,amount)=>{const el=document.createElement("span");if(el.className=className,hiddenLabel){const label=document.createElement("span");label.className="visually-hidden",label.textContent=`${hiddenLabel}\xA0`,el.appendChild(label)}return el.appendChild(document.createTextNode(formatMoney(Math.round(amount),format,currency))),el};entry.compareAtPrice>entry.price?container.replaceChildren(priceSpan("price-item__group price",this.dataset.labelSale||"",entry.price),priceSpan("price-item__group price-item--regular compare-at-price",this.dataset.labelRegular||"",entry.compareAtPrice)):container.replaceChildren(priceSpan("price","",entry.price))}#srcsetFrom(src){return!src||!/[?&]width=\d+/.test(src)?"":[300,500,800,1200].map(w=>`${src.replace(/([?&]width=)\d+/,`$1${w}`)} ${w}w`).join(", ")}#showCardScentImage(variantId){const media=this.#variantMedia[variantId],productCard=this.#productCard;

1if(!media||!productCard)return;if(this.#showCardHoverImage(productCard,media),media.src){const image=productCard.querySelector(".card-gallery slideshow-slide:not([hidden]) .product-media__image:not(.product-media__image--hover)")??productCard.querySelector(".card-gallery .product-media__image:not(.product-media__image--hover)");if(!image)return;const wrapper=image.closest(".product-media");wrapper instanceof HTMLElement&&media.aspect&&wrapper.style.setProperty("--ratio",String(media.aspect)),image.srcset=this.#srcsetFrom(media.src),image.src=media.src,media.alt&&(image.alt=media.alt);return}media.mediaId&&productCard.querySelector(`[slide-id="${media.mediaId}"]`)&&this.#revealVariantSlide(productCard,media.mediaId)}#showCardHoverImage(productCard,media){let hoverImage=productCard.querySelector(".card-gallery .product-media__image--hover");if(!media.hoverSrc){hoverImage&&(hoverImage.removeAttribute("srcset"),hoverImage.removeAttribute("src"),hoverImage.hidden=!0);return}hoverImage||(hoverImage=document.createElement("img"),hoverImage.className="product-media__image product-media__image--hover",hoverImage.alt="",(productCard.querySelector(".card-gallery > a")??productCard.querySelector(".card-gallery"))?.appendChild(hoverImage)),hoverImage.hidden=!1,hoverImage.srcset=this.#srcsetFrom(media.hoverSrc),hoverImage.src=media.hoverSrc}#revealVariantSlide(productCard,mediaId){for(const slide of productCard.querySelectorAll("slideshow-slide[variant-image]"))slide instanceof HTMLElement&&(slide.hidden=slide.getAttribute("slide-id")!==mediaId);productCard.refs?.slideshow?.select?.({id:mediaId},void 0,{animate:!1})}#showDescription(scentHandle){const descriptionEl=this.refs.descriptionDisplay;if(!descriptionEl)return;const descriptions=descriptionEl.querySelectorAll("[data-scent-description]");for(const desc of descriptions)desc instanceof HTMLElement&&(desc.hidden=desc.dataset.scentDescription!==scentHandle)}#fetchVariantSection(variantId,clickedAvailable=!0){this.#abortController?.abort(),this.#abortController=new AbortController;const currentSection=this.closest(".shopify-section"),sectionId=currentSection?.id?.replace("shopify-section-",""),productUrl=this.dataset.productUrl||window.location.pathname,viewParamValue=getViewParameterValue(),params=[`variant=${variantId}`];viewParamValue&&params.push(`view=${viewParamValue}`),sectionId&&params.push(`section_id=${sectionId}`);const requestUrl=`${productUrl.split("?")[0]}?${params.join("&")}`,deferredEventPromise=ProductSelectEvent.createPromise();this.dispatchEvent(new ProductSelectEvent({product:{id:this.dataset.productId??"",title:"",handle:""},selectedOptions:[],detail:{optionValueId:"",variantId,connectedProductUrl:""},promise:deferredEventPromise.promise})),fetch(requestUrl,{signal:this.#abortController.signal}).then(response=>response.text()).then(responseText=>{const html=new DOMParser().parseFromString(responseText,"text/html"),newSection=currentSection?html.querySelector("#"+currentSection.id):null;if(currentSection&&newSection){morph(currentSection,newSection,MORPH_OPTIONS);const quantitySelector=currentSection.querySelector("quantity-selector-custom"),toggle=currentSection.querySelector("subscription-toggle");quantitySelector?.updatedCallback?.(),toggle?.updatedCallback?.(),this.#parseScentData()}const renderedSwatch=html.querySelector(`.scent-picker__option[data-variant-id="${variantId}"]`),available=renderedSwatch?renderedSwatch.dataset.available!=="false":clickedAvailable;deferredEventPromise.resolve({variant:null,detail:{html,productId:this.dataset.productId??"",sourceId:"",resource:{id:variantId,available}}})}).catch(error=>{deferredEventPromise.reject(error),error.name!=="AbortError"&&console.error("[scent-picker] Fetch error:",error)})}}customElements.define("scent-picker",ScentPicker);
2//# sourceMappingURL=/cdn/shop/t/2043/assets/scent-picker.js.map?v=56364867824462176381790589467