1import{LitElement,css,html,nothing}from"@lit";class NovaSearchResult extends LitElement{static properties={noResults:{type:String},searchAgain:{type:String},searchData:{type:Object},searchTerm:{type:String},noSearchResult:{type:Boolean},suggestedResult:{type:Object},openState:{type:String}};connectedCallback(){super.connectedCallback(),this.searchData={},this.searchTerm="",this.noSearchResult=!1,this.suggestedResult=null,window.addEventListener("resize",this.handleRenderHeight.bind(this))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this.handleRenderHeight.bind(this))}updated(changedProperties){if(super.updated(changedProperties),this.openState==="closed"||Reflect.ownKeys(this.searchData).length===0)return;const{products,collections,articles,pages}=this.searchData.resources.results;this.noSearchResult=[products,collections].every(arr=>arr.length===0),this.suggestedResult===null&&this.noSearchResult?this.handleResult():this.noSearchResult&&this.handleRenderResult(this.suggestedResult),this.handleRenderHeight()}async handleResult(){try{const response=await fetch(`?section_id=${window.main_suggested_result_section_id}`);response.ok||(console.error(`HTTP error! Status: ${response.status}`),console.error(`HTTP error! Reason: ${response}`));const data=await response.text(),htmlDocument=new DOMParser().parseFromString(data,"text/html");this.suggestedResult=htmlDocument,this.handleRenderResult(this.suggestedResult)}catch(error){console.error("Error:",error.message)}}handleRenderHeight(){this.openState!=="closed"&&(clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{const resultRec=this.getBoundingClientRect();window.innerHeight-resultRec.bottom>0?this.style.maxHeight="unset":this.style.maxHeight=`${window.innerHeight-resultRec.top}px`},500))}handleRenderResult(data){const suggestedResult=data.querySelector(".suggested-results");if(!suggestedResult)return;const listContainer=suggestedResult.querySelector(".header-search__list-container"),currentListContainers=this.shadowRoot.querySelectorAll(".header-search__list-container");if(listContainer&¤tListContainers.length)for(const currentListContainer of currentListContainers)currentListContainer.replaceWith(listContainer.cloneNode(!0));const productContainer=suggestedResult.querySelector(".header-search__product-container"),currentProductContainer=this.shadowRoot.querySelector(".header-search__product-container");if(productContainer&¤tProductContainer){currentProductContainer.innerHTML=productContainer.innerHTML;const cards=currentProductContainer.querySelectorAll("nova-product-card");for(const card of cards){const optionValuesTemplate=currentProductContainer.querySelector(`#async-options-json-${card.id}`),variantsTemplate=currentProductContainer.querySelector(`#async-variants-json-${card.id}`),productOptions=optionValuesTemplate?JSON.parse(optionValuesTemplate.content.textContent.trim()):[],variants=variantsTemplate?JSON.parse(variantsTemplate.content.textContent.trim()):[];card.productOptions=productOptions.filter(item=>item.name!=="Title"),card.variants=variants}}}render(){if(Reflect.ownKeys(this.searchData).length===0)return nothing;if(this.noSearchResult)return html` 2 <div class="header-search__result header-search__no-result"> 3 <div class="header-search__no-result-container"> 4 <div class="header-search__no-result-content"> 5 <h3 class="header-search__no-result-title"> 6 ${this.noResults} "${this.searchTerm}" 7 </h3> 8 <p class="header-search__no-result-description"> 9 ${this.searchAgain} 10 </p> 11 </div> 12 <div class="header-search__list-container"></div> 13 </div> 14 <div class="header-search__product-container"></div> 15 <div class="header-search__list-container"></div> 16 </div> 17 `;const displayProducts=this.searchData.resources.results.products.slice(0,4);return html` 18 <div class="header-search__result"> 19 ${this.searchData.resources.results.products.length>0?html`<div class="header-search__product-container" 20 style="--card-counts: ${displayProducts.length};--space-counts: ${displayProducts.length-1};" 21 > 22 <h3>${window.langMessages["general.search.products"]}</h3> 23 <div class="header-search__product-slide-container"> 24 <div class="header-search__product-slide-inner-container"> 25 ${displayProducts.map(product=>html` 26 <div class="header-search__product-card"> 27 <nova-product-card-async 28 data-handle=${product.handle} 29 ></nova-product-card-async> 30 </div> 31 `)} 32 </div> 33 </div> 34 </div>`:nothing} 35 <div class="header-search__list-container"> 36 ${this.searchData.resources.results.collections.length>0?html` <div class="header-search__collection-list"> 37 <h3>${window.langMessages["general.search.collections"]}</h3> 38 <ul> 39 ${this.searchData.resources.results.collections.slice(0,3).map(collection=>html` 40 <li> 41 <a href=${collection.url}>${collection.title}</a> 42 </li> 43 `)} 44 </ul> 45 </div>`:nothing} 46 ${this.searchData.resources.results.articles?.length>0?html` <div class="header-search__article-list"> 47 <h3>Blog</h3> 48 <ul> 49 ${this.searchData.resources.results.articles.map(article=>html` 50 <li><a href=${article.url}>
50${article.title}</a></li> 51 `)} 52 </ul> 53 </div>`:nothing} 54 ${this.searchData.resources.results.pages?.length>0?html` <div class="header-search__page-list"> 55 <h3>Pages</h3> 56 <ul> 57 ${this.searchData.resources.results.pages.map(page=>html` 58 <li><a href=${page.url}>${page.title}</a></li> 59 `)} 60 </ul> 61 </div>`:nothing} 62 </div> 63 </div> 64 `}static styles=css` 65 :host .header-search__result { 66 display: flex; 67 width: 100%; 68 overflow: hidden; 69 flex-direction: column; 70 max-height: inherit; 71 overflow-y: auto; 72 -ms-overflow-style: none; 73 scrollbar-width: none; 74 gap: var(--nova-space-lg); 75 margin-top: var(--nova-space-lg); 76 } 77 78 :host .header-search__result::-webkit-scrollbar { 79 display: none; 80 width: 0; 81 } 82 83 :host .header-search__product-container { 84 width: 100%; 85 } 86 87 :host .header-search__list-container { 88 display: flex; 89 flex-direction: column; 90 width: 100%; 91 gap: var(--nova-space-md); 92 } 93 94 @media screen and (min-width: 1024px) { 95 :host .header-search__result { 96 flex-direction: row; 97 justify-content: space-between; 98 } 99 100 :host .header-search__list-container { 101 order: 1; 102 width: fit-content; 103 max-width: 180px; 104 flex-shrink: 0; 105 padding: var(--nova-space-none); 106 } 107 108 :host .header-search__product-container { 109 order: 2; 110 width: fit-content; 111 } 112 } 113 114 :host .header-search__product-slide-container { 115 overflow-x: auto; 116 overflow-y: hidden; 117 width: 100%; 118 max-width: 100%; 119 -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */ 120 scrollbar-width: none; /* Hide scrollbar for Firefox */ 121 } 122 123 /* Hide scrollbar for Chrome, Safari and Opera */ 124 :host .header-search__product-slide-container::-webkit-scrollbar {
125 display: none; 126 width: 0; 127 } 128 129 :host .header-search__product-slide-inner-container { 130 display: flex; 131 flex-direction: row; 132 flex-wrap: nowrap; 133 width: 100%; 134 gap: var(--nova-space-sm); 135 } 136 137 @media screen and (min-width: 750px) { 138 :host .header-search__product-slide-container { 139 padding: 0 var(--nova-space-2xs); 140 width: calc(100% - 2 * var(--nova-space-2xs)); 141 } 142 :host .header-search__product-slide-inner-container { 143 display: grid; 144 grid-template-columns: repeat(4, 1fr); 145 } 146 } 147 148 @media screen and (min-width: 1024px) { 149 :host .header-search__product-slide-inner-container { 150 width: calc(100vw - 3 * var(--nova-space-page-margin) - 180px); 151 max-width: 125rem; 152 display: grid; 153 grid-template-columns: repeat(4, 1fr); 154 } 155 } 156 157 @media screen and (min-width: 1200px) { 158 :host .header-search__list-container { 159 max-width: 220px; 160 } 161 :host .header-search__product-slide-inner-container { 162 width: calc(100vw - 3 * var(--nova-space-page-margin) - 220px); 163 } 164 } 165 166 @media screen and (min-width: 1800px) { 167 :host .header-search__list-container { 168 max-width: 300px; 169 } 170 :host .header-search__product-slide-inner-container { 171 width: calc(100vw - 3 * var(--nova-space-page-margin) - 450px); 172 } 173 } 174 175 :host h3 { 176 font: var(--nova-h8-font); 177 text-transform: uppercase; 178 margin: 0 0 var(--nova-space-md); 179 } 180 181 @media screen and (min-width: 768px) { 182 :host h3 { 183 margin: 0 0 var(--nova-space-sm); 184 } 185 } 186 187 :host a { 188 color: inherit; 189 text-decoration: none; 190 } 191 192 :host ul { 193 display: flex; 194 flex-direction: column; 195 gap: var(--nova-space-md); 196 padding-left: var(--nova-space-none); 197 margin: var(--nova-space-none); 198 } 199 200 @media screen and (min-width: 768px) { 201 :host ul { 202 gap: var(--nova-space-sm); 203 } 204 } 205 206 :host li { 207 list-style: none; 208 color: var(--nova-color-text); 209 } 210 211 :host .header-search__no-result-container { 212 display: flex; 213 flex-direction: column; 214 gap: var(--nova-space-lg); 215 } 216 :host .header-search__no-result-title { 217 font: var(--nova-h7-font); 218 margin: 0; 219 } 220 :host .header-search__no-result-description { 221 margin: 0; 222 padding: 0 var(--nova-space-page-margin); 223 } 224 :host .header-search__no-result-content { 225 display: flex; 226 flex-direction: column; 227 gap: var(--nova-space-xs); 228 } 229 :host .header-search__no-result-container > .header-search__list-container { 230 display: none; 231 } 232 @media screen and (min-width: 750px) { 233 :host .header-search__no-result-description { 234 padding: 0; 235 } 236 } 237 @media screen and (min-width: 768px) { 238 :host .header-search__no-result-container { 239 gap: var(--nova-space-md); 240 } 241 } 242 @media screen and (min-width: 1024px) { 243 :host .header-search__no-result-container > .header-search__list-container { 244 display: flex; 245 } 246 :host .header-search__no-result > .header-search__list-container { 247 display: none; 248 } 249 } 250 251 @media screen and (max-width: 749px) { 252 :host { 253 display: block; 254 margin-left: calc(0px - var(--nova-space-md)); 255 margin-right: calc(0px - var(--nova-space-md)); 256 } 257 :host h3, 258 .header-search__collection-list ul { 259 padding: 0 var(--nova-space-md); 260 } 261 :host .header-search__product-slide-inner-container { 262 padding: 0 var(--nova-space-md); 263 width: calc( 264 200px * var(--card-counts, 0) + 265 var(--space-counts, 0) * var(--nova-space-sm) 266 ); 267 } 268 :host .header-search__product-card { 269 min-width: 200px; 270 } 271 } 272 273 .product-card__link.h6 { 274 font: var(--nova-h6-font); 275 letter-spacing: var(--nova-h6-letter-spacing); 276 text-transform: var(--nova-h6-text-transform); 277 } 278 279 /* NOTE: Copied over shared utility classes for shadow DOM */ 280 .absolute { 281 position: absolute; 282 } 283 284 .inset { 285 inset: 0; 286 } 287 288 .c-transparent { 289 color: transparent !important; 290 } 291 292 .visually-hidden { 293 visibility: hidden; 294 position: absolute; 295 height: 1px; 296 width: 1px; 297 overflow: hidden; 298 } 299
300 .product-card__wishlist.swym-button.swym-add-to-wishlist-view-product { 301 padding: 0; 302 display: flex; 303 align-items: center; 304 height: auto; 305 position: absolute; 306 top: var(--nova-space-sm); 307 right: var(--nova-space-sm); 308 color: var(--nova-color-brand-charcoal); 309 background: transparent; 310 border: 0; 311 cursor: pointer; 312 } 313 `}customElements.define("nova-search-result",NovaSearchResult); 314//# sourceMappingURL=/cdn/shop/t/424/assets/component-search-result.js.map?v=95400815736035524511783361503
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.