1class HorizontalRecommendations extends CustomRecommendations{constructor(container){super(container)}renderProducts(products){if(!products||products.length===0){this.relatedProductsContainer.innerHTML=`<div class="text-center py-8">${this.noRecommendationsText}</div>`;return}this.relatedProductsContainer.innerHTML="",this.relatedProductsContainer.appendChild(this.sliderElement),products.forEach(product=>this.renderProductCard(product)),this.initSlider()}renderProductCard(product){const card=document.createElement("div");card.className="horizontal-product card flex items-center gap-4 md:gap-6 w-full";const innerWrapper=document.createElement("div");innerWrapper.className="card__inner-content flex items-center gap-4 md:gap-6 w-full";const productId=product.id.split("/").pop(),productUrl=`/products/${product.handle}`,productTitle=product.title,productVendor=product.vendor,imageUrl=product.featuredImage?product.featuredImage.url:"",isAvailable=product.availableForSale,variantId=product.variants.edges[0]?.node.id.split("/").pop()||"",buttonLabelHtml=isAvailable?'<span class="hidden md:block" data-sold-out="Agotado">Agregar</span>':'<span class="hidden md:block" data-sold-out="Agotado">Agotado</span>',buttonDisabledAttribute=isAvailable?"":'disabled="disabled"';let cardHtml=` 2 <a class="horizontal-product__media media media--${this.container.getAttribute("data-image-ratio")||"portrait"} relative overflow-hidden flex-auto" href="${productUrl}" tabindex="-1"> 3 ${imageUrl?`<img src="${imageUrl}" alt="${productTitle}" loading="lazy" is="lazy-image">`:""} 4 </a> 5 6 <div class="horizontal-product__details flex flex-col justify-start gap-1d5"> 7 <div class="flex flex-col gap-1"> 8 <div class="block"> 9 ${this.container.getAttribute("data-show-vendor")==="true"?`<p class="text-xs text-opacity">${productVendor}</p>`:""} 10 <a href="${productUrl}" class="horizontal-product__title reversed-link font-medium text-base leading-tight">${productTitle}</a> 11 </div> 12 </div> 13 14 <div class="flex flex-col gap-1"> 15 ${this.container.getAttribute("data-show-price")==="true"?this.getPriceHtml(product):""} 16 ${this.renderPackSelector(product,productId)} 17 </div> 18 </div> 19 20 <div class="horizontal-product__quantity shrink-0 text-sm sm:block"> 21 <div class="grid gap-3"> 22 <form method="post" action="/cart/add" id="QuickAddProductForm-${this.sectionId}-${productId}" accept-charset="UTF-8" class="shopify-product-form" enctype="multipart/form-data" is="product-form"> 23 <input type="hidden" name="form_type" value="product"> 24 <input type="hidden" name="utf8" value="\u2713"> 25 <input type="hidden" name="id" value="${variantId}"> 26 <button type="submit" class="button button--primary button--small icon-with-text" is="hover-button" data-variant-id="${variantId}" aria-label="Agregar al carrito" ${buttonDisabledAttribute}> 27 <span class="btn-fill" data-fill></span> 28 <span class="btn-text"> 29 <svg class="icon icon-plus icon-2xs" viewBox="0 0 24 24" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg"> 30 <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L18 12M12 6L12 18"></path> 31 </svg> 32 ${buttonLabelHtml} 33 </span> 34 </button> 35 <input type="hidden" name="product-id" value="${productId}"> 36 <input type="hidden" name="section-id" value="${this.sectionId}"> 37 </form> 38 </div> 39 </div> 40 `;innerWrapper.innerHTML=cardHtml,card.innerHTML="",card.appendChild(innerWrapper),this.motionList.appendChild(card),this.cartRecommendationsForms&&this.cartRecommendationsForms()}getPriceHtml(product){if(!product.variants||!product.variants.edges||
40!product.variants.edges.length)return"";const variant=product.variants.edges[0].node,price=window.theme.formatMoney(parseFloat(variant.price.amount)*100,window.theme.moneyFormat);return variant.compareAtPrice&&parseFloat(variant.compareAtPrice.amount)>parseFloat(variant.price.amount)?` 41 <div class="price flex flex-wrap items-end gap-2 text-sm"> 42 <span class="price__sale">${window.theme.formatMoney(parseFloat(variant.compareAtPrice.amount)*100,window.theme.moneyFormat)}</span> 43 <span class="price__regular">${price}</span> 44 </div> 45 `:`<div class="price flex flex-wrap items-end gap-2 text-sm"><span class="price__regular">${price}</span></div>`}initSlider(){if(this.motionList&&this.motionList.children.length>1){const prevButton=this.container.querySelector('[is="previous-button"]'),nextButton=this.container.querySelector('[is="next-button"]');this.carousel=new theme.Carousel(this.motionList,{prevNextButtons:!1,adaptiveHeight:!0,pageDots:!1,contain:!0,imagesLoaded:!0,lazyLoad:!0,cellAlign:"left",rightToLeft:theme.config.rtl},{previous:prevButton,next:nextButton}),this.carousel.load();const flickity=this.carousel.slider;if(flickity){setTimeout(()=>{flickity.resize()},150);let resizeTimeout;const debounceResize=()=>{clearTimeout(resizeTimeout),resizeTimeout=setTimeout(()=>{flickity&&flickity.element&&(console.log("Flickity resize triggered by MutationObserver due to style change."),flickity.resize(),flickity.reposition())},50)},observerCallback=mutationsList=>{for(const mutation of mutationsList)if(mutation.type==="attributes"&&mutation.attributeName==="style"&&mutation.target.style.transform.includes("translateY")){debounceResize();break}};this.styleObserver=new MutationObserver(observerCallback);const observerConfig={attributes:!0,attributeFilter:["style"]};flickity.cells.forEach(cell=>{cell.element&&this.styleObserver.observe(cell.element,observerConfig)})}}}disconnectObserver(){this.styleObserver&&(this.styleObserver.disconnect(),this.styleObserver=null,console.log("Flickity style observer disconnected."))}}class CartDrawerRecommendations extends CartRecommendations{constructor(container){super(container),this.container=container,this.renderProducts=HorizontalRecommendations.prototype.renderProducts,this.renderProductCard=HorizontalRecommendations.prototype.renderProductCard,this.getPriceHtml=HorizontalRecommendations.prototype.getPriceHtml,this.initSlider=HorizontalRecommendations.prototype.initSlider,this.disconnectObserver=HorizontalRecommendations.prototype.disconnectObserver,this._drawerShowListener=this._drawerShowListener||(()=>{this.initialized||(this.initCartRecommendations(),this.initialized=!0),this.motionList&&this.motionList.children.length>1&&!this.carousel?this.initSlider():this.carousel&&this.carousel.slider&&setTimeout(()=>{this.carousel.slider.resize(),this.carousel.slider.reloadCells()},100),this.initPackVariantSelectors()}),this._cartUpdateListener=this._cartUpdateListener||(()=>{setTimeout(()=>{this.initPackVariantSelectors()},300)}),this._refreshListener=this._refreshListener||(()=>{setTimeout(()=>{this.initPackVariantSelectors(),this.carousel&&this.carousel.slider&&(this.carousel.slider.resize(),this.carousel.slider.reloadCells())},100)}),document.removeEventListener("drawer:afterShow",this._drawerShowListener),document.removeEventListener("cart:updated",this._cartUpdateListener),document.removeEventListener("cart:recommendations:refresh",this._refreshListener),document.addEventListener("drawer:afterShow",this._drawerShowListener),document.addEventListener("cart:updated",this._cartUpdateListener),document.addEventListener("cart:recommendations:refresh",this._refreshListener)}initPackVariantSelectors(){const packSelectors=this.container.querySelectorAll("pack-variant-selects");packSelectors.length&&packSelectors.forEach(selector=>{typeof selector.reinitialize=="function"?selector.reinitialize():(selector.packData===null&&typeof selector.init=="function"&&selector.init(),selector.debouncedVariantChange&&(selector.removeEventListener("change",selector.debouncedVariantChange),selector.addEventListener("change",selector.debouncedVariantChange)))})}cartRecommendationsForms(){this.container.querySelectorAll(".horizontal-product").forEach(card=>{const packSelector=card.querySelector("pack-variant-selects");if(!packSelector)return;const form=card.querySelector('form[is="product-form"], form.shopify-product-form');if(!form)return;const selectedRadio=packSelector.querySelector('input[type="radio"]:checked');if(!selectedRadio)return;const variantId=selectedRadio.dataset.variantId,isAvailable=selectedRadio.dataset.available==="true",productHandle=selectedRadio.dataset.isDefault==="true"?packSelector.dataset.productHandle:selectedRadio.value,idInput
45=form.querySelector('input[name="id"]');idInput&&variantId&&(idInput.value=variantId);const submitButton=form.querySelector('button[type="submit"]');if(submitButton)if(isAvailable)submitButton.removeAttribute("disabled"),variantId&&submitButton.setAttribute("data-variant-id",variantId);else{submitButton.setAttribute("disabled","disabled");const textSpan=submitButton.querySelector(".btn-text span");textSpan&&(textSpan.textContent="Agotado")}packSelector.hasAttribute("data-form-handler-attached")||(packSelector.addEventListener("pack-variant-change",event=>{const{variantId:variantId2,isAvailable:isAvailable2,isDefault:isDefault2,handle}=event.detail,form2=card.querySelector('form[is="product-form"], form.shopify-product-form');if(!form2)return;const idInput2=form2.querySelector('input[name="id"]');idInput2&&variantId2&&(idInput2.value=variantId2);const submitButton2=form2.querySelector('button[type="submit"]');if(submitButton2)if(isAvailable2){submitButton2.removeAttribute("disabled"),variantId2&&submitButton2.setAttribute("data-variant-id",variantId2);const textSpan=submitButton2.querySelector(".btn-text span");textSpan&&(textSpan.textContent="Agregar")}else{submitButton2.setAttribute("disabled","disabled");const textSpan=submitButton2.querySelector(".btn-text span");textSpan&&(textSpan.textContent="Agotado")}}),packSelector.setAttribute("data-form-handler-attached","true"))})}disconnectedCallback(){document.removeEventListener("drawer:afterShow",this._drawerShowListener),document.removeEventListener("cart:updated",this._cartUpdateListener),document.removeEventListener("cart:recommendations:refresh",this._refreshListener),this.styleObserver&&this.disconnectObserver(),this.carousel&&this.carousel.slider&&(this.carousel.destroy(),this.carousel=null)}}document.addEventListener("DOMContentLoaded",()=>{document.querySelectorAll("[data-cart-drawer-recommendations]").forEach(container=>{container.closest(".drawer-recommendations")&&new CartDrawerRecommendations(container)})}),document.addEventListener("cart:updated",()=>{document.querySelectorAll("[data-cart-drawer-recommendations]").forEach(container=>{if(container.closest(".drawer-recommendations")){let instance=container.__cartDrawerRecommendations;instance||(instance=new CartDrawerRecommendations(container),container.__cartDrawerRecommendations=instance),instance.initialized=!1,instance.initCartRecommendations(),instance.initialized=!0,setTimeout(()=>{instance.motionList&&instance.motionList.children.length>1&&(instance.carousel&&instance.styleObserver&&instance.disconnectObserver(),instance.initSlider()),instance.initPackVariantSelectors()},300)}})}),document.addEventListener("cart:refresh",()=>{document.dispatchEvent(new CustomEvent("cart:updated"))}); 46//# sourceMappingURL=/cdn/shop/t/11/assets/cart-drawer-recommendations.js.map?v=126831730703692442561751288550
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.