Hello!
Hoping someone would be able to help me out here. I am working on a script for some advanced filtering functionality.
When a user selects category filter I need it to clear all other filters (except the category selected) and then when a user selects a subcategory filter I need it to ONLY clear the category filter, but keep all others. That way a user can only filter by subcategories within a singular category.
I am really close, but I cannot get either of my scripts to uncheck the radio and checkboxes. I can only get it to clear the _active class on the filters. There are a couple different approaches here, none seem to work.
There might even be a more elegant way of accomplishing what I am trying to do here, this is what I have.
Thanks!
<!-- Category Filter Field Clears ALL except the Category selected -->
<script>
// Ensure the CMS filter instance is loaded and accessible
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
// Access the first CMSFilters instance on the page
const [filterInstance] = filterInstances;
function checkAndUncheck() {
// Get all checkboxes in the form
const checkboxes = document.querySelectorAll('#filterServiceList input[type="checkbox"]');
checkboxes.forEach((checkbox) => {
if (checkbox.checked) {
// If the checkbox is checked, uncheck it
checkbox.checked = false;
} else {
}
});
}
// Add event listeners to category filter elements (radio)
document.querySelectorAll('[fs-cmsfilter-field="category"]').forEach((item) => {
item.addEventListener('click', () => {
// Define the category filter key and value
const categoryFilterKey = 'category';
const categoryFilterValue = item.getAttribute('fs-cmsfilter-field');
// Clear filter values for all filters
filterInstance.filtersData.forEach((filter) => {
// Clear the all filters and remove the active class from filter labels
filter.values.clear();
filter.elements.forEach((element) => {
const activeElement = element.element.closest('.fs-cmsfilter_active');
if (activeElement) {
checkAndUncheck();
activeElement.classList.remove('fs-cmsfilter_active');
}
});
// Reset category filter
if (filter.filterKeys.includes(categoryFilterKey)) {
filter.values.clear();
filter.values.add(categoryFilterValue);
}
});
});
});
},
]);
</script>
<!-- Subcategory Filter (Clears Category Only) -->
<script>
// Ensure the CMS filter instance is loaded and accessible
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
// Access the first CMSFilters instance on the page
const [filterInstance] = filterInstances;
// Function to clear only Category filters
function clearCategoryFilters() {
const categoryFilterKey = 'category';
filterInstance.filtersData.forEach((filter) => {
if (filter.filterKeys.includes(categoryFilterKey)) {
// Clear category filter values
filter.values.clear();
// Iterate over each category filter element and uncheck any selected radio button
filter.elements.forEach((element) => {
const activeElement = element.element.closest('.fs-cmsfilter_active');
if (activeElement) {
activeElement.classList.remove('fs-cmsfilter_active');
}
const radioButton = element.element.querySelector('input[type="radio"]');
if (radioButton) {
radioButton.checked = false;
}
});
}
});
}
// Add event listeners to subcategory filter elements (checkboxes)
document.querySelectorAll('[fs-cmsfilter-field="subcategory"]').forEach((item) => {
item.addEventListener('click', () => {
const subcategoryValue = item.getAttribute('fs-cmsfilter-value');
// Clear category filters before applying the subcategory filter
clearCategoryFilters();
// Apply the subcategory filter by setting the value in the existing filter instance
filterInstance.setFilterValues({
subcategory: [subcategoryValue], // Ensure only 'subcategory' values are set
});
// Trigger a re-render to ensure the UI updates immediately
filterInstance.listInstance.update();
});
});
},
]);
</script>
Share link (please ignore the messiness, I’m just testing functionality)
