1import{Segment}from"@dna/analytics";import{client}from"@dna/constructor";import{RespondToViewport,WithProfiler}from"@dna/mixins";import styles from"@dna/styles";import{t}from"@dna/utils";import{LitElement,css,html,nothing,repeat}from"@lit";import{Task}from"@lit/task";const cacheKeyBase="cached_search_bar_reco",cacheKey=`${cacheKeyBase}|${window.Shopify?.country}`;class DNASearchProducts extends WithProfiler(RespondToViewport(LitElement)){static properties={autocompleteProducts:{type:Array},inputValue:{type:String},sectionHeading:{type:String},showRecentlyViewed:{type:Boolean},showSection:{type:Boolean},showAutocompleteProducts:{type:Boolean},podId:{type:String},resultId:{type:String}};constructor(){super(),this.autocompleteProducts=[],this.inputValue="",this.searchQuery="",this.sectionHeading="",this.showRecentlyViewed=!1,this.showSection=!1,this.showAutocompleteProducts=!1,this.podId="",this.resultId=""}get recommendedProducts(){return this.autocompleteProducts&&this.autocompleteProducts.length>0?(this.sectionHeading=t("general.search.top_suggestions"),this.showAutocompleteProducts=!0,this.autocompleteProducts):(this.showRecentlyViewed?this.sectionHeading=t("general.search.recently_viewed"):this.sectionHeading=t("general.search.popular_products"),this.showAutocompleteProducts=!1,this._productsTask.value)}get hideHeader(){return this.autocompleteProducts&&this.autocompleteProducts.length>0&&!this.isMobile}connectedCallback(){super.connectedCallback(),document.addEventListener("dna:search:autocomplete",this._handleSearchAutocomplete)}disconnectedCallback(){document.removeEventListener("dna:search:autocomplete",this._handleSearchAutocomplete)}_handleSearchAutocomplete=event=>{this.autocompleteProducts=event.detail?.products||[],this.searchQuery=event.detail?.query??"",this._trackProductSearchResults()};_trackProductSearchResults=()=>{Segment.protect(()=>{Segment.track(Segment.CONSTANTS.EVENTS.PRODUCTS_SEARCHED,{query:this.searchQuery,query_source:"header search",results:this.autocompleteProducts.length})})};_productsTask=new Task(this,{task:async()=>{try{const numResults=this.isMobile?6:5;let podId="search_bar_recent",response2=[];if(response2=await client.getRecommendationPod(podId,{numResults}),response2.products?.length>0)this.showRecentlyViewed=!0;else{const cachedData=sessionStorage.getItem(`${cacheKeyBase}|${window.Shopify?.country}`);if(cachedData){window.dispatchEvent(new CustomEvent("dna:search-products:loaded"));const parsedData=JSON.parse(cachedData);return this.podId=podId,this.resultId=parsedData.result_id,parsedData.products}podId="search_bar_reco",response2=await client.getRecommendationPod(podId,{numResults}),sessionStorage.setItem(cacheKey,JSON.stringify(response2))}return window.dispatchEvent(new CustomEvent("dna:search-products:loaded")),this.resultId=response2.result_id,this.podId=podId,response2.products}catch(err){throw console.error("Error fetching results:",err),new Error(response)}},args:()=>[]});render(){return html` 2 ${this.recommendedProducts?html` 3 <div class="trending-search-products__header ${this.hideHeader?"hidden":""}">${this.sectionHeading}</div> 4 <div 5 class="trending-search-products" 6 ?data-cnstrc-autosuggest=${this.showAutocompleteProducts} 7 ?data-cnstrc-recommendations=${!this.showAutocompleteProducts} 8 data-cnstrc-recommendations-pod-id=${this.showAutocompleteProducts?nothing:`${this.podId}`} 9 data-cnstrc-result-id=${this.showAutocompleteProducts?nothing:`${this.resultId}`} 10 data-cnstrc-num-results=${this.showAutocompleteProducts?nothing:`${this.recommendedProducts.length}`} 11 > 12 ${repeat(this.recommendedProducts,product=>product,(product,index)=>html` 13 <dna-product-card 14 class="product-card__search" 15 .product=${product} 16 is-search="true" 17 show-carousel="false" 18 hide-wishlist-icon="true" 19 data-cnstrc-item-section="${this.showAutocompleteProducts?"Products":nothing}" 20 data-cnstrc-item="${this.showAutocompleteProducts?nothing:"recommendation"}" 21 data-cnstrc-item-id=${product?.id} 22 data-cnstrc-item-name=${product?.title} 23 data-cnstrc-item-variation-id=${product?.variants?.[0]?.id??nothing} 24 data-cnstrc-strategy-id=${product?.strategy_id??nothing} 25 data-cnstrc-item-price=${product?.prices[Shopify.country]} 26 ></dna-product-card> 27 `)} 28 </div> 29 `:nothing} 30 `}static styles=[styles.a11y,css` 31 .trending-search-products { 32 display: grid; 33 grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 34 margin: 0 -16px; 35 gap: 1px; 36 overflow: hidden; 37 padding-bottom: 2px; 38 padding-right: 2px; 39 } 40 @media screen and (min-width: 769px) { 41 .trending-search-products { 42 align-items: start; 43 grid-auto-rows: auto; 44 grid-template-columns: repeat(5, 1fr); 45 margin: 0; 46 } 47 } 48 .trending-search-products__header { 49 font: var( --dna-label-m-font); 50 text-transform: uppercase; 51 padding-bottom: var(--dna-space-6); 52 letter-spacing: 2px; 53 } 54 .product-card__search .badge-wrapper { 55 height: 30px; 56 } 57 `]}customElements.define("dna-search-products",DNASearchProducts); 58//# sourceMappingURL=/cdn/shop/t/1339/assets/component-search-products.js.map?v=64511441106861560071789667772
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.