1const COMPARE_LIST_KEY="compareList";function addProductToCompare(productData){let compareList=getCompareProducts();compareList.some(p=>p.handle===productData?.handle)||(compareList.push(productData),localStorage.setItem(COMPARE_LIST_KEY,JSON.stringify(compareList))),checkCompareListActive()}function removeProductFromCompare(productHandle){let compareList=getCompareProducts();compareList=compareList.filter(p=>p?.handle!==productHandle),localStorage.setItem(COMPARE_LIST_KEY,JSON.stringify(compareList)),checkCompareListActive()}function getCompareProducts(){return JSON.parse(localStorage.getItem(COMPARE_LIST_KEY))||[]}function doesCompareProductExist(productHandle){return getCompareProducts().some(p=>p?.handle===productHandle)}function clearCompareList(){localStorage.removeItem(COMPARE_LIST_KEY)}window.checkCompareListActive=function(){const compareList=getCompareProducts(),headerIconWrapper=document.querySelector(".header__icon--compare");compareList.length>0?headerIconWrapper?.classList.add("active"):headerIconWrapper?.classList.remove("active")};async function fetchProductInfo(productHandle){const response=await fetch(`${Shopify.routes.root}products/${productHandle}.js`);return response.ok?await response.json():(console.error(`Failed to fetch product info for Handle: ${productHandle}`),null)}async function fetchCompareProducts(){const productPromises=getCompareProducts().map(async product=>{const fetchedProduct=await fetchProductInfo(product?.handle);return fetchedProduct?{...fetchedProduct,metafields:product}:null});return(await Promise.all(productPromises)).filter(product=>product!==null)}function toggleCompareArrows(){const compareList=getCompareProducts(),carouselButtons=document.querySelector(".compare-section .carousel-navigation__container");compareList.length>4?carouselButtons?.classList.remove("hidden"):carouselButtons?.classList.add("hidden")}function createProductCompareItem(product){const productStyle=product?.tags?.find(tag=>tag?.startsWith("hat-style:"))?.split(":")?.[1],productTitle=productStyle||product.title.split(" -")[0],productPrice=(product.price/100).toLocaleString("en-AU",{style:"currency",currency:"AUD"}),productMetafields=product.metafields,productMetafieldsData={handle:productMetafields?.productHandle,colour:productMetafields?.colour,inner:productMetafields?.inner,outer:productMetafields?.outer,lining:productMetafields?.lining,eyelets:productMetafields?.eyelets,brim:productMetafields?.brim,crown:productMetafields?.crown,crown_type:productMetafields?.crown_type,binding:productMetafields?.binding,category:productMetafields?.category,year_created:productMetafields?.year_created,similar_style:productMetafields?.similar_style},metafieldsHTML=Object.entries(productMetafieldsData||{}).filter(([key,_])=>key!=="handle").map(([key,value])=>` 2 <div class="${value==null?"hidden":"compare-item__info"}"> 3 <h5 class="compare-item__info-label">${key.replace(/_/g," ")}</h5> 4 <p class="compare-item__info-data">${value}</p> 5 </div> 6 `).join("");return` 7 <a href="${product.url}" class="compare-item shrink-0 snap-center group" data-product-handle="${product.handle}"> 8 <div class="compare-item__image-wrapper"> 9 <img src="${product?.media[1]?.src||product.featured_image}" alt="${product.title}" class="compare-item__image" /> 10 <button class="compare-item__remove-button" data-product-handle="${product.handle}"> 11 <svg aria-hidden="true" focusable="false" fill="none" width="16" viewB
11ox="0 0 16 16"> 12 <path d="m1 1 14 14M1 15 15 1" stroke="currentColor" stroke-width="1"/> 13 </svg> 14 </button> 15 </div> 16 17 <h2 class="compare-item__title product-title">${productTitle}</h2> 18 19 <div class="compare-item__info"> 20 <h5 class="compare-item__info-label">Price</h5> 21 <p class="compare-item__info-data">${productPrice}</p> 22 </div> 23 24 ${productMetafieldsData?.colour?` 25 <div class="compare-item__info"> 26 <h5 class="compare-item__info-label">Colour</h5> 27 <p class="compare-item__info-data">${productMetafieldsData?.colour}</p> 28 </div> 29 `:""} 30 31 <div class="compare-item__info"> 32 <h5 class="compare-item__info-label">Style</h5> 33 <p class="compare-item__info-data">${productStyle}</p> 34 </div> 35 36 ${metafieldsHTML} 37 </a> 38 `}window.renderCompareProducts=async function renderCompareProducts2(){const compareListElement=document.querySelector(".compare-list");if(!compareListElement)return null;compareListElement.innerHTML='<div class="loading">Loading...</div>';const products=await fetchCompareProducts();products.length===0?compareListElement.innerHTML='<div class="empty">To help you find the perfect Akubra, use our compare feature! Simply add hats to the comparison list to see their key details side by side\u2014like inner band, outer band, brim width, crown height, eyelets, binding, and crown type. This makes it easy to spot the differences and choose the right fit for you.</div>':(compareListElement.innerHTML=products.map(createProductCompareItem).join(""),document.querySelectorAll(".compare-item__remove-button").forEach(button=>{button.addEventListener("click",function(e){e.preventDefault();const productHandle=this.getAttribute("data-product-handle");removeProductFromCompare(productHandle),renderCompareProducts2()})})),toggleCompareArrows()},window.addCompareToProductCard=function(alteredProductListCount=0){document.querySelectorAll(".product-card").forEach((card,index)=>{if(index<alteredProductListCount)return;const compareButton=card.querySelector(".product-card__compare-button");if(!compareButton)return;const productHandle=compareButton.getAttribute("data-product-handle"),productMetafields=JSON.parse(compareButton.dataset.productMetafields),productData={handle:productHandle,inner:productMetafields?.inner,outer:productMetafields?.outer,colour:productMetafields?.colour,lining:productMetafields?.lining,eyelets:productMetafields?.eyelets,brim:productMetafields?.brim,crown:productMetafields?.crown,crown_type:productMetafields?.crown_type,binding:productMetafields?.binding,category:productMetafields?.category,year_created:productMetafields?.year_created,similar_style:productMetafields?.similar_style};doesCompareProductExist(productData?.handle)&&compareButton.classList.add("compare-button--active"),compareButton&&compareButton?.addEventListener("click",function(event){event.preventDefault(),doesCompareProductExist(productData?.handle)?(removeProductFromCompare(productData?.handle),this.classList.remove("compare-button--active")):(addProductToCompare(productData),this.classList.add("compare-button--active"))})})},document.addEventListener("DOMContentLoaded",()=>{checkCompareListActive(),renderCompareProducts(),addCompareToProductCard()}),document.addEventListener("facet:updated",function(){const productList=document.querySelector(".product-list .product-card .product-card__figure .product-card__media");productList&&productList.querySelectorAll(".hidden").length>2&&(checkCompareListActive(),renderCompareProducts(),addCompareToProductCard())}); 39//# sourceMappingURL=/cdn/shop/t/371/assets/compare.js.map?v=34139486302289936651789359743
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.