https://soracom.io/wp-content/themes/salient-child/frontend/assets…verview-with-search-and-filter.js?ver=0.0.1

1document.addEventListener('DOMContentLoaded', () => {
2    const searchInput = document.querySelector('.js-overview-search');
3    const filterForm = document.querySelector('.js-filter-form');
4    const resultContainer = document.querySelector('.js-overview-result');
5    const jsSearchAndFilterResultSection = document.querySelector('.js-search-and-filter-result-section');
6    const loadMoreBtn = document.querySelector('.js-search-and-filter-load-more');
7
8    if (!filterForm || !resultContainer) return;
9
10    let currentPage = 1;
11    let maxPage = parseInt(loadMoreBtn?.dataset.maxPage || 1);
12
13    function getFormData() {
14        const formData = new FormData(filterForm);
15        let searchValue = searchInput ? searchInput.value.trim() : '';
16        let industryFilters = [];
17        let applicationFilters = [];
18        let productsUsed = [];
19
20        filterForm.querySelectorAll('input[name="industry[]"]:checked').forEach(input => {
21            industryFilters.push(input.value);
22        });
23        filterForm.querySelectorAll('input[name="application[]"]:checked').forEach(input => {
24            applicationFilters.push(input.value);
25        });
26        filterForm.querySelectorAll('input[name="products_used[]"]:checked').forEach(input => {
27            productsUsed.push(input.value);
28        });
29
30        return {
31            search: searchValue,
32            industries: industryFilters,
33            applications: applicationFilters,
34            products_used: productsUsed,
35        };
36    }
37
38    async function fetchFilteredResults(append = false) {
39        if (!append) {
40            currentPage = 1;
41        }
42
43        const data = getFormData();
44
45        jsSearchAndFilterResultSection.classList.add('layer-loader');
46
47        const response = await fetch(che_overview_with_search_and_filter_vars.ajaxurl, {
48            method: 'POST',
49            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
50            body: new URLSearchParams({
51                action: 'che_overview_search_and_filter',
52                nonce: che_overview_with_search_and_filter_vars.nonce,
53                search: data.search,
54                industries: data.industries,
55                applications: data.applications,
56                products_used: data.products_used,
57                page: currentPage
58            })
59        });
60
61        const result = await response.json();
62
63        if (result.success) {
64            if (append) {
65                resultContainer.insertAdjacentHTML('beforeend', result.data.html);
66            } else {
67                resultContainer.innerHTML = result.data.html;
68                maxPage = result.data.max_page || 1;
69                currentPage = 1;
70
71                if (loadMoreBtn) {
72                    loadMoreBtn.dataset.currentPage = currentPage;
73                    loadMoreBtn.dataset.maxPage = maxPage;
74                }
75            }
76
77            if (loadMoreBtn) {
78                if (currentPage >= maxPage) {
79                    loadMoreBtn.style.display = 'none';
80                } else {
81                    loadMoreBtn.style.display = 'inline-flex';
82                }
83            }
84
85            jsSearchAndFilterResultSection.classList.remove('layer-loader');
86        } else {
87            console.error('Error fetching filtered results');
88        }
89    }
90
91    if (searchInput) {
92        searchInput.addEventListener('input', () => {
93            fetchFilteredResults();
94        });
95    }
96
97    filterForm.addEventListener('change', () => {
98        fetchFilteredResults();
99    });
100
101    filterForm.addEventListener('submit', (event) => {
102        event.preventDefault();
103    });
104
105    if (loadMoreBtn) {
106        loadMoreBtn.addEventListener('click', async () => {
107            if (currentPage < maxPage) {
108                currentPage++;
109                await fetchFilteredResults(true);
110                loadMoreBtn.dataset.currentPage = currentPage;
111                if (currentPage >= maxPage) {
112                    loadMoreBtn.style.display = 'none';
113                }
114            }
115        });
116    }
117
118    function updateBadges() {
119        document.querySelectorAll('.category-badge').forEach(badge => {
120            let category = badge.textContent.trim().toLowerCase().replace(/\s+/g, '-');
121            let checkbox = document.querySelector(`input[name="industry[]"][value="${category}"]`);
122            if (checkbox) {
123                badge.classList.toggle('active', checkbox.checked);
124            }
125        })
126    }
127
128    filterForm.querySelectorAll('input[name="industry[]"]').forEach((checkbox) => {
129        checkbox.addEventListener('change', () => {
130            let category = checkbox.value;
131            let badge = Array.from(document.querySelectorAll('.category-badge')).find((el) => el.textContent.trim().toLowerCase() === category.replace(/-/g, " "));
132
133            if (badge) {
134                badge.classList.toggle('active', this.checked);
135            }
136        })
137    });
138
139    document.querySelectorAll('.category-badge').forEach((badge) => {
140        badge.addEventListener('click', () => {
141            let category = badge.textContent.trim().toLowerCase().replace(/\s+/g, '-');
142            let checkbox = document.querySelector(`input[name="industry[]"][value="${category}"]`);
143            if (checkbox) {
144                checkbox.checked = !checkbox.checked;
145                checkbox.dispatchEvent(new Event('change'));
146                fetchFilteredResults();
147            }
148        })
149    });
150
151    updateBadges();
152});