https://hartje.de/theme/ad0161b41caed76d3e30a6f5a2d22389/js/storefront/storefront.listing.plugin.022c86.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[81181],{1181(e,t,i){i.r(t),i.d(t,{default:()=>n});var s=i(4335),r=i(9068),a=i(9749),l=i(4059);class n extends s.A{static #e=this.options={dataUrl:"",filterUrl:"",params:{},filterPanelSelector:".filter-panel",cmsProductListingSelector:".cms-element-product-listing",cmsProductListingWrapperSelector:".cms-element-product-listing-wrapper",cmsProductListingResultsSelector:".js-listing-wrapper",activeFilterContainerSelector:".filter-panel-active-container",activeFilterLabelClasses:"filter-active btn",activeFilterLabelSelector:".filter-active",activeFilterLabelPreviewClass:"filter-active-preview",resetAllFilterButtonClasses:"filter-reset-all btn btn-outline-danger",resetAllFilterButtonSelector:".filter-reset-all",loadingIndicatorClass:"is-loading",loadingElementLoaderClass:"has-element-loader",ariaLiveSelector:".filter-panel-aria-live",ariaLiveUpdates:!0,disableEmptyFilter:!1,snippets:{resetAllButtonText:"Reset all",resetAllFiltersAriaLabel:"Reset all filters",removeFilterAriaLabel:"Remove filter"},scrollTopListingWrapper:!0,scrollOffset:15,ignoreHashOnlyPopstate:!0};init(){this._registry=[],this.httpClient=new r.A,this._urlFilterParams=Object.fromEntries(new URLSearchParams(window.location.search).entries()),this._filterPanel=document.querySelector(this.options.filterPanelSelector),this._filterPanelActive=!!this._filterPanel,this._filterPanelActive&&(this._showResetAll=!1,this.activeFilterContainer=document.querySelector(this.options.activeFilterContainerSelector),this.ariaLiveContainer=document.querySelector(this.options.ariaLiveSelector)),this._cmsProductListingWrapper=document.querySelector(this.options.cmsProductListingWrapperSelector),this._cmsProductListingWrapperActive=!!this._cmsProductListingWrapper,this._allFiltersInitializedDebounce=l.A.debounce(this.sendDisabledFiltersRequest.bind(this),100),this._lastPathWithoutHash=this._getPathWithoutHash(),this._registerEvents()}refreshRegistry(){let e=this._registry.filter(e=>document.body.contains(e.el));this.init(),this._registry=e,window.PluginManager.initializePlugins()}changeListing(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this._buildRequest(e,t),this._filterPanelActive&&this._buildLabels()}registerFilter(e){this._registry.push(e),this._setFilterState(e),this.options.disableEmptyFilter&&this._allFiltersInitializedDebounce()}_setFilterState(e){Object.keys(this._urlFilterParams).length>0&&"function"==typeof e.setValuesFromUrl&&e.setValuesFromUrl(this._urlFilterParams)&&this._filterPanelActive&&(this._showResetAll=!0,this._buildLabels())}deregisterFilter(e){this._registry=this._registry.filter(t=>t!==e)}_fetchValuesOfRegisteredFilters(){let e={};return this._registry.forEach(t=>{let i=t.getValues();

