https://www.kfd.de/_assets/f0eadd32c1c0295b9b46e6336cc028b0/JavaScript/product-filter.js?1790857483

1(function() {
2  'use strict';
3  const LNS =  {};
4  LNS.options = LNS.options || {};
5  LNS.showroom = LNS.showroom || {};
6  LNS.showroom.filterProductsByCategory = function () {
7    let triggers = document.getElementsByClassName('filter-products-trigger');
8    for (let i = 0; i < triggers.length; i++) {
9      const trigger = triggers[i];
10      if (i === 0) {
11        trigger.classList.add('active');
12      }
13      trigger.addEventListener('click', function (event) {
14        // set remove active-class to trigger
15        let siblings = this.parentNode.childNodes;
16        for (let k = 0; k < siblings.length; k++) {
17          const sibling = siblings[k];
18          if (sibling.isSameNode(this)) {
19            sibling.classList.add('active');
20          } else {
21            sibling.classList.remove('active');
22          }
23        }
24        // filter items
25        let items = document.getElementsByClassName('filter-products-item');
26        for (let j = 0; j < items.length; j++) {
27          const item = items[j];
28          if (trigger.dataset.category === 'all' || item.dataset.category === trigger.dataset.category) {
29            item.classList.remove('hidden');
30          } else {
31            item.classList.add('hidden');
32          }
33        }
34      }, false);
35    }
36  }
37
38  LNS.showroom.filterProductsByFulltext = function () {
39    let searchinputs = document.getElementsByClassName('filter-products-fulltext');
40    for (let i = 0; i < searchinputs.length; i++) {
41      const searchinput = searchinputs[i];
42      searchinput.addEventListener('keyup', function (event) {
43        // remove/set active class to trigger
44        let triggers = document.getElementsByClassName('filter-products-trigger');
45        for (let k = 0; k < triggers.length; k++) {
46          if (k === 0) {
47            triggers[k].classList.add('active');
48          } else {
49            triggers[k].classList.remove('active');
50          }
51        }
52        // filter fulltext by text input
53        this.parentNode.childNodes.item(0).classList.add('active');
54        let items = document.getElementsByClassName('filter-products-item');
55        for (let j = 0; j < items.length; j++) {
56          const item = items[j];
57          if (item.dataset.search.indexOf(searchinput.value.toLowerCase()) > -1) {
58            item.classList.remove('hidden');
59          } else {
60            item.classList.add('hidden');
61          }
62        }
63      }, false);
64    }
65  }
66
67  LNS.showroom.initResetFulltextsearch = function () {
68    let resetFulltextButtons = document.getElementsByClassName('filter-products-reset-fulltext');
69    for (let i = 0; i < resetFulltextButtons.length; i++) {
70      const resetFulltextButton = resetFulltextButtons[i];
71      resetFulltextButton.addEventListener('click', function (event) {
72        // remove/set active class to trigger
73        let triggers = document.getElementsByClassName('filter-products-trigger');
74        for (let k = 0; k < triggers.length; k++) {
75          if (k === 0) {
76            triggers[k].classList.add('active');
77          } else {
78            triggers[k].classList.remove('active');
79          }
80        }
81        let items = document.getElementsByClassName('filter-products-item');
82        for (let j = 0; j < items.length; j++) {
83          items[j].classList.remove('hidden');
84        }
85        let searchinputs = document.getElementsByClassName('filter-products-fulltext');
86        for (let j = 0; j < searchinputs.length; j++) {
87          searchinputs[j].value = '';
88        }
89      });
90    }
91  }
92  LNS.showroom.filterProductsByCategory();
93  LNS.showroom.filterProductsByFulltext();
94  LNS.showroom.initResetFulltextsearch();
95})();