https://www.esylux.com/_assets/581ae7819742031f221bb47d76589cd6/JavaScripts/esylux.productfilter.js?1750094461

1;(function ($, window, document, undefined) {
2    var paqDataAttrName;
3    "use strict";
4    var pluginName = "esyluxProductfilter",
5        defaults = {};
6
7    function Productfilter(element, options) {
8        this.element = element;
9        this.settings = $.extend({}, defaults, options);
10        this._defaults = defaults;
11        this._name = pluginName;
12        this.init();
13    }
14
15    $.extend(Productfilter.prototype, {
16        getSessionDataKey: function() {
17            var thisPlugin = this;
18            var element = $(thisPlugin.element);
19            return 'esyluxProductfilter';
20        },
21        getSessionData: function() {
22            var thisPlugin = this;
23            var element = $(thisPlugin.element);
24            var sessionData = {};
25            var sessionDataKey = thisPlugin.getSessionDataKey();
26            if(optInSet()){
27                if (window.sessionStorage.getItem(sessionDataKey) && window.sessionStorage.getItem(sessionDataKey).length > 0) {
28                    sessionData = JSON.parse(window.sessionStorage.getItem(sessionDataKey));
29                } else {
30                    window.sessionStorage.removeItem(sessionDataKey);
31                }
32            }
33            return sessionData;
34        },
35        updateSessionData: function (filterHashes) {
36            var thisPlugin = this;
37            var element = $(thisPlugin.element);
38            var sessionDataKey = thisPlugin.getSessionDataKey();
39            var hash = '';
40            if (filterHashes.length > 0) {
41                if(optInSet()){
42                    window.sessionStorage.setItem(sessionDataKey, JSON.stringify(filterHashes));
43                }
44
45                $(filterHashes).each(function () {
46                    var value = this;
47                    hash = value + (hash !== '' ? '|' + hash : '');
48                });
49                if (hash !== '') {
50                    hash = '!' + hash;
51                }
52            } else {
53                window.sessionStorage.removeItem(sessionDataKey);
54            }
55            window.location.hash = '#' + hash;
56        },
57        init: function () {
58            var thisPlugin = this;
59            var element = $(thisPlugin.element);
60
61            $('.esyluxProductfilterProcessing').hide();
62
63            var sessionData = thisPlugin.getSessionData();
64
65            if ((window.location.hash && window.location.hash.substr(0, 2) === '#!') || (sessionData.length > 0)) {
66                $('.esyluxProductfilterOrigin').hide();
67                $('.esyluxProductfilterProcessing').show();
68            }
69
70            element.find('a').off('click');
71
72            element.find('.slider').each(function () {
73                var slider = $(this);
74                slider.slider({
75                    range: true,
76                    min: slider.data('min'),
77                    max: slider.data('max'),
78                    values: [slider.data('valueMin'), slider.data('valueMax')],
79                    step: slider.data('step'),
80
81                    slide: function (event, ui) {
82                        element.find('.slider-value[data-selector="' + slider.data('selector') + '"]').text(
83                            ui.values[0] + ' - ' + ui.values[1]
84                        );
85                    },
86
87                    change: function (event, ui) {
88                        if (element.hasClass('processing')) {
89                            return;
90                        }
91                        paqDataAttrName = slider.attr('data-attr-name');
92                        _paq.push(['trackEvent', 'productFilter', paqDataAttrName]);
93                        element.find('.slider-value[data-selector="' + slider.data('selector') + '"]').text(
94                            ui.values[0] + ' - ' + ui.values[1]
95                        );
96                        if (slider.data('valueMin') !== ui.values[0]
97                            || slider.data('valueMax') !== ui.values[1]) {
98
99                            slider.data('valueMin', ui.values[0]);
100                            slider.data('valueMax', ui.values[1]);
101                            if (slider.data('valueMin') !== slider.data('min')
102                                || slider.data('valueMax') !== slider.data('max')) {
103                                slider.addClass('set');
104                                slider.data('filterQuery',
105                                    slider.data('selector') + '>=' + ui.values[0]
106                                    + ' and ' + slider.data('selector') + '<=' + ui.values[1]
107                                );
108                            } else {
109                                slider.removeClass('set');
110                                slider.data('filterQuery', '');
111                            }
112                            thisPlugin.updateResults();
113                        }
114                        // show tags if dimension slider has changed
115                        if (slider.data('valueMin') !== slider.data('min') || slider.data('valueMax') !== slider.data('max')) {
116                            $('.filter-tags .filter-item.slider-item').each(function(){
117                                if ( $(this).find('.filter-tag').data('facetValue') ==  slider.data('attrName')) {
118
119                                    $(this).find('.filter-tag').removeClass('hide');
120                                }
121                            });
122                        } else{
123                            $('.filter-tags .filter-item.slider-item').each(function(){
124                                if ( $(this).find('.filter-tag').data('facetValue') ==  slider.data('attrName')) {
125
126                                    $(this).find('.filter-tag').addClass('hide');
127                                }
128                            });
129                        }
130                    },
131
132                    create: function (event, ui) {
133                        element.find('.slider-value[data-selector="' + slider.data('selector') + '"]').text(
134                            slider.slider('values', 0) + ' - ' + slider.slider('values', 1)
135                        );
136                    }
137                });
138            });
139
140            element.on('click', 'a.reset', function () {
141                thisPlugin.reset();
142                window.sessionStorage.removeItem('esyluxProductfilter');
143                $(this).removeClass('active');
144            });
145
146            element.on('click', '.ui a:not(.disabled)', function () {
147                if (element.hasClass('processing')) {
148                    return;
149                }
150
151                $(this).toggleClass('set');
152
153                var filterHash = $(this).data('filter-hash');
154                $('.filter-tag a[data-filter-hash="' + filterHash + '"]').parent('.filter-tag').toggleClass('hide');
155
156                thisPlugin.updateResults();
157
158                if (!$('.filter .filter-item .ui a.set').length) {
159                    $('.filter .reset').removeClass('active');
160                }
161            });
162            $('.filter-tag[data-facet-value]').on('click', function () {
163                if (element.hasClass('processing')) {
164                    return;
165                }
166
167                var facetValue = $(this).data('facet-value');
168                element.find('.ui a[data-facet-value="' + facetValue + '"]').removeClass('set');
169
170                $(this).addClass('hide');
171
172                thisPlugin.updateResults();
173            });
174            $('.filter-tag.selectedSeries').on('click', function () {
175                if (element.hasClass('processing')) {
176                    return;
177                }
178
179                element.data('selectedSeriesId', '');
180                $('.selectedSeries').addClass('hide').find('a').text('');
181                $(this).addClass('hide');
182
183                thisPlugin.updateResults();
184            });
185
186            element.data('selectedSeriesId', '');
187            $('.selectedSeries').addClass('hide').find('a').text('');
188            $(document).on('click', '.esyluxProductfilterResults .esyluxProductfilterSeries', function (e) {
189                e.preventDefault();
190                $('.esyluxProductfilterResults .esyluxProductfilterSeries').slide

190Up();
191                var groupId = $(this).data('groupId');
192                var groupTitle = $(this).data('groupTitle');
193                element.data('selectedSeriesId', groupId);
194                $('.selectedSeries').removeClass('hide').find('a').text(groupTitle);
195                thisPlugin.updateResults();
196            });
197
198            $(document).on('click', '.esyluxProductfilterProductList .page-link', function (e) {
199                e.preventDefault();
200                var pageLink = $(this);
201                thisPlugin.updateResults(pageLink.data('page'));
202                $('body,html').animate({
203                    scrollTop: 0
204                }, 800);
205            })
206
207            $('.filter-tags .filter-item.slider-item .set').click(function(){
208                var el = $(this).parent().data('facetValue');
209
210                thisPlugin.refreshSingleSlider(el);
211            });
212
213            if (window.location.hash.substr(0, 2) === '#!') {
214                let hash = decodeURIComponent(window.location.hash.substr(2));
215                var filterQueries = hash.split('|');
216                $(filterQueries).each(function (index) {
217                    var filterHash = decodeURIComponent(this);
218                    var item = $('.ui a[data-filter-hash=\'' + filterHash + '\']');
219                    item.addClass('set').parent('.filter-tag').removeClass('hide');
220                    item.parents('.ui').slideDown();
221                });
222                thisPlugin.updateResults();
223                $('.load-more-filters').hide();
224                $('.filter:not(.filter-tags) .filter-item').show();
225            } else {
226                if (sessionData && sessionData.length > 0) {
227                    var needsUpdate = false;
228                    $(sessionData).each(function () {
229                        var filterHash = this;
230                        var item = $('.ui a[data-filter-hash=\'' + filterHash + '\']');
231                        if (item.length > 0) {
232                            item.addClass('set');
233                            item.parents('.ui').slideDown();
234                            needsUpdate = true;
235                        }
236                    });
237                    if (needsUpdate) {
238                        thisPlugin.updateResults();
239                        $('.load-more-filters').hide();
240                        $('.filter:not(.filter-tags) .filter-item').show();
241                        var filterQueries = window.location.hash.substr(2).split('|');
242                        $(filterQueries).each(function (index) {
243                            var filterHash = decodeURIComponent(this);
244                            var item = $('.ui a[data-filter-hash=\'' + filterHash + '\']');
245                            item.addClass('set').parent('.filter-tag').removeClass('hide');
246                            item.parents('.ui').slideDown();
247                        });
248                    } else {
249                        $('.esyluxProductfilterOrigin').show();
250                        $('.esyluxProductfilterProcessing').hide();
251                    }
252                }
253            }
254        },
255
256        reset: function () {
257            var thisPlugin = this;
258            var element = $(thisPlugin.element);
259
260            element.find('.ui .set').removeClass('set');
261            element.find('.ui .disabled').removeClass('disabled');
262            $('.filter-tag[data-facet-value]').addClass('hide');
263            element.data('selectedSeriesId', '');
264            $('.selectedSeries').addClass('hide').find('a').text('');
265            $('.esyluxProductfilterResults').html('').removeClass('processing').slideUp();
266            $('.esyluxProductfilterOrigin').slideDown();
267            thisPlugin.refreshSlider();
268            thisPlugin.updateSessionData([]);
269        },
270
271        refreshSlider: function () {
272            var thisPlugin = this;
273            var element = $(thisPlugin.element);
274            element.find('.slider').each(function () {
275                var slider = $(this),
276                    attributeId = slider.data('attributeId');
277
278                var values = $('.set[data-attribute-id="' + attributeId + '"][data-value-id]').map(function () {
279                    return $(this).data('valueInt')
280                });
281
282                var min, max;
283                if (values.length > 0) {
284                    min = Math.min.apply(null, values);
285                    max = Math.max.apply(null, values);
286
287                    slider.data('valueMin', min);
288                    slider.data('valueMax', max);
289
290                } else {
291                    min = slider.data('min');
292                    max = slider.data('max');
293                }
294                if (slider.slider("instance")) {
295                    slider.slider('values', [min, max]);
296                }
297
298            });
299        },
300        refreshSingleSlider: function (e) {
301            var thisPlugin = this;
302            var element = $(thisPlugin.element);
303            element.find('[data-attr-name="' + e + '"]').each(function () {
304                var slider = $(this),
305                    attributeId = slider.data('attributeId');
306
307                var values = $('.set[data-attribute-id="' + attributeId + '"][data-value-id]').map(function () {
308                    return $(this).data('valueInt')
309                });
310
311                var min, max;
312                if (values.length > 0) {
313                    min = Math.min.apply(null, values);
314                    max = Math.max.apply(null, values);
315
316                    slider.data('valueMin', min);
317                    slider.data('valueMax', max);
318
319                } else {
320                    min = slider.data('min');
321                    max = slider.data('max');
322                }
323                if (slider.slider("instance")) {
324                    slider.slider('values', [min, max]);
325                }
326
327            });
328        },
329
330        updateResults: function (page ) {
331            var thisPlugin = this;
332            var element = $(thisPlugin.element);
333
334            if (element.find('a.set, .slider.set').length === 0) {
335                thisPlugin.reset();
336                return;
337            }
338

339            $('.esyluxProductfilterOrigin').slideUp();
340            $('.esyluxProductfilterProcessing').show();
341            $('body').addClass('processing');
342            element.addClass('processing');
343            element.find('.slider').slider("disable");
344            $('.esyluxProductfilterResults').addClass('processing');
345            $('.esyluxProductfilterResults').slideUp();
346
347            var data = {
348                'tx_esylux_productfilter': {
349                    'group': element.data('selectedSeriesId') || element.data('groupId'),
350                    'filter': {},
351                    'page': (page || 1)
352                }
353            };
354
355            var filterHashes = [];
356            var filter = [];
357            element.find('.set[data-filter-query]').each(function () {
358                var item = $(this);
359                var filterQuery = item.data('filterQuery')
360                var facet = item.data('facet');
361                var facetName = item.data('facetAttributeName');
362                data['tx_esylux_productfilter']['filter'][facetName] = data['tx_esylux_productfilter']['filter'][facetName] || [];
363                if (filterQuery !== "") {
364                    data['tx_esylux_productfilter']['filter'][facetName].push(filterQuery);
365                }
366
367                var filterHash = item.data('filterHash');
368                if (filterHash !== "") {
369                    if (!filterHashes.includes(filterHash)) {
370                        filterHashes.push(filterHash);
371                    }
372                }
373            });
374
375            thisPlugin.updateSessionData(filterHashes);
376
377            if (thisPlugin.xhr) {
378                thisPlugin.xhr.abort();
379                thisPlugin.xhr = null;
380            }
381            thisPlugin.xhr = new window.XMLHttpRequest();
382            $.ajax({
383                type: "POST",
384                url: element.data('filter-url'),
385                xhr: function () {
386                    return thisPlugin.xhr;
387                },
388                data: data,
389                success: function (data) {
390                    if (data && data.result) {
391                        var r = $('.esyluxProductfilterResults');
392                        r.html(data.result);
393                        r.slideDown();
394                        var shariffElements = r.find('.share-modal .shariff');
395                        if (shariffElements.length > 0) {
396                            new Shariff(shariffElements);
397                        }
398                        r.removeClass('processing');
399                        $('body').removeClass('processing');
400                    }
401                    element.removeClass('processing');
402                    $('body').removeClass('processing');
403                    element.find('.slider').slider("enable");
404                    $('.esyluxProductfilterProcessing').hide();
405                    if ($('.filter .filter-item .ui a.set').length) {
406                        $('.filter .reset').addClass('active');
407                    } else {
408                        $('.filter .reset').removeClass('active');
409                    }
410                },
411                error: function (i) {
412                    element.removeClass('processing');
413                    $('body').removeClass('processing');
414                    $('.esyluxProductfilterProcessing').hide();
415                    thisPlugin.reset();
416                }
417            });
418        }
419    });
420
421    $.fn[pluginName] = function (options) {
422        return this.each(function () {
423            if (!$.data(this, "plugin_" + pluginName)) {
424                $.data(this, "plugin_" +
425                    pluginName, new Productfilter(this, options));
426            }
427        });
428    };
429
430    // checks if functional cookies are allowed
431    function optInSet(){
432        const cookieValue = "functional:1";
433        const cookieString = document.cookie.split(';').toString();
434        const indexOfFirst = cookieString.indexOf(cookieValue);
435        const optInCookie = indexOfFirst + 1;
436
437
438        // opt-in Zustand überprüfen
439        if (optInCookie) {
440            return true; // opt-in gesetzt
441
442        } else {
443            return false; // opt-in nicht gesetzt
444        }
445    }
446
447    $(document).ready(function () {
448        $('.esyluxProductfilter').esyluxProductfilter({});
449    });
450})(jQuery, window, document);