1if(!customElements.get("predictive-search")){class PredictiveSearch extends HTMLElement{constructor(){super(),this.showModal=!1,this.input=this.querySelector("input#search"),this.predictiveSearchModal=this.querySelector("[data-psearch-modal]"),this.searchHeader=this.querySelector("[data-psearch-header]"),this.emptyResults=this.querySelector("[data-psearch-no-results]"),this.moreResultsLink=this.querySelector("[data-psearch-more-results]"),this.productsContainer=this.querySelector("[data-psearch-products-container]"),this.suggestionsContainer=this.querySelector("[data-psearch-suggestions-container]"),this.productsList=this.querySelector("[data-psearch-products-list]"),this.suggestionsList=this.querySelector("[data-psearch-suggestions-list]"),this.productsEmpty=this.querySelector("[data-psearch-no-products]"),this.suggestionsEmpty=this.querySelector("[data-psearch-suggestions-empty]"),this.input?.addEventListener("input",this.debounce(event=>{this.input.hasAttribute("data-nosto-element")||this.onChange(event)},300).bind(this)),document.addEventListener("click",event=>{const target=event.target;!this.showModal||elementOrAncestorHasClass(target,["predictive-search-modal","search-form"])||this.close()})}moneyWithoutDecimals(value){const dollars=Math.ceil(parseFloat(value)/100);return"$"+String(new Intl.NumberFormat("en-US").format(dollars))}stringPriceToInt(price){return Math.round(parseFloat(price)*100)}debounce(fn,wait){let t;return(...args)=>{clearTimeout(t),t=setTimeout(()=>fn.apply(this,args),wait)}}setModalWidth(){if(!this.predictiveSearchModal)return;const modal=this.predictiveSearchModal,modalRect=modal.getBoundingClientRect(),modalParent=modal.parentElement;if(window.innerWidth<=650){modal.style.width=null;return}const updatedWidth=(modalParent.getBoundingClientRect().left+modalParent.getBoundingClientRect().width/2<=window.innerWidth/2?"left":"right")==="left"?window.innerWidth-modalRect.left:modalRect.left+modalRect.width;modal.style.width=`${updatedWidth}px`}onChange(){const searchTerm=this.input.value.trim();if(!searchTerm.length){this.close();return}this.getSearchResults(searchTerm)}getSearchResults(searchTerm){fetch(`${window.routes.predictive_search_url}.json?q=${searchTerm}&resources[type]=product,page,article,collection&resources[fields]=title,product_type,variants.title,variants.sku,vendor`).then(response=>{if(!response.ok){var error=new Error(response.status);throw this.close(),error}return response.json()}).then(data=>{this.renderResults(searchTerm,data)}).catch(error=>{this.close();const toast=document.querySelector("toast-alert");toast&&toast.addMessage({type:"error",text:error})})}open(){this.showModal||(document.querySelectorAll("[data-mobile-search-trigger]")?.forEach(trigger=>trigger.classList.add("disable-trigger")),this.setModalWidth(),this.predictiveSearchModal.style.display="block",this.showModal=!0)}close(){this.showModal&&(document.querySelectorAll("[data-mobile-search-trigger]")?.forEach(trigger=>trigger.classList.remove("disable-trigger")),this.predictiveSearchModal.style.display="none",this.productsList.innerHTML="",this.suggestionsList.innerHTML="",this.productsEmpty.innerText="",this.suggestionsEmpty.innerText,this.searchHeader.innerText="",this.showModal=!1)}maxResults(){return window.innerWidth<=650?4:8}renderResults(searchTerm,response){const searchResults=response?.resources?.results,prefix=encodeURIComponent("options[prefix]"),searchTermEncoded=encodeURIComponent(searchTerm),moreResultsHref=`/search?${prefix}=last&q=${searchTermEncoded}`;this.searchHeader.innerText=`"${searchTerm}"`,this.moreResultsLink.setAttribute("href",moreResultsHref);const searchProducts=!searchResults?.products||searchResults?.products?.length===0?[]:searchResults.products.slice(0,this.maxResults()-1).map(product=>this.mapProductJSON(product));let suggestions=[];if(searchResults?.articles&&(suggestions=[...suggestions,...searchResults.articles]),searchResults?.collections&&(suggestions=[...suggestions,...searchResults.collections]),searchResults?.pages&&(suggestions=[...suggestions,...searchResults.pages]),suggestions=suggestions.slice(0,this.maxResults()-1),searchProducts?.length>0||suggestions.length>0){if(this.emptyResults.innerHTML="",this.emptyResults.style.display="none",this.productsContainer.style.display="block",searchProducts?.length>
10){this.emptyResults.style.display="none",searchProducts.forEach(product=>{const listItemHTML=` 2 <div class="predictive-search__products-list-item"> 3 <a class="predictive-search__product-link" href="${product.url}"> 4 <a href="${product.url}" id="${product.id}" tabindex="0" aria-live="polite" class="product-tile link-text" widget="true"> 5 <div class="product-tile__images"> 6 <div> 7 ${product.image?`<img src="${product.image}" alt="${product.title}" loading="lazy" class="product-tile__img-main" height="57" width="57" />`:`<svg class="product-tile__img-main product-tile__img-main--placeholder" viewBox="0 0 350 465" width="100%"> 8 <rect x="0" y="0" width="100%" height="100%"></rect> 9 </svg>`} 10 11 </div> 12 </div> 13 <div class="product-tile__static-text-content"> 14 <div class="row"> 15 <div class="product-tile__vendor"> 16 ${product.vendor} 17 </div> 18 </div> 19 <div class="row"> 20 <div class="product-tile__title"> 21 <div class="product-tile-title"> 22 ${product.title} 23 </div> 24 </div> 25 </div> 26 <div class="row"> 27 <div class="product-tile__price-container"> 28 <span class="product-tile__price"> 29 <span class="visually-hidden">Now: </span> 30 ${this.moneyWithoutDecimals(product.price)} 31 </span> 32 </div> 33 </div> 34 </div> 35 </a> 36 </a> 37 </div> 38 `;this.productsList.insertAdjacentHTML("beforeend",listItemHTML)});const listItemMoreResults=` 39 <div class="predictive-search__products-list-item predictive-search__products-list-item--link"> 40 <a class="link predictive-search__products-list-item-more-result more-result" href="${moreResultsHref}">More results</a> 41 </div> 42 `;window.innerWidth<=650&&this.productsList.insertAdjacentHTML("beforeend",listItemMoreResults)}else this.productsEmpty.innerText=`There are no products for "${searchTerm}"`,this.productsEmpty.style.display="block";if(this.suggestionsContainer.style.display="block",suggestions.length>0){this.suggestionsEmpty.style.display="none",this.suggestionsEmpty.innerText="",this.suggestionsList.style.display="block",this.suggestionsList.innerHTML="",suggestions.forEach(suggestion=>{const listItemHTML=` 43 <div class="predictive-search__suggestions-list-item"> 44 <a class="predictive-search__suggestions-list-item--textlink" href="${suggestion.url}"> 45 ${suggestion.title} 46 </a> 47 </div> 48 `;this.suggestionsList.insertAdjacentHTML("beforeend",listItemHTML)});const listItemMoreResults=` 49 <div class="predictive-search__suggestions-list-item predictive-search__suggestions-list-item--link"> 50 <a class="link predictive-search__products-list-item-more-result suggestion-more-result more-result link link--primary" href="${moreResultsHref}"><span>More Results</span></a> 51 </div> 52 `;window.innerWidth<=650&&this.suggestionsList.insertAdjacentHTML("beforeend",listItemMoreResults)}else this.suggestionsEmpty.innerText=`There are no suggestions for ${searchTerm}`,this.suggestionsEmpty.style.display="block",this.suggestionsList.style.display="none"}else this.productsContainer.style.display="none",this.suggestionsContainer.style.display="none",this.emptyResults.innerHTML=`There are no results for "${searchTerm}"`,this.emptyResults.style.display="block";this.open()}mapProductJSON(product){const productJSON={...product,compare_at_price:product.compare_at_price_min?this.stringPriceToInt(product.compare_at_price_min):product.compare_at_price_min,compare_at_price_max:product.compare_at_price_max?this.stringPriceToInt(product.compare_at_price_max):product.compare_at_price_max,compare_at_price_min:product.compare_at_price_min?this.stringPriceToInt(product.compare_at_price_min):product.compare_at_price_min,price:product.price?this.stringPriceToInt(product.price):product.price,price_max:product.price_max?this.stringPriceToInt(product.price_max):product.price_max,price_min:product.price_min?this.stringPriceToInt(product.price_min):product.price_min,variants:product.variants.length>0?product.variants.map((variant,index)=>({...variant,image:variant.featured_image?{...variant.featured_image,src:variant.featured_image.url}:null,compare_at_price:variant.compare_at_price?this.stringPriceToInt(variant.compare_at_price):variant.compare_at_price,price:variant.price?this.stringPriceToInt(variant.price):variant.price})):[]};if(productJSON.featured_image=productJSON.featured_image||{},productJSON.featured_image.src=productJSON.featured_image.url,productJSON.images=[productJSON.featured_image],product.variants.length<=0){const variant={...productJSON,image:{...productJSON.featured_image}};productJSON.variants=[variant]}return productJSON.selected_or_first_available_variant=productJSON.variants[0],productJSON}}customElements.define("predictive-search",PredictiveSearch)} 53//# sourceMappingURL=/cdn/shop/t/94/assets/predictive-search.js.map?v=125252819623097832691728067364
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.