Please can someone help me with a CMS filter issue I’m having where the filter content double flashes when filtered/cleared. I have a two filters:
‘Type’ filters: All, Media, Ideas, Podcast
‘Category’ filters: Art, SEO, Digital
I only want the categories filter list to show when ‘All & Ideas’ type filters are active.
When I click on the ‘Media’ or ‘Podcast’ type filters, I want to display results for that type while simultaneously clearing the ‘category’ filter. I’ve added the following attributes to the filters:
When I click on ‘Media’ or ‘Podcast’, the type filter loads first, and then the clear function is executed after, causing a double flash of content. If I remove the clear from the filters then I don’t get a double flash. See image below as a ref.
The double flash issue occurs because the content is being filtered twice: once by the type filter and again by the clear function. To resolve this, try using custom JavaScript to handle both actions simultaneously. Trigger the type filter and clear the category filter in one function to ensure they happen without the double refresh.
document.querySelectorAll(‘[fs-cmsfilter-field=“type”]’).forEach(item => {
item.addEventListener(‘click’, () => {
// Trigger type filter
// Clear category filter
// Add your filtering logic here
});
});
Thanks @Support-Luis . Please could you help me with another issue I have spotted. When the category filters are cleared, and I then click on a different filter type, I have to click twice on the category filter for it to work again.
Here is my code (written by ChatGPT):
// 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;
// Example of adding event listeners to filter elements
document.querySelectorAll('[fs-cmsfilter-field="type"]').forEach(item => {
item.addEventListener('click', () => {
// Example of triggering a type filter and clearing a category filter
// Define the type filter key and value
const typeFilterKey = 'type';
const typeFilterValue = item.getAttribute('fs-cmsfilter-value');
// Apply the type filter
filterInstance.filtersData.forEach(filter => {
if (filter.filterKeys.includes(typeFilterKey)) {
filter.values.clear();
filter.values.add(typeFilterValue);
}
});
// Clear the category filter and remove the active class from category filter labels
const categoryFilterKey = 'category';
filterInstance.filtersData.forEach(filter => {
if (filter.filterKeys.includes(categoryFilterKey)) {
filter.values.clear();
filter.elements.forEach(element => {
const activeElement = element.element.closest('.fs-cmsfilter_active');
if (activeElement) {
activeElement.classList.remove('fs-cmsfilter_active');
}
});
}
});
// Apply the filters and render the filtered items
filterInstance.applyFilters().then(() => {
console.log('Filters applied successfully');
}).catch(error => {
console.error('Error applying filters:', error);
});
});
});
// The `renderitems` event runs whenever the list renders items after filtering.
filterInstance.listInstance.on('renderitems', (renderedItems) => {
console.log('Rendered items:', renderedItems);
});
},
]);
Hey @louis! Sorry for the delay, could you please test this code? I added a function to uncheck the checkboxes and it seems to be working properly on my end
<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 {
}
});
}
// Example of adding event listeners to filter elements
document.querySelectorAll('[fs-cmsfilter-field="type"]').forEach((item) => {
item.addEventListener('click', () => {
// Example of triggering a type filter and clearing a category filter
// Define the type filter key and value
const typeFilterKey = 'type';
const typeFilterValue = item.getAttribute('fs-cmsfilter-field');
const categoryFilterKey = 'category';
// Apply the type filter
filterInstance.filtersData.forEach((filter) => {
// Clear the category filter and remove the active class from category filter labels
if (filter.filterKeys.includes(categoryFilterKey)) {
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 type filter
if (filter.filterKeys.includes(typeFilterKey)) {
filter.values.clear();
filter.values.add(typeFilterValue);
}
});
});
});
// The `renderitems` event runs whenever the list renders items after filtering.
filterInstance.listInstance.on('renderitems', (renderedItems) => {
setTimeout(function () {
ScrollTrigger.refresh();
}, 300);
});
},
]);
</script>
