I’m using CMS Filter with the Results Count option. In parallel I’ve integrated successfully the Static to Collection List Attribute with Interactive option set to true.
The problem: My results counter, counts the added static element as a result. Is there any option to set the results count in CMS Filter to -1 or avoid counting the static element in the counting?
hey @baldium.com! What are the numbers supposed to be? I see you are already displaying the results-1 value in the Praxisbeispiele and Anbieter counts.
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const resultsNumberElements = document.querySelectorAll('.count-items_result'); // This is the class for all your result count text elements
// Define a function to update the resultsNumber element
function updateResultsNumber(filterInstance, resultsNumberElements, index) {
let filterResult = filterInstance.resultsElement;
// Check if the index is within the bounds of resultsNumberElements
if (index < resultsNumberElements.length) {
let resultsNumber = resultsNumberElements[index];
// Get the current innerHTML of filterResult as a number
let currentNumber = parseInt(filterResult.innerHTML, 10);
// Subtract 1 from the number if it's greater than 0
if (currentNumber > 0) {
currentNumber -= 1;
} else {
// If it's 0 or negative, set it to 0
currentNumber = 0;
}
// Set the updated value as the innerHTML of resultsNumber
resultsNumber.innerHTML = currentNumber.toString();
}
}
// Now, you can call the function in your code
filterInstances.forEach((filterInstance, index) => {
updateResultsNumber(filterInstance, resultsNumberElements, index);
});
filterInstances.forEach((filterInstance, index) => {
filterInstance.listInstance.on('renderitems', (renderedItems) => {
updateResultsNumber(filterInstance, resultsNumberElements, index);
});
});
},
]);
</script>
There might be some fine tuning as I see the static element is removed on filtering but let me know how it works and I can fix it for you
Hey @baldium.com! I’ve added a check to see if there are any active filters, if there are, the result will be the same without having to subtract the Static Item value. Can you please test this?
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const resultsNumberElements = document.querySelectorAll('.count-items_result'); // This is the class for all your result count text elements
// Define a function to update the resultsNumber element
function updateResultsNumber(filterInstance, resultsNumberElements, index) {
let filterResult = filterInstance.resultsElement;
// Check if the index is within the bounds of resultsNumberElements
if (index < resultsNumberElements.length) {
let resultsNumber = resultsNumberElements[index];
// Get the current innerHTML of filterResult as a number
let currentNumber = parseInt(filterResult.innerHTML, 10);
// Check if filters are active
if (!filterInstance.filtersActive) {
// Subtract 1 from the number if it's greater than 0
if (currentNumber > 0) {
currentNumber -= 1;
} else {
currentNumber = 0;
}
}
// Set the updated value as the innerHTML of resultsNumber
resultsNumber.innerHTML = currentNumber.toString();
}
}
filterInstances.forEach((filterInstance, index) => {
updateResultsNumber(filterInstance, resultsNumberElements, index);
});
filterInstances.forEach((filterInstance, index) => {
filterInstance.listInstance.on('renderitems', (renderedItems) => {
updateResultsNumber(filterInstance, resultsNumberElements, index);
});
});
},
]);
</script>
Right now it shows the correct amount, but once I use the filter, the static item disappears (I could live with that, although it’s not optimal) and the result is not correct, it shows 2, when 3 are showing.
Try this, I added a timeout before running the function when filters are applied you can increase the time if needed.
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
console.log('cmsfilter Successfully loaded!');
const resultsNumberElements = document.querySelectorAll('.count-items_result'); // This is the class for all your result count text elements
// Define a function to update the resultsNumber element
function updateResultsNumber(filterInstance, resultsNumberElements, index) {
let filterResult = filterInstance.resultsElement;
// Check if the index is within the bounds of resultsNumberElements
if (index < resultsNumberElements.length) {
let resultsNumber = resultsNumberElements[index];
// Get the current innerHTML of filterResult as a number
let currentNumber = parseInt(filterResult.innerHTML, 10);
// Check if filters are active
if (!filterInstance.filtersActive) {
// Subtract 1 from the number if it's greater than 0
if (currentNumber > 0) {
currentNumber -= 1;
} else {
currentNumber = 0;
}
}
// Set the updated value as the innerHTML of resultsNumber
resultsNumber.innerHTML = currentNumber.toString();
}
}
filterInstances.forEach((filterInstance, index) => {
updateResultsNumber(filterInstance, resultsNumberElements, index);
});
filterInstances.forEach((filterInstance, index) => {
filterInstance.listInstance.on('renderitems', (renderedItems) => {
setTimeout(() => {
updateResultsNumber(filterInstance, resultsNumberElements, index);
}, 200);
});
});
},
]);
</script>