function readImageTemplate(image,fallbackWidths){if(!(image instanceof HTMLImageElement))return{widths:fallbackWidths,sizes:null,width:null,height:null};const widths=[...image.srcset.matchAll(/(\d+)w/g)].map(match=>Number(match[1]));return{widths:widths.length?widths:fallbackWidths,sizes:image.getAttribute("sizes"),width:image.getAttribute("width"),height:image.getAttribute("height")}}function escapeAttr(value){return String(value).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}if(!customElements.get("quick-add-custom-component")){class QuickAddCustomComponent extends HTMLElement{constructor(){super(),this.variants=[],this.selectedOptions={},this.form=null,this.variantInput=null,this.submitBtn=null,this.btnText=null,this.feedback=null,this.feedbackText=null,this._siblingCache=new Map,this._fetchToken=0,this._siblingsRequested=!1}connectedCallback(){this.init()}init(){const variantsJson=this.querySelector("[data-variants-json]");if(variantsJson)try{this.variants=JSON.parse(variantsJson.textContent),this._originalVariants=[...this.variants]}catch(e){console.error("Failed to parse variants JSON:",e)}this._originalProductId=this.dataset.productId,this.form=this.querySelector('[data-type="add-to-cart-form"]'),this.variantInput=this.querySelector("[data-variant-input]"),this.submitBtn=this.querySelector("[data-add-to-cart-btn]"),this.btnText=this.querySelector("[data-btn-text]"),this.feedback=this.querySelector("[data-feedback]"),this.feedbackText=this.querySelector("[data-feedback-text]"),this._originalSizesHTML=this.querySelector(".quick-add-custom__sizes")?.innerHTML??null;const cardGallery=this.closest(".card-gallery");cardGallery?(this._mode="slideshow",this._slideshow=cardGallery.querySelector("slideshow-component")??null,this._slideshowScroller=this._slideshow?.querySelector('[ref="scroller"]')??null,this._originalScrollerHTML=this._slideshowScroller?.innerHTML??null,this._slideImageTemplate=readImageTemplate(this._slideshowScroller?.querySelector("img"),[400,800,1200]),this._cardImg=null,this._cardLink=cardGallery.querySelector('[ref="cardGalleryLink"]')??null):(this._mode="simple",this._cardImg=this.closest(".product-card-simple__media")?.querySelector(".product-card-simple__image")??null,this._originalImageSrc=this._cardImg?.src??null,this._originalImageSrcset=this._cardImg?.srcset??null,this._cardImageTemplate=readImageTemplate(this._cardImg,[200,300,400,500,600]),this._cardLink=this.closest(".product-card-simple__link")??null),this._cardLinks=[...new Set([...this.closest("product-card")?.querySelectorAll('[ref="productCardLink"], [ref="productTitleLink"], [ref="cardGalleryLink"]')??[],...this._cardLink?[this._cardLink]:[]])].map(link=>({link,href:link.href})),this.initializeSelectedOptions(),this.bindEvents()}initializeSelectedOptions(){this.selectedOptions={},this.updateVariant()}bindEvents(){this.addEventListener("click",e=>e.stopPropagation()),this.addEventListener("click",e=>{const btn=e.target.closest(".quick-add-custom__size-btn");btn&&this.handleOptionClick(e,btn)});const colorsContainer=this.querySelector("[data-siblings-colors]");colorsContainer&&(colorsContainer.addEventListener("mouseover",e=>{const btn=e.target.closest(".quick-add-custom__color-btn");btn&&btn.dataset.self!=="true"&&btn.dataset.handle&&this.prefetchSiblingHandle(btn.dataset.handle)}),colorsContainer.addEventListener("click",e=>{const btn=e.target.closest(".quick-add-custom__color-btn");btn&&(e.preventDefault(),e.stopPropagation(),this.handleSiblingColorBtn(btn))}),this.bindSiblingsIntent()),this.form&&this.form.addEventListener("submit",e=>this.handleSubmit(e))}bindSiblingsIntent(){const revealRoot=this.closest(".card-gallery, .product-card-simple__media")||this.parentElement,load=()=>{if(this._siblingsRequested)return;const container=this.querySelector("[data-siblings-colors]");container&&(this._siblingsRequested=!0,this.loadQuickAddSiblings(container))};for(const target of new Set([revealRoot,this].filter(Boolean)))target.addEventListener("pointerenter",load),target.addEventListener("focusin",load)}handleOptionClick(event,btn){if(event.preventDefault(),event.stopPropagation(),btn||(btn=event.currentTarget),btn.disabled)return;this.selectedOptions[btn.dataset.optionIndex]=btn.dataset.optionValue;const variant=this.updateVariant();this.updateSizeAvailability(),variant?.available&&this.handleSubmit(event,btn)}prefetchSiblingHandle(handle){!handle||this._siblingCache.has(handle)||fetch("/products/"+handle+".js").then(r=>r.json()).then(data=>this._siblingCache.set(handle,data)).catch(()=>{})}handleSiblingColorBtn(btn){const colorsContainer=this.querySelector("[data-siblings-colors]");if(colorsContainer&&colorsContainer.querySelectorAll(".quick-add-custom__color-btn").forEach(b=>b.classList.remove("is-selected")),btn.classList.add("is-selected"),btn.dataset.self==="true"){this.restoreOriginal();return}this.selectSibling(btn.dataset.handle)}selectSibling(handle){if(!handle)return;if(this._siblingCache.has(handle)){this.rebuildFromProduct(this._siblingCache.get(handle));return}this.classList.add("is-loading"),this.submitBtn&&(this.submitBtn.disabled=!0);const token=++this._fetchToken;fetch("/products/"+handle+".js").then(r=>r.json()).then(data=>{token===this._fetchToken&&(this._siblingCache.set(handle,data),this.rebuildFromProduct(data),this.classList.remove("is-loading"))}).catch(()=>{token===this._fetchToken&&(this.classList.remove("is-loading"),this.showFeedback("Error al cargar tallas"))})}loadQuickAddSiblings(container){const styleRef=container.dataset.styleRef;if(!styleRef)return;const currentHandle=container.dataset.currentHandle;if(window.ColorSiblings){window.ColorSiblings.fetch(styleRef).then(siblings=>{siblings&&this.renderQuickAddSiblings(container,siblings,currentHandle)});return}const params=["q="+encodeURIComponent(styleRef),"resources[type]=product","resources[limit]=20","resources[options][fields]=tag","resources[options][unavailable_products]=show"].join("&");fetch("/search/suggest.json?"+params).then(r=>r.json()).then(json=>{const results=json.resources&&json.resources.results&&json.resources.results.products||[],erpPrefix=styleRef+"-",styleRefLower=styleRef.toLowerCase(),siblings=results.filter(p=>p.tags&&p.tags.length?p.tags.some(t=>t.indexOf(erpPrefix)===0):p.handle.indexOf(styleRefLower)!==-1);this.renderQuickAddSiblings(container,siblings,currentHandle)}).catch(()=>{})}renderQuickAddSiblings(container,siblings,currentHandle){if(!siblings||siblings.length===0)return;const otherSiblings=siblings.filter(s=>s.handle!==currentHandle&&s.available!==!1);if(otherSiblings.length===0)return;const fragment=document.createDocumentFragment();otherSiblings.forEach(sibling=>{const colorName=window.ColorSiblings?window.ColorSiblings.getColorName(sibling):this._getSiblingColorName(sibling),btn=document.createElement("button");btn.type="button",btn.className="quick-add-custom__color-btn",btn.dataset.handle=sibling.handle,btn.setAttribute("aria-label",colorName),btn.setAttribute("title",colorName);const imgObj=sibling.featured_image||sibling.image,imgUrl=imgObj&&imgObj.url;if(imgUrl){const optimizedUrl=imgUrl+(imgUrl.indexOf("?")!==-1?"&":"?")+"width=80";btn.style.backgroundImage="url("+optimizedUrl+")",btn.style.backgroundSize="var(--color-picker-photo-zoom, 600%)",btn.style.backgroundPosition="center 40%"}const span=document.createElement("span");span.className="visually-hidden",span.textContent=colorName,btn.appendChild(span),fragment.appendChild(btn)}),container.appendChild(fragment)}_getSiblingColorName(product){if(product.variants&&product.variants.length>0){const variantTitle=product.variants[0].title;if(variantTitle&&variantTitle!=="Default Title"){const parts=variantTitle.split(" / ");return parts[parts.length-1]}}return product.title}restoreOriginal(){this.variants=[...this._originalVariants],this.dataset.productId=this._originalProductId;const sizeContainer=this.querySelector(".quick-add-custom__sizes");sizeContainer&&this._originalSizesHTML!==null&&(sizeContainer.innerHTML=this._originalSizesHTML),this.selectedOptions={},this.updateVariant();const colorsContainer=this.querySelector("[data-siblings-colors]");if(colorsContainer){colorsContainer.querySelectorAll(".quick-add-custom__color-btn").forEach(b=>b.classList.remove("is-selected"));const selfBtn=colorsContainer.querySelector('[data-self="true"]');selfBtn&&selfBtn.classList.add("is-selected")}this._mode==="slideshow"?this._slideshowScroller&&this._originalScrollerHTML!==null&&(this._slideshowScroller.innerHTML=this._originalScrollerHTML,this._resetSlideshowToFirst()):this._cardImg&&this._originalImageSrc&&(this._cardImg.src=this._originalImageSrc,this._cardImg.srcset=this._originalImageSrcset??"");for(const{link,href}of this._cardLinks)link.href=href}rebuildFromProduct(productData){const sizeContainer=this.querySelector(".quick-add-custom__sizes");if(!sizeContainer)return;const sizeIndex=parseInt(sizeContainer.dataset.optionIndex),sizeOption=productData.options[sizeIndex];if(!sizeOption)return;this.variants=productData.variants.map(v=>({id:v.id,available:v.available,options:v.options,title:v.title,price:v.price})),this.dataset.productId=productData.id;const isSizeAvailable=value=>productData.variants.some(v=>v.options[sizeIndex]===value&&v.available);sizeContainer.innerHTML=sizeOption.values.map(value=>{const available=isSizeAvailable(value),escapedValue=escapeAttr(value),label=available?`Agregar talla ${value} a la bolsa`:`Talla ${value} agotada`;return``}).join(""),this.selectedOptions={},this.updateVariant(),this.updateCardImage(productData);for(const{link}of this._cardLinks)link.href="/products/"+productData.handle}updateCardImage(productData){if(this._mode==="slideshow")this._rebuildSlideshow(productData.images??[]);else{if(!this._cardImg)return;const rawUrl=productData.featured_image;if(!rawUrl)return;const base=rawUrl.split("?")[0],url=base.startsWith("//")?"https:"+base:base,{widths}=this._cardImageTemplate;this._cardImg.src=`${url}?width=${widths[widths.length-1]}`,this._cardImg.srcset=widths.map(w=>`${url}?width=${w} ${w}w`).join(", ")}}_rebuildSlideshow(images){if(!this._slideshowScroller||!images.length)return;const fragment=document.createDocumentFragment();images.slice(0,5).forEach((rawUrl,index)=>{const base=rawUrl.split("?")[0],url=base.startsWith("//")?"https:"+base:base,slide=document.createElement("slideshow-slide");slide.setAttribute("ref","slides[]"),slide.setAttribute("aria-hidden",index===0?"false":"true"),slide.setAttribute("slide-id",`sibling-${index}`),slide.className="product-media-container media-fit product-media-container--image";const{widths,sizes,width,height}=this._slideImageTemplate,img=document.createElement("img");img.src=`${url}?width=${widths[widths.length-1]}`,img.srcset=widths.map(w=>`${url}?width=${w} ${w}w`).join(", "),sizes&&(img.sizes=index===0?sizes.replace(/^auto,\s*/,""):sizes),width&&(img.width=Number(width)),height&&(img.height=Number(height)),img.loading=index===0?"eager":"lazy",img.className="product-media",img.alt="",slide.appendChild(img),fragment.appendChild(slide)}),this._slideshowScroller.innerHTML="",this._slideshowScroller.appendChild(fragment),this._resetSlideshowToFirst()}_resetSlideshowToFirst(){this._slideshow&&requestAnimationFrame(()=>{try{this._slideshow.select(0,null,{animate:!1})}catch{}})}updateVariant(){const matchingVariant=this.variants.find(variant=>Object.keys(this.selectedOptions).every(index=>variant.options[parseInt(index)]===this.selectedOptions[index]));return matchingVariant?(this.variantInput.value=matchingVariant.id,this.classList.remove("needs-selection"),this.submitBtn&&(this.submitBtn.disabled=!matchingVariant.available),this.btnText&&(this.btnText.textContent=matchingVariant.available?"Agregar a la bolsa":"Agotado")):this.classList.add("needs-selection"),matchingVariant}updateSizeAvailability(){const sizeContainer=this.querySelector(".quick-add-custom__sizes");if(!sizeContainer)return;const sizeIndex=parseInt(sizeContainer.dataset.optionIndex);sizeContainer.querySelectorAll(".quick-add-custom__size-btn").forEach(btn=>{const sizeValue=btn.dataset.optionValue,isAvailable=this.variants.some(v=>v.options[sizeIndex]===sizeValue&&v.available);btn.classList.toggle("is-unavailable",!isAvailable),btn.disabled=!isAvailable})}async handleSubmit(event,sourceBtn){if(event.preventDefault(),event.stopPropagation(),this._submitting)return;if(!this.variantInput.value||this.submitBtn?.disabled){this.showFeedback("Selecciona una talla");return}this._submitting=!0;const stateEl=sourceBtn??this,textEl=sourceBtn?null:this.btnText,originalText=textEl?.textContent??null;stateEl.classList.add("is-loading"),textEl&&(textEl.textContent="Agregando...");const restore=()=>{stateEl.classList.remove("is-loading","is-added"),textEl&&originalText!==null&&(textEl.textContent=originalText)};clearTimeout(stateEl._restoreTimer);try{const formData=new FormData(this.form),sectionsToUpdate=new Set;document.querySelectorAll("cart-items-component").forEach(el=>{el instanceof HTMLElement&&el.dataset.sectionId&§ionsToUpdate.add(el.dataset.sectionId)}),sectionsToUpdate.size>0&&(formData.append("sections",Array.from(sectionsToUpdate).join(",")),formData.append("sections_url",window.location.pathname));const response=await fetch(window.Shopify?.routes?.root+"cart/add.js",{method:"POST",body:formData}),result=await response.json();if(response.ok){stateEl.classList.remove("is-loading"),stateEl.classList.add("is-added"),textEl&&(textEl.textContent="Agregado"),this._animateFlyToCart(stateEl);const cart=await(await fetch(window.Shopify?.routes?.root+"cart.js")).json(),standardEvent=new CustomEvent("shopify:cart:lines-update",{bubbles:!0});standardEvent.promise=Promise.resolve({cart,detail:{source:"quick-add-custom",sections:result.sections,didError:!1}}),document.dispatchEvent(standardEvent),document.dispatchEvent(new CustomEvent("cart:update",{bubbles:!0,detail:{resource:cart,sourceId:"quick-add-custom",data:{source:"quick-add-custom",itemCount:cart.item_count,variantId:String(this.variantInput.value),productId:this.dataset.productId}}})),stateEl._restoreTimer=setTimeout(restore,2e3)}else restore(),this.showFeedback(result.message||"Error al agregar")}catch(error){console.error("Add to cart error:",error),restore(),this.showFeedback("Error de conexi\xF3n")}finally{this._submitting=!1}}_getCardImageUrl(){const img=this._mode==="slideshow"?this._slideshowScroller?.querySelector("img"):this._cardImg;return img?.currentSrc||img?.src||null}_animateFlyToCart(sourceEl){if(!customElements.get("fly-to-cart")||window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const destination=document.querySelector(".header-actions__cart-icon"),image=this._getCardImageUrl();if(!destination||!sourceEl||!image)return;const fly=document.createElement("fly-to-cart");fly.classList.add("fly-to-cart--plp"),fly.style.setProperty("background-image",`url(${image})`),fly.style.setProperty("--start-opacity","0"),fly.source=sourceEl,fly.destination=destination,document.body.appendChild(fly)}showFeedback(message){this.feedback&&this.feedbackText&&(this.feedbackText.textContent=message,this.feedback.hidden=!1,setTimeout(()=>{this.feedback.hidden=!0},3e3))}}customElements.define("quick-add-custom-component",QuickAddCustomComponent)} //# sourceMappingURL=/cdn/shop/t/35/assets/gco-quick-add-custom.js.map?v=37944292429106648821792619221