1Object.keys(i).forEach(t=>{Object.prototype.hasOwnProperty.call(e,t)?Object.values(i[t]).forEach(i=>{e[t].push(i)}):e[t]=i[t]})}),e}_mapFilters(e){let t={};return Object.keys(e).forEach(i=>{let s=e[i];Array.isArray(s)&&(s=s.join("|")),`${s}`.length&&(t[i]=s)}),t}_buildRequest(){let e=!(arguments.length>0)||void 0===arguments[0]||arguments[0],t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=this._fetchValuesOfRegisteredFilters(),s=this._mapFilters(i);this._filterPanelActive&&(this._showResetAll=!!Object.keys(s).length),this.options.params&&Object.keys(this.options.params).forEach(e=>{s[e]=this.options.params[e]}),Object.entries(t).forEach(e=>{let[t,i]=e;s[t]=i});let r=new URLSearchParams(s);this.sendDataRequest(r),delete s.slots,delete s["no-aggregations"],delete s["reduce-aggregations"],delete s["only-aggregations"],r=new URLSearchParams(s),e&&this._updateHistory(r),this.options.scrollTopListingWrapper&&this._scrollTopOfListing()}_scrollTopOfListing(){let e=this._cmsProductListingWrapper.getBoundingClientRect();if(e.top>=0)return;let t=e.top+window.scrollY-this.options.scrollOffset;window.scrollTo({top:t,behavior:"smooth"})}_getDisabledFiltersParamsFromParams(e){let t=Object.assign({},{"only-aggregations":1,"reduce-aggregations":1},e);return delete t.p,delete t.order,delete t["no-aggregations"],new URLSearchParams(t)}_updateHistory(e){let t=this._buildUrl(window.location.pathname,e);window.history.pushState({},"",t),this._lastPathWithoutHash=this._getPathWithoutHash()}_buildLabels(){let e="";this._registry.forEach(t=>{let i=t.getLabels();i.length&&i.forEach(t=>{e+=this.getLabelTemplate(t)})}),this.activeFilterContainer.innerHTML=e;let t=this.activeFilterContainer.querySelectorAll(this.options.activeFilterLabelSelector);e.length&&(this._registerLabelEvents(t),this.createResetAllButton())}_registerLabelEvents(e){e.forEach(e=>{e.addEventListener("click",()=>this.resetFilter(e))})}createResetAllButton(){this.activeFilterContainer.insertAdjacentHTML("beforeend",this.getResetAllButtonTemplate());let e=this.activeFilterContainer.querySelector(this.options.resetAllFilterButtonSelector);this._boundResetAllFilter||(this._boundResetAllFilter=this.resetAllFilter.bind(this)),e.removeEventListener("click",this._boundResetAllFilter),e.addEventListener("click",this._boundResetAllFilter),this._showResetAll||e.remove()}resetFilter(e){this._registry.forEach(t=>{t.reset(e.dataset.id)}),this._buildRequest(),this._buildLabels()}resetAllFilter(){this._registry.forEach(e=>{e.resetAll()}),this._buildRequest(),this._buildLabels()}getLabelTemplate(e){return`
2        <button
3            class="${this.options.activeFilterLabelClasses}"
4            data-id="${e.id}"
5            title="${this.options.snippets.removeFilterAriaLabel}: ${e.label}"
6            aria-label="${this.options.snippets.removeFilterAriaLabel}: ${e.label}">
7            ${this.getLabelPreviewTemplate(e)}
8            ${e.label}
9            <span aria-hidden="true" class="ms-1 fs-4">&times;</span>
10        </button>
11        `}getLabelPreviewTemplate(e){let t=this.options.activeFilterLabelPreviewClass;return e.previewHex?`
12                <span class="${t}" style="background-color: ${e.previewHex};"></span>
13            `:e.previewImageUrl?`
14                <span class="${t}" style="background-image: url('${e.previewImageUrl}');"></span>
15            `:""}getResetAllButtonTemplate(){return`
16        <button class="${this.options.resetAllFilterButtonClasses}" aria-label="${this.options.snippets.resetAllFiltersAriaLabel}">
17            ${this.options.snippets.resetAllButtonText}
18        </button>
19        `}addLoadingIndicatorClass(){this._filterPanel.classList.add(this.options.loadingIndicatorClass)}removeLoadingIndicatorClass(){this._filterPanel.classList.remove(this.options.loadingIndicatorClass)}addLoadingElementLoaderClass(){this._cmsProductListingWrapper.classList.add(this.options.loadingElementLoaderClass)}removeLoadingElementLoaderClass(){this._cmsProductListingWrapper.classList.remove(this.options.loadingElementLoaderClass)}sendDataRequest(e){this._filterPanelActive&&this.addLoadingIndicatorClass(),this._cmsProductListingWrapperActive&&this.addLoadingElementLoaderClass(),this.options.disableEmptyFilter&&this.sendDisabledFiltersRequest(),fetch(this._buildUrl(this.options.dataUrl,e),{headers:{"X-Requested-With":"XMLHttpRequest"}}).then(e=>{if(e.ok)return e.text();let t=Error("Could not fetch listing data.");throw t.response=e,t}).then(e=>{this.renderResponse(e)}).catch(t=>{if(t.response?.status===403){let t=this._getLoginPageUrl(e);t&&this._navigateTo(t);return}throw t}).finally(()=>{this._filterPanelActive&&(this.removeLoadingIndicatorClass(),this._updateAriaLive()),this._cmsProductListingWrapperActive&&this.removeLoadingElementLoaderClass()})}sendDisabledFiltersRequest(){let e=this._fetchValuesOfRegisteredFilters(),t=this._mapFilters(e);

19this.options.params&&Object.keys(this.options.params).forEach(e=>{t[e]=this.options.params[e]}),this._allFiltersInitializedDebounce=()=>{};let i=this._getDisabledFiltersParamsFromParams(t);fetch(this._buildUrl(this.options.filterUrl,i),{headers:{"X-Requested-With":"XMLHttpRequest"}}).then(e=>e.json()).then(e=>{this._registry.forEach(t=>{"function"==typeof t.refreshDisabledState&&t.refreshDisabledState(e,i)})})}renderResponse(e){a.A.replaceFromMarkup(e,this.options.cmsProductListingSelector),this._registry.forEach(e=>{"function"==typeof e.afterContentChange&&e.afterContentChange()}),window.PluginManager.initializePlugins(),this.$emitter.publish("Listing/afterRenderResponse",{response:e})}_updateAriaLive(){if(!this.options.ariaLiveUpdates||!this.ariaLiveContainer)return;let e=this.el.querySelector(this.options.cmsProductListingResultsSelector);this.ariaLiveContainer.innerHTML=e.dataset.ariaLiveText}_registerEvents(){window.onpopstate=this._onWindowPopstate.bind(this)}_onWindowPopstate(){if(this.options.ignoreHashOnlyPopstate&&this._lastPathWithoutHash){let e=this._getPathWithoutHash();if(this._lastPathWithoutHash===e)return}this.refreshRegistry(),this._registry.forEach(e=>{0===Object.keys(this._urlFilterParams).length&&(this._urlFilterParams.p=1),this._setFilterState(e)}),this.options.disableEmptyFilter&&this._allFiltersInitializedDebounce(),this.changeListing(!1)}_getPathWithoutHash(){return window.location.pathname+window.location.search}_buildUrl(e,t){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window.location.origin,s=new URL(e,i);return t.size>0&&t.forEach((e,t)=>{s.searchParams.append(t,e)}),s.toString()}_getLoginPageUrl(e){let t=window.router?.["frontend.account.login.page"],i=new URLSearchParams;return t?window.activeRoute?(i.set("redirectTo",window.activeRoute),i.set("redirectParameters",JSON.stringify(this._getLoginRedirectParameters(e))),`${t}?${i.toString()}`):t:null}_getLoginRedirectParameters(e){let t={};try{t=JSON.parse(window.activeRouteParameters||"{}")}catch{t={}}return{...t,...Object.fromEntries(e.entries())}}_navigateTo(e){window.location.href=e}}},9068(e,t,i){i.d(t,{A:()=>s});class s{constructor(){this._request=null,this._errorHandlingInternal=!1}get(e,t){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"application/json",s=this._createPreparedRequest("GET",e,i);return this._sendRequest(s,null,t)}post(e,t,i){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";s=this._getContentType(t,s);let r=this._createPreparedRequest("POST",e,s);return this._sendRequest(r,t,i)}delete(e,t,i){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";s=this._getContentType(t,s);let r=this._createPreparedRequest("DELETE",e,s);return this._sendRequest(r,t,i)}patch(e,t,i){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";s=this._getContentType(t,s);let r=this._createPreparedRequest("PATCH",e,s);return this._sendRequest(r,t,i)}abort(){if(this._request)return this._request.abort()}setErrorHandlingInternal(e){this._errorHandlingInternal=e}_registerOnLoaded(e,t){t&&(!0===this._errorHandlingInternal?(e.addEventListener("load",()=>{t(e.responseText,e)}),e.addEventListener("abort",()=>{console.warn(`the request to ${e.responseURL} was aborted`)}),e.addEventListener("error",()=>{console.warn(`the request to ${e.responseURL} failed with status ${e.status}`)}),e.addEventListener("timeout",()=>{console.warn(`the request to ${e.responseURL} timed out`)})):e.addEventListener("loadend",()=>{t(e.responseText,e)}))}_sendRequest(e,t,i){return this._registerOnLoaded(e,i),e.send(t),e}_getContentType(e,t){return e instanceof FormData&&(t=!1),t}_createPreparedRequest(e,t,i){return this._request=new XMLHttpRequest,this._request.open(e,t),this._request.setRequestHeader("X-Requested-With","XMLHttpRequest"),i&&this._request.setRequestHeader("Content-type",i),this._request}}},9749(e,t,i){i.d(t,{A:()=>r});let s=Object.freeze(new class{constructor(){this._domParser=new DOMParser}replaceFromMarkup(e,t){let i=e;"string"==typeof i&&(i=this._createMarkupFromString(i)),"string"==typeof t&&(t=[t]),this._replaceSelectors(i,t)}replaceElement(e,t){return("string"==typeof e&&(e=document.querySelectorAll(e)),"string"==typeof t&&(t=document.querySelectorAll(t)),e instanceof NodeList&&t instanceof NodeList&&t.length>e.length)?(t.forEach(t=>

19{e.forEach(e=>{e.innerHTML&&e.className===t.className&&(t.innerHTML=e.innerHTML)})}),!0):e instanceof NodeList&&e.length?(e.forEach((e,i)=>{e.innerHTML&&(t[i].innerHTML=e.innerHTML)}),!0):t instanceof NodeList&&t.length?(t.forEach(t=>{e.innerHTML&&(t.innerHTML=e.innerHTML)}),!0):!!t&&!!e&&!!e.innerHTML&&(t.innerHTML=e.innerHTML,!0)}_replaceSelectors(e,t){t.forEach(t=>{let i=e.querySelectorAll(t),s=document.querySelectorAll(t);this.replaceElement(i,s)})}_createMarkupFromString(e){return this._domParser.parseFromString(e,"text/html")}});class r{static replaceFromMarkup(e,t){s.replaceFromMarkup(e,t)}static replaceElement(e,t){return s.replaceElement(e,t)}}}}]);