1class AlgoliaInstantSearch extends HTMLElement{constructor(){super(),this.afterISStartRemoveDefaultWidget=this.afterISStartRemoveDefaultWidget.bind(this),this.beforeInstantSearchAllowParamsArray=this.beforeInstantSearchAllowParamsArray.bind(this),this.beforeInstantSearchMainTemplate=this.beforeInstantSearchMainTemplate.bind(this),this.beforeInstantSearchOptions=this.beforeInstantSearchOptions.bind(this),this.beforeISStartAddWidgetArray=this.beforeISStartAddWidgetArray.bind(this),this.connectedCallback=this.connectedCallback.bind(this),this.onMount=this.onMount.bind(this),this.setupWidget=this.setupWidget.bind(this),this.setupWidgets=this.setupWidgets.bind(this),this.subscribe=this.subscribe.bind(this)}afterISStartRemoveDefaultWidget(defaultWidgets){const widgetTypes=["ais.hits","ais.pagination","ais.sortBy"];return defaultWidgets.filter(widget=>widgetTypes.includes(widget.$$widgetType))}beforeInstantSearchAllowParamsArray(allowParams){try{const href=window.location.href,url=new URL(href),search=new URLSearchParams(url.search);return Array.from(search.keys())}catch(e){return console.error("Error",e),[].concat(allowParams,"icid","tid","utm_campaign","utm_content","utm_medium","utm_source","utm_term")}}beforeInstantSearchMainTemplate(_defaultTemplate,data,html){switch(this.settings.filterLayout){case"sidebar_collapsible":return this.templateSidebarCollapsible(data,html);case"drawer":return this.templateDrawer(data,html);case"horizontal":return this.templateHorizontal(data,html);default:return this.templateSidebarVisible(data,html)}}templateSidebarVisible(data,html){return html` 2 <div class="template-container"> 3 <div class="ais-section-padding viewport-spacing template-main-collection"> 4 <div class="ais-input hidden"> 5 <div class="ais-input-button"></div> 6 <div class="ais-clear-input-icon"></div> 7 <div class="ais-search-box-container"></div> 8 </div> 9 <div class="ais-clear-refinements-container hidden"></div> 10 <div class="ais-search-header hidden"> 11 <div class="ais-change-display"> 12 <span class="ais-change-display-block ais-change-display-selected"></span> 13 <span class="ais-change-display-list"></span> 14 </div> 15 </div> 16 <div class="ais-facets-button hidden"></div> 17 <div class="ais-hits-container hidden"></div> 18 <div class="ais-pagination-container hidden"></div> 19 ${data.facets.map(facet=>html`<div class="ais-facet-${facet.escapedName}-container hidden"></div>`)} 20 ${this.statsDetails.mobile.renderContainer(html)} 21 <div class="facets facets-vertical-sort small-hide medium-hide no-js-hidden"> 22 <form class="facets-vertical-form"> 23 <div class="facets-vertical-form-holder"> 24 ${this.statsDetails.desktop.renderContainer(html)} 25 ${this.sortBy.desktop.renderContainer(html)} 26 </div> 27 ${this.stats.desktop.renderContainer(html)} 28 </form> 29 </div> 30 <div class="facets-vertical"> 31 <aside class="facets-wrapper" id="main-collection-filters"> 32 <div class="facets-container"> 33 <facet-filters-form class="facets facets small-hide medium-hide"> 34 <form class="facets__form-vertical"> 35 <div id="FacetsWrapperDesktop"> 36 <div class="active-facets active-facets-desktop"> 37 ${this.clearRefinements.desktop.renderContainer(html)} 38 ${this.currentRefinements.desktop.renderContainer(html)} 39 </div> 40 </div> 41 ${this.refinementList.desktop.map(desktop=>desktop.renderContainer(html))} 42 </form> 43 </facet-filters-form> 44 ${this.stats.mobile.renderContainer(html)} 45 ${this.showCurrentRefinements.mobile.renderContainer(html)} 46 </div> 47 </aside> 48 <div class="ais-facets facets-container large-up-hide mobile-facets__main"> 49 ${this.sortBy.mobile.renderContainer(html)} 50 ${this.clearRefinements.mobile.renderContainer(html)} 51 ${this.currentRefinements.mobile.renderContainer(html)} 52 ${this.refinementList.mobile.map(mobile=>mobile.renderContainer(html))} 53 </div> 54 ${this.infiniteHits.desktop.renderContainer(html)} 55 </div> 56 </div> 57 </div> 58 `}templateSidebarCollapsible(data,html){return html` 59 <div class="template-container"> 60 <div class="ais-section-padding viewport-spacing template-main-collection filter-layout--sidebar-collapsible"> 61 <div class="ais-input hidden"> 62 <div class="ais-input-button"></div> 63 <div class="ais-clear-input-icon"></div> 64 <div class="ais-search-box-container"></div> 65 </div> 66 <div class="ais-clear-refinements-container hidden"></div> 67 <div class="ais-search-header hidden"> 68 <div class="ais-change-display">
69 <span class="ais-change-display-block ais-change-display-selected"></span> 70 <span class="ais-change-display-list"></span> 71 </div> 72 </div> 73 <div class="ais-facets-button hidden"></div> 74 <div class="ais-hits-container hidden"></div> 75 <div class="ais-pagination-container hidden"></div> 76 ${data.facets.map(facet=>html`<div class="ais-facet-${facet.escapedName}-container hidden"></div>`)} 77 ${this.statsDetails.mobile.renderContainer(html)} 78 <div class="facets facets-vertical-sort small-hide medium-hide no-js-hidden"> 79 <form class="facets-vertical-form"> 80 <div class="facets-vertical-form-holder"> 81 ${this.statsDetails.desktop.renderContainer(html)} 82 <button type="button" class="filter-toggle-btn no-js-hidden" onClick=${e=>{e.preventDefault();const layout=e.target.closest(".filter-layout--sidebar-collapsible");layout&&layout.classList.toggle("filters-hidden")}}> 83 <div class="filter-toggle-circle"> 84 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg> 85 </div> 86 <span class="filter-toggle-btn__hide">Hide Filter</span> 87 <span class="filter-toggle-btn__show">Show Filter</span> 88 </button> 89 ${this.sortBy.desktop.renderContainer(html)} 90 </div> 91 ${this.stats.desktop.renderContainer(html)} 92 </form> 93 </div> 94 <div class="facets-vertical"> 95 <aside class="facets-wrapper" id="main-collection-filters"> 96 <div class="facets-container"> 97 <facet-filters-form class="facets facets small-hide medium-hide"> 98 <form class="facets__form-vertical"> 99 <div id="FacetsWrapperDesktop"> 100 <div class="active-facets active-facets-desktop"> 101 ${this.clearRefinements.desktop.renderContainer(html)} 102 ${this.currentRefinements.desktop.renderContainer(html)} 103 </div> 104 </div> 105 ${this.refinementList.desktop.map(desktop=>desktop.renderContainer(html))} 106 </form> 107 </facet-filters-form> 108 ${this.stats.mobile.renderContainer(html)} 109 ${this.showCurrentRefinements.mobile.renderContainer(html)} 110 </div> 111 </aside> 112 <div class="ais-facets facets-container large-up-hide mobile-facets__main"> 113 ${this.sortBy.mobile.renderContainer(html)} 114 ${this.clearRefinements.mobile.renderContainer(html)} 115 ${this.currentRefinements.mobile.renderContainer(html)} 116 ${this.refinementList.mobile.map(mobile=>mobile.renderContainer(html))} 117 </div> 118 ${this.infiniteHits.desktop.renderContainer(html)} 119 </div> 120 </div> 121 </div> 122 `}templateDrawer(data,html){const openDrawer=()=>{const overlay=document.querySelector(".filter-drawer-overlay");overlay&&(overlay.classList.add("is-open"),document.body.classList.add("filter-drawer-open"))},closeDrawer=()=>{const overlay=document.querySelector(".filter-drawer-overlay");overlay&&(overlay.classList.remove("is-open"),document.body.classList.remove("filter-drawer-open"))};return html` 123 <div class="template-container"> 124 <div class="ais-section-padding viewport-spacing template-main-collection filter-layout--drawer"> 125 <div class="ais-input hidden"> 126 <div class="ais-input-button"></div> 127 <div class="ais-clear-input-icon"></div> 128 <div class="ais-search-box-container"></div> 129 </div> 130 <div class="ais-clear-refinements-container hidden"></div> 131 <div class="ais-search-header hidden"> 132 <div class="ais-change-display">
133 <span class="ais-change-display-block ais-change-display-selected"></span> 134 <span class="ais-change-display-list"></span> 135 </div> 136 </div> 137 <div class="ais-facets-button hidden"></div> 138 <div class="ais-hits-container hidden"></div> 139 <div class="ais-pagination-container hidden"></div> 140 ${data.facets.map(facet=>html`<div class="ais-facet-${facet.escapedName}-container hidden"></div>`)} 141 ${this.statsDetails.mobile.renderContainer(html)} 142 <div class="facets facets-vertical-sort small-hide medium-hide no-js-hidden"> 143 <form class="facets-vertical-form"> 144 <div class="drawer-toolbar-left"> 145 <button type="button" class="filter-drawer-toggle-btn no-js-hidden" onClick=${openDrawer}> 146 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg> 147 <span>Filter & Sort</span> 148 </button> 149 ${this.statsDetails.desktop.renderContainer(html)} 150 </div> 151 ${this.stats.desktop.renderContainer(html)} 152 </form> 153 </div> 154 <div class="filter-drawer-overlay"> 155 <div class="filter-drawer-backdrop" onClick=${closeDrawer}></div> 156 <div class="filter-drawer"> 157 <div class="filter-drawer__header"> 158 <span class="filter-drawer__title p-regular p-bold">Filter & Sort</span> 159 <button type="button" class="filter-drawer__close" onClick=${closeDrawer}> 160 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> 161 </button> 162 </div> 163 <div class="filter-drawer__body"> 164 <div class="filter-drawer__sort"> 165 ${this.sortBy.desktop.renderContainer(html)} 166 </div> 167 <div class="active-facets active-facets-desktop"> 168 ${this.clearRefinements.desktop.renderContainer(html)} 169 ${this.currentRefinements.desktop.renderContainer(html)} 170 </div> 171 ${this.refinementList.desktop.map(desktop=>desktop.renderContainer(html))} 172 </div> 173 </div> 174 </div> 175 <div class="facets-vertical"> 176 <div class="facets-container large-up-hide"> 177 ${this.stats.mobile.renderContainer(html)} 178 ${this.showCurrentRefinements.mobile.renderContainer(html)} 179 </div> 180 <div class="ais-facets facets-container large-up-hide mobile-facets__main"> 181 ${this.sortBy.mobile.renderContainer(html)} 182 ${this.clearRefinements.mobile.renderContainer(html)} 183 ${this.currentRefinements.mobile.renderContainer(html)} 184 ${this.refinementList.mobile.map(mobile=>mobile.renderContainer(html))} 185 </div> 186 ${this.infiniteHits.desktop.renderContainer(html)} 187 </div> 188 </div> 189 </div> 190 `}templateHorizontal(data,html){return html` 191 <div class="template-container"> 192 <div class="ais-section-padding viewport-spacing template-main-collection filter-layout--horizontal"> 193 <div class="ais-input hidden"> 194 <div class="ais-input-button"></div> 195 <div class="ais-clear-input-icon"></div> 196 <div class="ais-search-box-container"></div> 197 </div> 198 <div class="ais-clear-refinements-container hidden"></div> 199 <div class="ais-search-header hidden"> 200 <div class="ais-change-display">
201 <span class="ais-change-display-block ais-change-display-selected"></span> 202 <span class="ais-change-display-list"></span> 203 </div> 204 </div> 205 <div class="ais-facets-button hidden"></div> 206 <div class="ais-hits-container hidden"></div> 207 <div class="ais-pagination-container hidden"></div> 208 ${data.facets.map(facet=>html`<div class="ais-facet-${facet.escapedName}-container hidden"></div>`)} 209 ${this.statsDetails.mobile.renderContainer(html)} 210 ${this.statsDetails.desktop.renderContainer(html)} 211 <div class="facets filter-bar small-hide medium-hide"> 212 <div class="filter-bar__filters"> 213 ${this.refinementList.desktop.map(desktop=>desktop.renderContainer(html))} 214 </div> 215 <div class="filter-bar__actions"> 216 ${this.sortBy.desktop.renderContainer(html)} 217 ${this.stats.desktop.renderContainer(html)} 218 </div> 219 </div> 220 <div class="filter-bar__active-facets small-hide medium-hide"> 221 <div class="active-facets active-facets-desktop"> 222 ${this.clearRefinements.desktop.renderContainer(html)} 223 ${this.currentRefinements.desktop.renderContainer(html)} 224 </div> 225 </div> 226 <div class="facets-vertical"> 227 <div class="facets-container large-up-hide"> 228 ${this.stats.mobile.renderContainer(html)} 229 ${this.showCurrentRefinements.mobile.renderContainer(html)} 230 </div> 231 <div class="ais-facets facets-container large-up-hide mobile-facets__main"> 232 ${this.sortBy.mobile.renderContainer(html)} 233 ${this.clearRefinements.mobile.renderContainer(html)} 234 ${this.currentRefinements.mobile.renderContainer(html)} 235 ${this.refinementList.mobile.map(mobile=>mobile.renderContainer(html))} 236 </div> 237 ${this.infiniteHits.desktop.renderContainer(html)} 238 </div> 239 </div> 240 </div> 241 `}beforeInstantSearchOptions(options){return options.hitsPerPage=this.settings.productsPerPage,options}beforeISStartAddWidgetArray(){const clearRefinementsDesktop=this.clearRefinements.desktop.createWidget(),clearRefinementsMobile=this.clearRefinements.mobile.createWidget(),currentRefinementsDesktop=this.currentRefinements.desktop.createWidget(),currentRefinementsMobile=this.currentRefinements.mobile.createWidget(),infiniteHitsDesktop=this.infiniteHits.desktop.createWidget(),showCurrentRefinementsMobile=this.showCurrentRefinements.mobile.createWidget(),sortByDesktop=this.sortBy.desktop.createWidget(),sortByMobile=this.sortBy.mobile.createWidget(),statsDesktop=this.stats.desktop.createWidget(),statsMobile=this.stats.mobile.createWidget(),statsDetailsDesktop=this.statsDetails.desktop.createWidget(),statsDetailsMobile=this.statsDetails.mobile.createWidget(),refinementListsDesktop=this.refinementList.desktop.map(desktop=>desktop.createWidget()),refinementListsMobile=this.refinementList.mobile.map(mobile=>mobile.createWidget());return[clearRefinementsDesktop,clearRefinementsMobile,currentRefinementsDesktop,currentRefinementsMobile,infiniteHitsDesktop,showCurrentRefinementsMobile,sortByDesktop,sortByMobile,statsDesktop,statsMobile,statsDetailsDesktop,statsDetailsMobile,...refinementListsDesktop,...refinementListsMobile]}connectedCallback(){const propertiesToGroup=(this.getAttribute("properties-to-group")||"").split(",").map(prop=>prop.trim()).filter(prop=>prop.length>0);this.settings={productsPerPage:this.getAttribute("products-per-page"),enableGroupingFilter:this.getAttribute("enable-grouping-filter")==="true",propertiesToGroup,filterLayout:this.getAttribute("filter-layout")||"sidebar_visible",filterType:this.getAttribute("filter-type")},this.onMount()}onMount(){document.addEventListener("algolia.hooks.initialize",this.subscribe)}setupWidget(container,isMobile,selector,rest){const configuration={container,isMobile,...rest},instances=this.instances,element=this.querySelector(selector);return element?{createWidget:()=>element.createWidget(configuration,instances),renderContainer:html=>element.renderContainer(configuration,html)}:null}setupWidgets(){this.clearRefinements={desktop:this.setupWidget("ais-clear-current-refinements-container",!1,"algolia-clear-refinements"),mobile:this.setupWidget("ais-clear-current-refinements-container-mobile",!0,"algolia-clear-refinements")},this.currentRefinements={desktop:this.setupWidget("ais-current-refined-values-container",!1,"algolia-current-refinements"),mobile:this.setupWidget("ais-current-refined-values-container-mobile",!0,"algolia-current-refinements")};let infiniteHitsConfig={};this.settings.enableGroupingFilter&&(infiniteHitsConfig={transformItems:buildTransformItems(this.settings.propertiesToGroup)}),this.infiniteHits={desktop:this.setupWidget("ais-infinite-hits-container",!1,"algolia-infinite-hits",infiniteHitsConfig)}
241,this.showCurrentRefinements={mobile:this.setupWidget("ais-show-current-refined-values-container-mobile",!0,"algolia-show-current-refinements")},this.sortBy={desktop:this.setupWidget("ais-sort-orders-container",!1,"algolia-sort-by"),mobile:this.setupWidget("ais-sort-orders-container-mobile",!0,"algolia-sort-by")},this.stats={desktop:this.setupWidget("ais-stats-container",!1,"algolia-stats"),mobile:this.setupWidget("ais-stats-container-mobile",!0,"algolia-stats")},this.statsDetails={desktop:this.setupWidget("ais-details-container",!1,"algolia-stats-details"),mobile:this.setupWidget("ais-details-container-mobile",!0,"algolia-stats-details")};const currentCollectionId=this.instances.algoliaShopify.current_collection_id,collectionFacets=this.instances.algoliaShopify.config.collection_facets;let currentCollectionFacets;currentCollectionId?currentCollectionFacets=collectionFacets[currentCollectionId]||collectionFacets.default:currentCollectionFacets=this.instances.algoliaShopify.config.facets;let filteredCollectionFacets=[];currentCollectionFacets&&(filteredCollectionFacets=currentCollectionFacets.filter(collectionFacet=>collectionFacet.type!=="hidden")),this.refinementList={desktop:filteredCollectionFacets.reduce((previous,current)=>{const selector=current.type==="slider"?"algolia-range-input":"algolia-refinement-list",widget=this.setupWidget(current.name,!1,selector,current);return current.enabled?[...previous,widget]:previous},[]),mobile:filteredCollectionFacets.reduce((previous,current)=>{const selector=current.type==="slider"?"algolia-range-input":"algolia-refinement-list",widget=this.setupWidget(current.name,!0,selector,current);return current.enabled?[...previous,widget]:previous},[])}}initLayoutBehavior(){this.settings.filterLayout==="horizontal"&&this.initHorizontalBehavior(),this.settings.filterLayout==="drawer"&&this.initDrawerKeyboardBehavior();const filterTypeStyle=document.querySelector(".facets");this.settings.filterType==="style_1"&&filterTypeStyle.classList.add("filter-style-1"),this.settings.filterType==="style_2"&&filterTypeStyle.classList.add("filter-style-2"),this.settings.filterType==="style_3"&&filterTypeStyle.classList.add("filter-style-3")}initHorizontalBehavior(){const filterBar=document.querySelector(".filter-bar__filters");if(!filterBar)return;const desktopDetails=filterBar.querySelectorAll(".facets__disclosure-vertical");if(!Array.from(desktopDetails).some(d=>d.querySelector("summary"))&&desktopDetails.length>0){requestAnimationFrame(()=>this.initHorizontalBehavior());return}desktopDetails.forEach(detail=>detail.removeAttribute("open")),desktopDetails.forEach(detail=>{detail.addEventListener("toggle",()=>{if(detail.open){const dropdownDiv=detail.querySelector(":scope > div"),showMoreBtn=detail.querySelector(":scope > .button-show-more");dropdownDiv&&showMoreBtn&&showMoreBtn.parentElement!==dropdownDiv&&dropdownDiv.appendChild(showMoreBtn),desktopDetails.forEach(other=>{other!==detail&&other.open&&other.removeAttribute("open")})}})}),document.addEventListener("click",e=>{e.target.closest(".filter-bar__filters")||desktopDetails.forEach(detail=>{detail.open&&detail.removeAttribute("open")})}),filterBar.classList.add("initialized")}initDrawerKeyboardBehavior(){document.addEventListener("keydown",e=>{if(e.key==="Escape"){const overlay=document.querySelector(".filter-drawer-overlay.is-open");overlay&&(overlay.classList.remove("is-open"),document.body.classList.remove("filter-drawer-open"))}})}initLayoutBehaviorWhenReady(){const check=()=>{document.querySelector(".template-main-collection")?this.initLayoutBehavior():requestAnimationFrame(check)};requestAnimationFrame(check)}subscribe(){this.instances={algoliaShopify:window.algoliaShopify,instantSearch:window.instantsearch},!(!this.instances.algoliaShopify||!this.instances.instantSearch)&&(this.setupWidgets(),this.instances.algoliaShopify.hooks.registerHook("afterISStartRemoveDefaultWidget",this.afterISStartRemoveDefaultWidget),this.instances.algoliaShopify.hooks.registerHook("beforeInstantSearchAllowParamsArray",this.beforeInstantSearchAllowParamsArray),this.instances.algoliaShopify.hooks.registerHook("beforeInstantSearchMainTemplate",this.beforeInstantSearchMainTemplate),this.instances.algoliaShopify.hooks.registerHook("beforeInstantSearchOptions",this.beforeInstantSearchOptions),this.instances.algoliaShopify.hooks.registerHook("beforeISStartAddWidgetArray",this.beforeISStartAddWidgetArray),this.settings.filterLayout!=="sidebar_visible"&&this.initLayoutBehaviorWhenReady())}}const getValueByPath=(obj,path)=>{try{return Function("obj",`return obj?.${path}`)(obj)}catch{return}},buildTransformItems=(properties=[])=>!Array.isArray(properties)||properties.length===0?items=>items:items=>{const seen=new Set;return items.filter(item=>{const keyParts=properties.map(path=>getValueByPath(item,path));if(keyParts.some(part=>part===void 0))return!0;const key=keyParts.join("||").toLowerCase();return seen.has(key)?!1:(seen.add(key),!0)})};customElements.define("algolia-instant-search",AlgoliaInstantSearch); 242//# sourceMappingURL=/cdn/shop/t/223/assets/algolia-instant-search.js.map?v=74969456878228507711789498265
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.