https://www.thirdlove.com/cdn/shop/t/11121/assets/component-comple…?v=52153242283426066401790858346

1customElements.get("component-complete-the-look")||customElements.define("component-complete-the-look",class extends HTMLElement{constructor(){super(),this.props={shopUrl:this.dataset.shopUrl,productsSource:this.dataset.productsSource,productId:this.dataset.productId,productShowLimit:this.dataset.productShowLimit,intent:this.dataset.intent,designMode:this.dataset.designMode==="true"}}connectedCallback(){!this.props.designMode&&this.props.productsSource=="api"&&(this.fetchRecommendations(this.props.productId),document.addEventListener("update-pdp-sections",event=>{this.fetchRecommendations(event.detail.productId)}))}fetchRecommendations(productId){const productRecommendationsSection=this.querySelector(".js-template");fetch(window.Shopify.routes.root+`recommendations/products?product_id=${productId}&limit=${this.props.productShowLimit}&section_id=complete-the-look-products&intent=${this.props.intent}`).then(response=>response.text()).then(text=>{text?(productRecommendationsSection.innerHTML=text,this.classList.remove("hidden"),setTimeout(()=>this.equalizeAllColorHeights(),500)):this.classList.add("hidden")}).catch(error=>{console.error(error),this.classList.add("hidden")})}equalizeAllColorHeights(){if(window.innerWidth<1025)return;const allColorContainers=this.querySelectorAll(".js-colors");if(allColorContainers.length===0)return;allColorContainers.forEach(container=>{container.style.minHeight=""});let maxHeight=0;allColorContainers.forEach(container=>{const height=container.offsetHeight;height>maxHeight&&(maxHeight=height)}),maxHeight>0&&allColorContainers.forEach(container=>{container.style.minHeight=`${maxHeight}px`})}async processProduct(product){if(product.status==="active"&&product.product_type!=="Kit"&&product.images?.length>0&&product.handle){const html=await this.getProductHTML(product.handle),div=document.createElement("div");return div.innerHTML=html,div}return null}async getProductHTML(handle){let response=await fetch(`${window.Shopify.routes.root}products/${handle}?view=complete-the-look-product`,{method:"get"});if(!response.ok)throw new Error(`HTTP error! status: ${response.status}`);return response=await response.text(),response}}),customElements.get("component-complete-the-look-product")||customElements.define("component-complete-the-look-product",class extends HTMLElement{constructor(){super(),this.componentId=`complete-look-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,this.state={bandSize:null,cupSize:null,formFitSize:"",product:"",response:"",trueSize:"",selectedVariantId:null,selectedVariant:null,selectedColor:null},this.props={url:this.dataset.url,productHandle:this.dataset.productHandle,id:this.dataset.productId||this.componentId,productType:this.dataset.productType},this.dom={parentComponent:this.closest("component-complete-the-look")},this.props.useTrueSize=this.dom.parentComponent?.dataset.useTrueSize==="true"}connectedCallback(){this.renderCompleteTheLook()}async renderCompleteTheLook(){const response=await fetch(`${this.props.url}${this.props.url.includes("?")?"&":"?"}view=complete-the-look-json&currency=${window.Shopify.currency.active}&country=${window.Shopify.country}`,{method:"get"});if(!response.ok)throw new Error(`HTTP error! status: ${response.status}`);this.state.response=await response.json(),this.state.product=await this.getProduct(),this.renderColors(),this.hasBandCup()?(this.renderSizes("band",0,2),this.renderSizes("cup",2,void 0)):this.renderSizes("alpha",0,void 0),this.handleSizeSelection(),this.handleAddToBag(),this.handleColorSwatchChange(),this.selectFirstColor(),setTimeout(()=>this.equalizeColorHeights(),100),setTimeout(()=>this.equalizeColorHeights(),400),window.addEventListener("resize",()=>this.equalizeColorHeights())}selectFirstColor(){const options=this.querySelectorAll(".js-colors .js-color");if(options.length>0){const input=options[0].querySelector(".js-input");input.checked=!0;const event=new Event("change",{bubbles:!0});input.dispatchEvent(event)}}equalizeColorHeights(){const parentContainer=this.dom.parentComponent;if(!parentContainer)return;

1const allColorContainers=parentContainer.querySelectorAll(".js-colors");if(allColorContainers.length===0)return;allColorContainers.forEach(container=>{container.style.minHeight=""});let maxHeight=0;allColorContainers.forEach(container=>{const height=container.offsetHeight;height>maxHeight&&(maxHeight=height)}),maxHeight>0&&allColorContainers.forEach(container=>{container.style.minHeight=`${maxHeight}px`})}async getProduct(){let response=await fetch(`${window.Shopify.routes.root}products/${this.props.productHandle}?view=collection-grid-json`,{method:"get"});if(!response.ok)throw new Error(`HTTP error! status: ${response.status}`);return response=await response.json(),response}async setTrueSize(){const isUnderwear=this.state.response.type==="Panties",trueSize=await getTrueSize();trueSize&&(this.state.trueSize=isUnderwear?trueSize.underwear_size:`${trueSize.bra_band}${trueSize.bra_cup}`)}async renderColors(){if(this.state.product?.colors&&Object.keys(this.state.product.colors).length>0)for(const color in this.state.product.colors){let showColorSwatch=!1,hasAvailableSize,availableSize;if(this.props.sizeType==="formFit"&&this.props.formFitSize)hasAvailableSize=this.state.product.colors[color].availableSizes.some(el=>el.includes(this.props.formFitSize)),availableSize=this.props.formFitSize;else if(this.props.sizeType==="alpha"&&this.props.alphaSize)hasAvailableSize=this.state.product.colors[color].availableSizes.some(el=>el.includes(this.props.alphaSize)),availableSize=this.props.alphaSize;else if(this.props.sizeType==="bra"&&this.props.braSize){const range=this.getRange(this.props.braSize);hasAvailableSize=this.state.product.colors[color].availableSizes.some(el=>el.includes(this.props.braSize)||el.includes(range)),availableSize=this.props.braSize}else showColorSwatch=!0;if(hasAvailableSize&&(this.state.availableSize=availableSize,showColorSwatch=!0),showColorSwatch){const colorTemplate=this.querySelector(".js-template-color").content.cloneNode(!0);window.theme.colors[color]&&(window.theme.colors[color].image&&colorTemplate.querySelector(".js-label").style.setProperty("--swatch-image",`url(${window.theme.colors[color].image}`),colorTemplate.querySelector(".js-label").style.setProperty("--swatch-color",window.theme.colors[color].color),colorTemplate.querySelector(".js-label").style.setProperty("--swatch-border-color","#fff")),color===this.props.color&&(colorTemplate.querySelector(".js-input").checked=!0,colorTemplate.querySelector(".js-color").classList.add("first")),colorTemplate.querySelector(".js-label").setAttribute("for",`color_${color}_${this.props.id}`),colorTemplate.querySelector(".js-label").dataset.color=color,colorTemplate.querySelector(".js-input").value=color,colorTemplate.querySelector(".js-input").id=`color_${color}_${this.props.id}`,this.querySelector(".js-colors").appendChild(colorTemplate)}this.querySelector(".js-colors").classList.add("opacity-1")}else this.querySelector(".js-colors").classList.remove("colors")}handleColorSwatchChange(){const self=this;this.querySelectorAll(".js-colors .js-input").forEach(color=>{color.addEventListener("change",()=>{self.querySelectorAll(".js-colors .js-color").forEach(option=>{option.classList.remove("selected")}),color.closest(".js-color").classList.add("selected"),self.querySelectorAll(".js-link").forEach(link=>{self.state.availableSize?link.href=`${self.state.product.colors[color.value].url}${self.state.product.colors[color.value].url.includes("?")?"&":"?"}size=${self.state.availableSize}`:link.href=self.state.product.colors[color.value].url});let img;if(img=self.state.product.colors[color.value].images[0].src,self.renderImages(img),this.state.response.availableSizes=self.state.product.colors[color.value].availableSizes,self.state.selectedColor=color.value,self.hasBandCup()){self.state.bandSize=null,self.state.cupSize=null,self.state.selectedVariantId=null,self.state.selectedVariant=null;const bandDropdown=self.querySelector(".js-sizes .js-size-band .js-size-dropdown"),cupDropdown=self.querySelector(".js-sizes .js-size-cup .js-size-dropdown");bandDropdown&&(bandDropdown.selectedIndex=0,bandDropdown.disabled=!1,bandDropdown.parentElement&&bandDropdown.parentElement.classList.remove("size-selected")),cupDropdown&&(cupDropdown.selectedIndex=0,cupDropdown.disabled=!0,cupDropdown.parentElement&&cupDropdown.parentElement.classList.remove("size-selected")),self.updateSizeDropdown("band"),self.updateSizeDropdown("cup"),self.checkAndEnableAddToBagButton()}

1else{const alphaDropdown=self.querySelector(".js-sizes .js-size-alpha .js-size-dropdown");alphaDropdown&&(alphaDropdown.disabled=!1),self.updateSizeDropdown("alpha")}const productUrl=self.state.product.colors[color.value].url;fetch(`${productUrl}.js`).then(response=>response.json()).then(data=>{const variantsArray=data.variants,newVariants={};variantsArray.forEach(variant=>{const key=variant.option2;newVariants[key]={id:variant.id,sku:variant.sku,price:variant.price,compare_at_price:variant.compare_at_price}}),this.state.response.variants=newVariants}).catch(error=>{console.error("Error to get product:",error)})})})}updateSizeDropdown(name){var sizeSelect,availableSizes;name==="alpha"?(sizeSelect=this.querySelector(".js-sizes .js-size-alpha .js-size-dropdown"),availableSizes=this.state.response.availableSizes):name==="band"?(sizeSelect=this.querySelector(".js-sizes .js-size-band .js-size-dropdown"),availableSizes=[...new Set(this.state.response.availableSizes.map(size=>size.substring(0,2)))]):name==="cup"&&(sizeSelect=this.querySelector(".js-sizes .js-size-cup .js-size-dropdown"),availableSizes=[...new Set(this.state.response.availableSizes.map(size=>size.substring(2)))]),sizeSelect&&Array.from(sizeSelect.options).forEach(option=>{availableSizes.includes(option.getAttribute("data-size"))?option.disabled=!1:option.disabled=!0}),sizeSelect&&sizeSelect.parentElement&&sizeSelect.parentElement.classList.remove("size-selected"),this.state.selectedVariantId=null,this.state.selectedVariant=null,this.checkAndEnableAddToBagButton(),sizeSelect&&sizeSelect.options.length>0&&(sizeSelect.selectedIndex=0)}renderImages(img){img&&(this.querySelector(".js-featured-product-img").classList.add("lazyloading"),this.querySelector(".js-featured-product-img").dataset.src=img,this.querySelector(".js-featured-product-img").dataset.srcset=getSrcset(img,this.props.defaultImgSize),this.querySelector(".js-featured-product-img").classList.add("lazyload"))}hasBandCup(){return this.props.productType==="Bra"&&!this.state.product.tags.includes("alpha")}renderSizes(name,subStart,subEnd){const product=this.getProduct(),sizeTemplate=this.querySelector(".js-template-size").content.cloneNode(!0);sizeTemplate.querySelector(".js-size").classList.add(`js-size-${name}`);let sizes=Object.keys(this.state.response.variants);name==="cup"&&this.state.bandSize&&(sizes=sizes.filter(size=>size.substring(0,2)===this.state.bandSize)),sizes=sizes.map(size=>size.substring(subStart,subEnd)),sizes=[...new Set(sizes)],name!=="alpha"&&(sizes.sort(),sizes.sort(a=>a==="AA"?-1:0));const defaultOptionTemplate=sizeTemplate.querySelector(".js-template-size-option").content.cloneNode(!0),defaultOption=defaultOptionTemplate.querySelector(".js-size-option");let defaultLabel=name==="alpha"?"Select Size":`Select ${name.charAt(0).toUpperCase()+name.slice(1)}`;defaultLabel=defaultLabel[0].toUpperCase()+defaultLabel.slice(1),defaultOption.innerHTML=defaultLabel,defaultOption.disabled=!0,defaultOption.selected=!0,sizeTemplate.querySelector(".js-size-dropdown").appendChild(defaultOptionTemplate);for(let size of sizes){let label=size;size==="E"&&(label+=" (DD)"),size==="E\xBD"&&(label+=" (DD\xBD)"),size==="E-E\xBD"&&(label+=" (DD-DD\xBD)"),size==="F"&&(label+=" (DDD)"),size==="G"&&(label+=" (DDDD)"),size==="H"&&(label+=" (DDDDD)"),size==="I"&&(label+=" (DDDDDD)");const optionTemplate=sizeTemplate.querySelector(".js-template-size-option").content.cloneNode(!0),canadaPrice=parseFloat(label.slice(1))*this.props.cadExchangeRate,moneyPrice=`$${Math.ceil(canadaPrice.toFixed(2))}`;optionTemplate.querySelector(".js-size-option").innerHTML=this.isCanada&&product.type?.toLowerCase()?.includes("gift card")?moneyPrice:label,optionTemplate.querySelector(".js-size-option").dataset.size=size,optionTemplate.querySelector(".js-size-option").dataset.name=name;let populateSize=!1;(name==="band"&&size===this.state.bandSize||name==="cup"&&size===this.state.cupSize||name==="alpha")&&(populateSize=!0);let outOfStock;name==="cup"&&this.state.bandSize&&this.getSiblingColor().availableSizes.filter(size2=>size2.substring(0,2)===this.state.bandSize).map(size2=>size2.substring(2)).indexOf(size)===-1&&(outOfStock=!0),name==="alph

1a"&&this.state.response.availableSizes.indexOf(size)===-1&&(outOfStock=!0),outOfStock&&optionTemplate.querySelector(".js-size-option").classList.add("out-of-stock-option"),sizeTemplate.querySelector(".js-size-dropdown").appendChild(optionTemplate)}this.querySelector(".js-sizes").appendChild(sizeTemplate);const sizeDropdown=this.querySelector(`.js-sizes .js-size-${name} .js-size-dropdown`);sizeDropdown&&(this.state.selectedColor?name==="cup"&&!this.state.bandSize&&(sizeDropdown.disabled=!0):sizeDropdown.disabled=!0)}handleSizeSelection(){this.querySelector(".js-sizes")&&this.querySelector(".js-sizes").addEventListener("change",event=>{if(this.hasBandCup()){event.target.parentElement.parentElement.classList.contains("js-size-band")&&(this.state.bandSize=event.target.value,event.target.parentElement.classList.add("size-selected"),this.updateCupOptionsBasedOnBand()),event.target.parentElement.parentElement.classList.contains("js-size-cup")&&(this.state.cupSize=event.target.value,event.target.parentElement.classList.add("size-selected"));const selectedSize=this.state.bandSize+this.state.cupSize,variantId=this.state.response.variants[selectedSize]?.id;variantId&&(this.state.selectedVariantId=variantId,this.state.selectedVariant=this.state.response.variants[selectedSize],this.querySelector(".js-add-to-bag-error").classList.add("hidden"),this.checkAndEnableAddToBagButton())}else{const selectedSize=event.target.value,variantId=this.state.response.variants[selectedSize]?.id;variantId&&(this.state.selectedVariantId=variantId,this.state.selectedVariant=this.state.response.variants[selectedSize],this.querySelector(".js-add-to-bag-error").classList.add("hidden"),this.checkAndEnableAddToBagButton())}})}updateCupOptionsBasedOnBand(){const cupDropdown=this.querySelector(".js-sizes .js-size-cup .js-size-dropdown");if(!cupDropdown)return;if(!this.state.bandSize){cupDropdown.disabled=!0,this.state.cupSize=null,this.state.selectedVariantId=null,this.state.selectedVariant=null,this.checkAndEnableAddToBagButton();return}cupDropdown.disabled=!1;const availableSizesForBand=this.state.response.availableSizes.filter(size=>size.substring(0,2)===this.state.bandSize),availableCupSizes=[...new Set(availableSizesForBand.map(size=>size.substring(2)))];Array.from(cupDropdown.options).forEach(option=>{const cupSize=option.getAttribute("data-size");cupSize&&availableCupSizes.includes(cupSize)?(option.disabled=!1,option.classList.remove("out-of-stock-option")):cupSize&&(option.disabled=!0,option.classList.add("out-of-stock-option"))}),this.state.cupSize&&!availableCupSizes.includes(this.state.cupSize)&&(this.state.cupSize=null,cupDropdown.selectedIndex=0,cupDropdown.parentElement&&cupDropdown.parentElement.classList.remove("size-selected")),this.state.cupSize||(this.state.selectedVariantId=null,this.state.selectedVariant=null,this.checkAndEnableAddToBagButton())}checkAndEnableAddToBagButton(){const addToBagBtn=this.querySelector(".js-add-to-bag");addToBagBtn&&this.state.selectedVariantId&&this.state.selectedVariant&&this.state.selectedVariantId!==null&&this.state.selectedVariant!==null&&this.state.selectedVariantId!==void 0&&this.state.selectedVariant!==void 0?addToBagBtn.removeAttribute("disabled"):addToBagBtn&&addToBagBtn.setAttribute("disabled","disabled")}handleAddToBag(){if(this.querySelector(".js-add-to-bag")){const addToBagBtn=this.querySelector(".js-add-to-bag");addToBagBtn&&addToBagBtn.setAttribute("disabled","disabled"),this.querySelector(".js-add-to-bag").addEventListener("click",async event=>{if(this.state.selectedVariantId){event.preventDefault();try{this.querySelector(".js-add-to-bag").innerHTML="Adding to Bag",this.querySelector(".js-add-to-bag").classList.add("add-to-bag-btn--loading");const payload={id:this.state.selectedVariantId,quantity:1,properties:{_tags:filterProductTags(this.state.response.tags)}},price=this.state.selectedVariant?this.state.selectedVariant.price:this.state.response.price,compareAtPrice=this.state.selectedVariant?this.state.selectedVariant.compare_at_price:this.state.response.compare_at_price;window.Shopify.country==="CA"&&compareAtPrice&&compareAtPrice>price?(payload.properties._compareAtPrice=Math.trunc(compareAtPrice/100/window.i18n_cad_exchange_rate)*100,payload.properties._compareAtPriceCa=compareAtPrice):compareAtPrice&&compareAtPrice>price&&(payload.properties._compareAtPrice=compareAtPrice,payload.properties._compareAtPriceCa=Math.ceil(compareAtPrice/100*window.i18n_cad_exchange_rate)*100),window.cart_settings?.checkoutFinalSaleLabel&&payload.properties._tags?.includes("__label: Final Sale")&&(payload.properties["Final Sale"]=window.cart_settings.checkoutFinalSaleLabel),await window.cartManager.addItem(payload),window.dispatchEvent(new CustomEvent("update-cart")),window.sendGTMData&&window.sendGTMData({event:"complete-the-look-item-ad

1ded",page_location:window.location.href||null,customer_id:window.theme.customer.id||null,product_id:window.cartManager.getLocalCart().items.filter(pd=>pd.id===this.state.selectedVariantId)[0]?.product_id,variant_id:this.state.selectedVariantId}),this.querySelector(".js-add-to-bag").classList.remove("add-to-bag-btn--loading"),this.querySelector(".js-add-to-bag-error").classList.add("hidden"),this.querySelector(".js-add-to-bag").innerHTML="Add to Bag"}catch{this.querySelector(".js-add-to-bag-error").textContent="Sorry, please try again later",this.querySelector(".js-add-to-bag-error").classList.remove("hidden")}}else this.querySelector(".js-add-to-bag-error").textContent="Select a size",this.querySelector(".js-add-to-bag-error").classList.remove("hidden")})}}});
2//# sourceMappingURL=/cdn/shop/t/11121/assets/component-complete-the-look.js.map?v=52153242283426066401790858346