https://neva-distillery.ru/wp-content/themes/nevadistillery/assets/js/modules/searchCatalog.js

1export const searchCatalog = () => {
2    const resetBtn = document.querySelector('[data-filters-reset]'),
3          searchBtn = document.querySelector('[data-filters-search]'),
4          paginationHolder = document.querySelector('nav.navigation'),
5          serverUrl = document.querySelector('.filters').getAttribute('data-server'),
6          filtersInputs = document.querySelectorAll('.filters__check'),
7          sortBtns = document.querySelectorAll('.catalog__sort-btn'),
8          sortSelect = document.querySelector('#sort-select'),
9          priceInputs =  document.querySelectorAll('.filters__price-inp'),
10          sorts = {
11              newer: {
12                  name: 'newer',
13                  orderBy: 'date',
14                  order: 'DESC'
15              },
16              cheaper: {
17                  name: 'cheaper',
18                  orderBy: 'meta_value_num',
19                  order: 'ASC',
20                  metaKey: '_price'
21              },
22              expensive: {
23                  name: 'expensive',
24                  orderBy: 'meta_value_num',
25                  order: 'DESC',
26                  metaKey: '_price'
27              }
28          };
29    
30    init(filtersInputs, serverUrl, sorts, priceInputs);
31
32    resetBtn.addEventListener('click', (e) => {
33        e.preventDefault();
34
35        resetInputs(filtersInputs, serverUrl, sorts, priceInputs);
36    });
37    searchBtn.addEventListener('click', (e) => {
38        e.preventDefault();
39
40        searchInputs(filtersInputs, serverUrl, sorts, priceInputs);
41    });
42    priceInputs.forEach(input => {
43        input.addEventListener("keydown", (event) => {
44            if (event.key === 'Enter') {
45                searchInputs(filtersInputs, serverUrl, sorts, priceInputs);
46            }
47        
48        })
49    })
50    paginationHolder.addEventListener('click', (e) => {
51        const pageLink = e.target.closest('a.page-numbers:not(.current)');
52
53        if (pageLink) {
54            e.preventDefault();
55            const page = parseInt(pageLink.dataset.page);
56            searchInputs(filtersInputs, serverUrl, sorts, priceInputs, page);
57        };
58    });
59    sortBtns.forEach(btn => {
60        btn.addEventListener('click', (e) => {
61            e.preventDefault();
62
63            const element = e.currentTarget;
64            let value = element.dataset.sortValue;
65
66            document.querySelectorAll('[data-sort-value]').forEach(el => el.classList.remove('catalog__sort-btn--active'));
67            element.classList.add('catalog__sort-btn--active');
68            document.querySelectorAll('.sort-select>option').forEach(el => el.selected = false);
69            document.querySelector(`[value="${value}"]`).selected = true;
70    
71            searchInputs(filtersInputs, serverUrl, sorts, priceInputs);
72        });
73    });
74    sortSelect.addEventListener('change', (e) => {
75        e.preventDefault();
76
77        const element = e.target;
78        let value = element.value;
79
80        document.querySelectorAll('.sort-select>option').forEach(el => el.selected = false);
81        element.selected = true;
82        document.querySelectorAll('[data-sort-value]').forEach(el => el.classList.remove('catalog__sort-btn--active'));
83        document.querySelector(`[data-sort-value="${value}"]`).classList.add('catalog__sort-btn--active');
84
85        searchInputs(filtersInputs, serverUrl, sorts, priceInputs);
86    });
87};
88
89const init = (filtersInputs, serverUrl, sorts, priceInputs) => {
90    searchInputs(filtersInputs, serverUrl, sorts, priceInputs);
91}
92const postJsonData = async (url, data) => {
93    document.querySelector('.catalog').classList.add('load');
94
95    const result = await fetch(url, {
96        method: 'POST',
97        body: data,
98        headers: {
99            'Content-type': 'application/json; charset=utf-8'
100        }
101    });
102
103    if (!result.ok) throw new Error(`Could not fetch ${url}. Status: ${result.status}`);
104
105    return await result.json();
106};
107const renderElements = (url, result, list, pagination) => {
108    postJsonData(url, JSON.stringify(result))
109        .then(data => {
110            window.scrollTo(0, 0);
111            if (data.html) {
112                list.innerHTML = data.html;
113                pagination.innerHTML = data.pagination;
114            };
115        })
116        .catch(e => {
117            alert(e);
118        })
119        .finally(() => {
120            document.querySelector('.catalog').classList.remove('load');
121        });
122}
123const resetInputs = (filtersInputs, url, sorts, priceInputs, page = 1) => {
124    const pagination = document.querySelector('.navigation'),
125          list = document.querySelector('.catalog__list'),
126          sort = document.querySelector('.catalog__sort-btn--active').dataset.sortValue,
127          result = {
128              categories: [],
129              page: page,
130              orderBy: sorts[sort]['orderBy'],
131              order: sorts[sort]['order']
132          };
133    
134    if (Object.keys(sorts[sort]).includes('metaKey')) result['metaKey'] = sorts[sort]['metaKey'];
135

136    filtersInputs.forEach(input => {
137        if (input.checked) input.checked = false;
138    });
139
140    priceInputs.forEach(input => {
141        input.value = '';
142        input.setAttribute('value', '');;
143    });
144
145    renderElements(url, result, list, pagination);
146};
147const searchInputs = (filtersInputs, url, sorts, priceInputs, page = 1) => {
148    const pagination = document.querySelector('.navigation'),
149          list = document.querySelector('.catalog__list'),
150          sort = document.querySelector('.catalog__sort-btn--active').dataset.sortValue,
151          result = {
152              categories: [],
153              page: page,
154              orderBy: sorts[sort]['orderBy'],
155              order: sorts[sort]['order'],
156              minPrice: priceInputs[0].value,
157              maxPrice: priceInputs[1].value
158          };
159    
160    if (Object.keys(sorts[sort]).includes('metaKey')) result['metaKey'] = sorts[sort]['metaKey'];
161
162    const urlParams = new URLSearchParams(window.location.search);
163    let searchQuery = '';
164    if (urlParams.has('s')) {
165        searchQuery = urlParams.get('s');
166        result['s'] = searchQuery;
167    };
168
169    filtersInputs.forEach(input => {
170        if (input.hasAttribute('data-category') && input.checked) {
171            result['categories'].push(input.getAttribute('data-slug'));
172        }
173    });
174
175    renderElements(url, result, list, pagination);
176};