https://milana-shoes.ru/local/templates/milana2024/assets/js/filter/filter.js

1$(function () {
2    $.fn.isolatedScroll = function() {
3        this.bind('mousewheel DOMMouseScroll', function (e) {
4            var delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail,
5                bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
6                topOverflow = this.scrollTop <= 0;
7 
8            if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
9                e.preventDefault();
10            }
11        });
12        return this;
13    };
14
15    if (window.innerWidth >= 1200) {
16        $('.filter__scroll').isolatedScroll();
17    }
18
19    // Находим все фильтры и контейнер с блоками фильтров
20    const selects = document.querySelectorAll(".select--filter_desktop");
21    const filterBlocksContainer = document.querySelector(".filter__blocks");
22
23    selects.forEach(select=>{
24        // инпуты фильтров 
25        const filterInputs = select.querySelectorAll('.checkbox__input');
26        // Контейнер с числом выбранных фильтров
27        const filterSelectNumberContainer = select.querySelector(".select__numbers");
28        // Ищем кнопку для сброса всего фильтра
29        const filterResetBtn = select.querySelector(".filter__reset");
30        // Название категории фильтров
31        const filterCategoryName = select.querySelector(".select__text a").innerHTML;
32        // кол-во выбранных фильтров
33        var countSelectFilter = 0;
34
35        if (filterResetBtn){
36            // Кнопка "Сбросить" у одной категории фильтра
37            filterResetBtn.addEventListener("click", ()=>{
38                let filterBlocks = document.querySelectorAll(".filter__block");
39                let filterBlocksLenght = filterBlocks.length;
40
41                // Удаляем все блоки категории
42                filterBlocks.forEach(filterBlock =>{
43                    if(filterCategoryName == filterBlock.dataset.filterCategoryName){
44                        removeFilterBlock(filterBlock);
45                        filterBlocksLenght -= 1;
46                    }
47                })
48
49                // После удаления проверяем сколько осталось блоков
50                if (filterBlocksLenght == 1) {
51                    filterBlocksContainer.classList.add("filter__blocks--hidden");
52                }
53
54                filterResetBtn.classList.add("filter__reset--hidden");
55                filterReset(filterInputs);
56                removeNumberInFilterNumberContainer(filterSelectNumberContainer);
57            })
58        }
59
60        filterInputs.forEach(filterInput =>{
61            // В начале мы должны проставить кол-во выбранных фильтров
62            // которые сохранились после перезагрузки сайта
63            if (filterInput.checked) {
64                // Ищем имя фильтра который выбрал пользователь
65                let selectFilterName = filterInput.parentNode.querySelector('.checkbox__text').innerText;
66                countSelectFilter += 1;
67                if (filterBlocksContainer) {
68                    addBlocksInFilterBlocksContainer(selectFilterName, filterBlocksContainer, filterCategoryName);
69                }
70                if (filterResetBtn) {
71                    filterResetBtn.classList.remove("filter__reset--hidden");
72                }
73            }
74
75            // Создаём событие на изменение чекбокса на каждый фильтр
76            filterInput.addEventListener("change", ()=>{
77                let newCountSelectFilter = 0;
78                
79                filterInputs.forEach(filterInput =>{
80                    if (filterInput.checked) newCountSelectFilter += 1;
81
82                    let selectFilterName = filterInput.parentNode.querySelector('.checkbox__text').innerText;
83                    var flag = true;
84                    if (filterInput.checked) {
85                        if (filterBlocksContainer) {
86                            let filterBlocks = filterBlocksContainer.querySelectorAll('.filter__block:not(.link)');
87                            filterBlocks.forEach(filterBlock =>{
88                                let filterBlockName = filterBlock.querySelector('.filter__block-text').innerText;
89    
90                                if (filterBlockName == selectFilterName) {
91                                    flag = false;
92                                    filterBlock.classList.remove("filter__block--hidden");
93                                    filterBlocksContainer.classList.remove("filter__blocks--hidden");
94                                }
95                            })
96                        }
97
98                        if (flag) {
99                            if (filterBlocksContainer) {
100                                var filterBlock = addBlocksInFilterBlocksContainer(selectFilterName, filterBlocksContainer, filterCategoryName);
101                                const filterBlockResetBtn = filterBlock.querySelector(".filter__delete");
102                                const filterBlockName = filterBlock.querySelector(".filter__block-text").innerText;  
103
104                                filterBlockResetBtn.addEventListener("click", ()=>{  

105                                    selects.forEach(select =>{
106                                        const filterInputs = select.querySelectorAll('.checkbox__input');
107                                        const filterSelectNumberContainer = select.querySelector(".select__numbers");
108                                        var countSelectFilterTemp = 0
109                    
110                                        filterInputs.forEach(filterInput =>{
111                                            const selectFilterName = filterInput.parentNode.querySelector('.checkbox__text').innerText;
112                                            const filterCategoryName = select.querySelector(".select__text a").innerHTML;
113                    
114                                            if (selectFilterName == filterBlockName && filterCategoryName == filterBlock.dataset.filterCategoryName) {
115                                                filterInput.removeAttribute("checked");
116                                                filterInput.checked = false;
117                                                filterBlock.classList.add("filter__block--hidden");
118                                            }
119                                        })
120        
121                                        filterInputs.forEach(filterInput =>{
122                                            if (filterInput.checked) {
123                                                countSelectFilterTemp += 1;
124                                            }
125                                        });
126                                        
127                                        if (countSelectFilterTemp > 0) {
128                                            addNumberInFilterNumberContainer(countSelectFilterTemp, filterSelectNumberContainer);
129                                        }else{
130                                            removeNumberInFilterNumberContainer(filterSelectNumberContainer);
131                                        }
132                                    })
133        
134                                    
135                                    var filterBlocks = document.querySelectorAll(".filter__block:not(.filter__block--hidden) ");
136        
137                                    if (filterBlocks.length == 1) {
138                                        filterBlocksContainer.classList.add("filter__blocks--hidden");
139                                    }
140                                })
141                            }
142                            filterInput.setAttribute("checked", "true");
143                        }
144                    }else if (filterBlocksContainer){
145                        removeBlocksInFilterBlocksContainer(selectFilterName, filterBlocksContainer, filterCategoryName);
146                        var filterBlocks = document.querySelectorAll(".filter__block:not(.filter__block--hidden)");
147                        if (filterBlocks.length == 1) {
148                            filterBlocksContainer.classList.add("filter__blocks--hidden");
149                        }                        
150                    }
151                })
152
153                if (newCountSelectFilter > 0) {
154                    if (filterResetBtn){
155                        filterResetBtn.classList.remove("filter__reset--hidden");
156                    }
157                    addNumberInFilterNumberContainer(newCountSelectFilter, filterSelectNumberContainer);
158                }else{
159                    if (filterResetBtn){
160                        filterResetBtn.classList.add("filter__reset--hidden");
161                    }
162                    removeNumberInFilterNumberContainer(filterSelectNumberContainer);
163                }
164            })
165        })
166
167        if (countSelectFilter > 0) {
168            addNumberInFilterNumberContainer(countSelectFilter, filterSelectNumberContainer);
169        }
170
171       
172        
173    })
174
175    const filterBlocks = document.querySelectorAll(".filter__block");
176
177    filterBlocks.forEach(filterBlock =>{
178        var removeFilterBlockBtn = filterBlock.querySelector(".filter__delete");
179        const filterBlockName = filterBlock.querySelector(".filter__block-text").innerText;
180
181        if (removeFilterBlockBtn) {
182            removeFilterBlockBtn.addEventListener("click", ()=>{ 

183                selects.forEach(select =>{
184                    const filterInputs = select.querySelectorAll('.checkbox__input');
185                    var countSelectFilterTemp = 0;
186                    const filterSelectNumberContainer = select.querySelector(".select__numbers");
187
188                    filterInputs.forEach(filterInput =>{
189                        
190                        const selectFilterName = filterInput.parentNode.querySelector('.checkbox__text').innerText;
191                        const filterCategoryName = select.querySelector(".select__text a").innerHTML;
192
193                        if (selectFilterName == filterBlockName && filterCategoryName == filterBlock.dataset.filterCategoryName) {
194                            filterInput.removeAttribute("checked");
195                            filterBlock.classList.add("filter__block--hidden");
196                        }
197                    })
198
199                    filterInputs.forEach(filterInput =>{
200                        if (filterInput.checked) {
201                            countSelectFilterTemp += 1;
202                        }
203                    });
204                    
205                    if (countSelectFilterTemp > 0) {
206                        addNumberInFilterNumberContainer(countSelectFilterTemp, filterSelectNumberContainer);
207                    }else{
208                        removeNumberInFilterNumberContainer(filterSelectNumberContainer);
209                    }
210                })
211
212                var filterBlocks = document.querySelectorAll(".filter__block:not(.filter__block--hidden)");
213                if (filterBlocks.length == 1) {
214                    filterBlocksContainer.classList.add("filter__blocks--hidden");
215                }
216            })
217        }
218    })
219
220
221});
222
223// count - это число сколько фильтров выбрал пользователь для одного фильтра
224// filterSelectNumberContainer - это элемент одного фильтра куда нужно вставить значение
225function addNumberInFilterNumberContainer(count, filterSelectNumberContainer){
226    filterSelectNumberContainer.classList.remove("select__number--hidden");
227
228    filterSelectNumberContainer.innerHTML = count;
229}
230
231// filterSelectNumberContainer - это элемент куда нужно вставить значение
232function removeNumberInFilterNumberContainer(filterSelectNumberContainer){
233    filterSelectNumberContainer.classList.add("select__number--hidden");
234
235    filterSelectNumberContainer.innerHTML = '';
236}
237
238// selectFilterName - название фильтра который нужно добавить
239// filterBlocksContainer - контейнер куда следует добавить блок
240// filterName - имя фильтра
241function addBlocksInFilterBlocksContainer(filterName, filterBlocksContainer, filterCategoryName){
242
243      
244    // Создаём блок
245    let filterBlock = document.createElement(`div`);
246    filterBlock.classList.add("filter__block")
247    filterBlock.dataset.filterCategoryName = filterCategoryName;
248    filterBlock.innerHTML = `<span class="filter__block-text">${filterName}</span><button class="filter__delete"></button>`;
249
250    //Вставляем блок и сохранияем текущий элемент в ту же переменную 
251    filterBlocksContainer.prepend(filterBlock);
252
253    filterBlocksContainer.classList.remove("filter__blocks--hidden");
254
255    const filterBlocksTemp = document.querySelectorAll(".filter__block");
256
257    filterBlocksTemp.forEach(filterBlock =>{
258        if (filterBlock.querySelector(".filter__block-text").innerText == filterName && filterBlock.dataset.filterCategoryName == filterCategoryName) {
259            filterBlock = filterBlock;
260        }
261    })
262
263    return filterBlock;
264
265}
266
267// selectFilterName - название фильтра который нужно добавить
268// filterBlocksContainer - контейнер куда следует добавить блок
269// filterName - имя фильтра
270function removeBlocksInFilterBlocksContainer(selectFilterName, filterBlocksContainer, filterCategoryName){
271    const filterBlocks = filterBlocksContainer.querySelectorAll(".filter__block");
272
273    filterBlocks.forEach(filterBlock =>{
274        let filterBlockText = filterBlock.querySelector(".filter__block-text").innerText;
275

276        if (filterBlock.dataset.filterCategoryName == filterCategoryName && filterBlockText == selectFilterName) {
277            filterBlock.remove();
278        }
279    })
280}
281
282function removeFilterBlock(filterBlock){
283    filterBlock.remove();
284}
285
286
287function filterReset(filterInputs) {
288    filterInputs.forEach(checkboxesInput =>{
289        checkboxesInput.checked = false;
290    })
291}