https://wallaroohats.com/cdn/shop/t/264/assets/alpine-product.js?v=88274743487923712621780354556

1document.addEventListener("alpine:init",()=>{Alpine.data("LinkedProducts",type=>({linkedProductsType:"",$section:null,$products:[],products:[],hasSpecs:!1,init(){let am=this;am.linkedProductsType=type,document.addEventListener("init-LinkedProducts",e=>{am.$section||(am.$section=e.target,am.$products=[...am.$section.querySelectorAll("[data-linked-product]")],(async()=>{let px_products=am.$products.map($item=>{let handle=$item.dataset.linkedProduct;return fetch(`/products/${handle}.js`).then(res=>res.json())});am.products=await Promise.all(px_products),am.UpdateLinkedProductUrls()})())}),subscribe(PUB_SUB_EVENTS.variantChange,e=>{am.UpdateLinkedProductUrls(e.data.variant.options)})},UpdateLinkedProductUrls(current_values){let am=this;am.products.length&&am.$products.forEach($product=>{let handle=$product.dataset.linkedProduct,product=am.products.find(p=>p.handle==handle);if(!product)return;current_values||(current_values=JSON.parse($product.dataset.current_values));let optionIdsToMatch=[1,2,3];am.linkedProductsType&&(optionIdsToMatch=optionIdsToMatch.filter(id=>product.options.map(opt=>opt.name).indexOf(am.linkedProductsType)!==id-1));let valuesToMatch=optionIdsToMatch.map(id=>current_values[id-1]),matching_variant=product.variants.find(v=>optionIdsToMatch.map(id=>v[`option${id}`]).join("/")==valuesToMatch.join("/"));if(!matching_variant)return;$product.setAttribute("href",`/products/${handle}?variant=${matching_variant.id}`);const shapeLabel=$product.querySelector("label");shapeLabel&&shapeLabel.classList.toggle("disabled",!(matching_variant&&matching_variant.available))})}}))});class SizeDrawer extends HTMLElement{constructor(){super(),this.addEventListener("keyup",evt=>evt.code==="Escape"&&this.close());const overlay=this.querySelector("#SizeDrawer-Overlay");overlay&&overlay.addEventListener("click",this.close.bind(this));const closeButton=this.querySelector(".size-drawer-button");closeButton&&closeButton.addEventListener("click",this.close.bind(this))}open(triggeredBy){triggeredBy&&this.setActiveElement(triggeredBy),customElements.upgrade(this),setTimeout(()=>{this.classList.add("animate","active")}),this.addEventListener("transitionend",()=>{const containerToTrapFocusOn=this.querySelector(".drawer__inner")||this,focusElement=this.querySelector(".size-drawer-button")||this.querySelector(".drawer__inner");focusElement&&typeof trapFocus=="function"&&trapFocus(containerToTrapFocusOn,focusElement)},{once:!0}),document.body.classList.add("overflow-hidden")}close(){this.classList.remove("active"),this.activeElement&&typeof removeTrapFocus=="function"&&removeTrapFocus(this.activeElement),document.body.classList.remove("overflow-hidden")}setActiveElement(element){this.activeElement=element}}customElements.define("size-drawer",SizeDrawer),customElements.get("size-chart-trigger")||customElements.define("size-chart-trigger",class extends HTMLElement{constructor(){super();const button=this.querySelector("button");button&&button.addEventListener("click",evt=>{evt.preventDefault(),evt.stopPropagation();let sizeDrawer=null;this.parentNode&&(sizeDrawer=this.parentNode.querySelector("size-drawer")),sizeDrawer||(sizeDrawer=document.querySelector("size-drawer")),sizeDrawer?(console.log("Found size drawer, showing it"),sizeDrawer.open(button)):console.error("Size drawer not found")})}});class ProductShopifySimilarStyles extends HTMLElement{connectedCallback(){return(async()=>{try{if(!this.querySelector("template#productListCardTemplate")){console.warn("[ShopifySimilarStyles] Card template not found");return}const products=await this.getData();products&&products.length>0?(products.forEach(product=>{if(product?.id){const card=this.createProductCardItem(product);card&&this.appendChild(card)}}),this.setAttribute("loaded","true")):this.style.display="none"}catch(error){console.warn("[ShopifySimilarStyles] Error loading component:",error)}})()}async getData(){const productId=this.dataset.productId;if(!productId)return console.warn("[ShopifySimilarStyles] Missing productId"),[];const url=`/recommendations/products.json?product_id=${productId}&limit=6&intent=related`,response=await fetch(url);if(!response.ok)throw new Error(`HTTP ${response.status}`);return((await response.json()).products||[]).filter(p=>p.vendor?.toLowerCase()!=="carkella").slice(0,3)}

1formatPrice(priceCents){if(priceCents==null)return"";const amount=Number(priceCents)/100;return new Intl.NumberFormat(document.documentElement.lang||"en",{style:"currency",currency:window.Shopify?.currency?.active||"USD",minimumFractionDigits:2}).format(amount)}getColorOptionKey(product){const colorNames=["color","colour"];if(product.options){for(const opt of product.options)if(colorNames.includes(opt.name.toLowerCase()))return`option${opt.position}`}return product.options?.length>1?"option2":"option1"}buildColorVariants(product){const colorKey=this.getColorOptionKey(product),seen=new Set,result=[];for(const v of product.variants){const colorValue=v[colorKey];!colorValue||seen.has(colorValue)||(seen.add(colorValue),result.push({colorValue,price:v.price,compare_at_price:v.compare_at_price,variantId:v.id,featuredImage:v.featured_image||null}))}return result}createProductCardItem(product){if(!product?.variants?.length)return null;const firstVariant=product.variants.find(v=>v?.price!=null);if(!firstVariant)return null;const template=this.querySelector("template#productListCardTemplate");if(!template?.content?.firstElementChild)return null;const cardElement=template.content.firstElementChild.cloneNode(!0),titleEl=cardElement.querySelector(".product-list-card__title"),priceEl=cardElement.querySelector(".product-list-card__price");titleEl&&(titleEl.textContent=product.title||""),priceEl&&(priceEl.textContent=this.formatPrice(firstVariant.price));const modalOpener=cardElement.querySelector("modal-opener"),button=cardElement.querySelector(".product-list-card__button");modalOpener&&button&&(modalOpener.setAttribute("data-modal",`#QuickAdd-shopify-${product.id}`),button.setAttribute("data-product-url",this.getProductLink(product.handle,firstVariant.id)),button.setAttribute("aria-haspopup","dialog"),button.setAttribute("aria-labelledby",`quick-add-shopify-${product.id}-submit title-shopify-${product.id}`),button.id=`quick-add-shopify-${product.id}-submit`),setTimeout(()=>{try{const modal=this.createDawnQuickAddModal(product);if(modal){const wrapper=document.createElement("div");wrapper.className="shopify-section",wrapper.id=`shopify-section-similar-${product.id}`,wrapper.appendChild(modal),document.body.appendChild(wrapper)}}catch(err){console.warn("[ShopifySimilarStyles] Error creating modal:",err)}},500),this.updateProductLink(cardElement,product);const heroImg=firstVariant.featured_image,imgContainer=cardElement.querySelector(".product-list-card__image");if(imgContainer){if(heroImg?.src){const el=this.createProductCardImage(heroImg);el&&imgContainer.appendChild(el)}else if(product.featured_image){const el=document.createElement("img"),src=String(product.featured_image);el.src=src.startsWith("//")?`https:${src}`:src,el.alt=product.title||"",imgContainer.appendChild(el)}}const colorVariants=this.buildColorVariants(product),displayVariants=colorVariants.slice(0,4),swatchContainer=cardElement.querySelector(".product-list-card__color-swatches");

1if(swatchContainer){displayVariants.forEach((variant,index)=>{const swatch=this.createColorSwatch(variant,index,cardElement,product);swatch&&swatchContainer.appendChild(swatch)});const extra=colorVariants.length-displayVariants.length;if(extra>0){const extraSpan=this.createExtraColorsSpan(extra);extraSpan&&swatchContainer.appendChild(extraSpan)}}return cardElement}getProductLink(handle,variantId){return handle?`/products/${handle}${variantId?`?variant=${variantId}`:""}`:"#"}updateProductLink(cardElement,product,variantId){cardElement.querySelectorAll("[data-product-link]").forEach(el=>{el.setAttribute("href",this.getProductLink(product.handle,variantId))})}deselectSwatches(cardElement){cardElement.querySelectorAll(".variant-swatch").forEach(s=>s.classList.remove("selected"))}createProductCardImage(image){if(!image?.src)return null;const img=document.createElement("img"),src=String(image.src);return img.src=src.startsWith("//")?`https:${src}`:src,image.alt&&(img.alt=image.alt),image.width&&(img.width=image.width),image.height&&(img.height=image.height),img}createColorSwatch(variant,index,cardElement,product){const swatchTemplate=this.querySelector("template#productSwatchTemplate");if(!swatchTemplate?.content?.firstElementChild)return null;const swatch=swatchTemplate.content.firstElementChild.cloneNode(!0);index===0&&swatch.classList.add("selected");const labelEl=swatch.querySelector(".variant-swatch__label");labelEl&&(labelEl.textContent=`${product.title}-${variant.colorValue}`);const img=variant.featuredImage;if(img?.src){const src=img.src.startsWith("//")?`https:${img.src}`:img.src;swatch.setAttribute("data-image",src),swatch.setAttribute("data-image-alt",img.alt||""),swatch.style.backgroundImage=`url(${src})`}return swatch.setAttribute("data-variant-id",String(variant.variantId)),swatch.setAttribute("data-price",this.formatPrice(variant.price)),variant.compare_at_price&&swatch.setAttribute("data-compare-at-price",this.formatPrice(variant.compare_at_price)),swatch.addEventListener("click",()=>{this.deselectSwatches(cardElement),swatch.classList.add("selected"),this.updateProductLink(cardElement,product,swatch.dataset.variantId);const quickAddBtn=cardElement.querySelector(".product-list-card__button");quickAddBtn&&quickAddBtn.setAttribute("data-product-url",this.getProductLink(product.handle,swatch.dataset.variantId));const imgEl=cardElement.querySelector(".product-list-card__image img");imgEl&&swatch.dataset.image&&(imgEl.src=swatch.dataset.image,imgEl.alt=swatch.dataset.imageAlt||"");const priceEl=cardElement.querySelector(".product-list-card__price");priceEl&&(priceEl.textContent=swatch.dataset.compareAtPrice||swatch.dataset.price)}),swatch}createExtraColorsSpan(count){const span=document.createElement("span");return span.textContent=`+${count}`,span.classList.add("extra-colors-notice"),span}createDawnQuickAddModal(product){if(!product?.id||!product?.title)return null;const safeTitle=product.title.replace(/"/g,"&quot;"),tempDiv=document.createElement("div");return tempDiv.innerHTML=`<quick-add-modal id="QuickAdd-shopify-${product.id}" class="quick-add-modal"><div role="dialog" aria-label="Choose product options for ${safeTitle}" aria-modal="true" class="quick-add-modal__content global-settings-popup" tabindex="-1"><button id="ModalClose-shopify-${product.id}" type="button" class="quick-add-modal__toggle" aria-label="Close"><svg class="icon icon-close" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M17.25 1.78125L16.2188 0.75L9 7.96875L1.78125 0.75L0.75 1.78125L7.96875 9L0.75 16.2188L1.78125 17.25L9 10.0312L16.2188 17.25L17.25 16.2188L10.0312 9L17.25 1.78125Z" fill="currentColor"/></svg></button><div id="QuickAddInfo-shopify-${product.id}" class="quick-add-modal__content-info"></div></div></quick-add-modal>`,tempDiv.firstElementChild}}customElements.define("product-shopify-similar-styles",ProductShopifySimilarStyles);
2//# sourceMappingURL=/cdn/shop/t/264/assets/alpine-product.js.map?v=88274743487923712621780354556