Hi Finsweeters,
I’ve got two projects coming up and was wondering if this feature would be possible with attributes.
As we know we can filter and show result counts on a CMS list when a filter is active/selected, but would it be also possible to display current count of a filter without any interaction.
I guess you would get it better when you look at my design. I would like to implement the counts next my filters to display how many blog items they have each when they are also not active/selected.
Thanks a lot!
hey @barrybaris! This can be achieved with the CMS Filter API. Here is an example code I’ve shared before to displays the number of items corresponding to each filter once the list loads
<script>
setTimeout(function () {
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
function (filterInstances) {
const [filterInstance] = filterInstances;
const filtersData = filterInstance.filtersData;
let resultsArray = [];
filtersData.forEach(function (element) {
const elements = element.elements;
elements.forEach(function (element) {
let filterValue = element.value;
let resultsNumber = element.resultsCount;
resultsArray.push({ filterName: filterValue, filterResults: resultsNumber });
});
});
resultsArray.forEach(function (filter) {
let elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
function (element) {
return element.textContent.trim() === filter.filterName;
}
);
elements.forEach(function (element) {
let resultsTextElement = element.nextElementSibling ? element.nextElementSibling : null;
if (resultsTextElement) {
resultsTextElement.textContent = filter.filterResults;
}
});
});
},
]);
}, 2500);
</script>
This result doesn’t get updated when the filters are applied to the list. But I can easily add this functionality if you need me to.
Please share a link to your page and I’ll modify the code for your use case 
1 Like
Hey @barrybaris! What is the functionality you are after? The code above should work as is with your current setup. Remember the code will not update when the filters are applied.
You can use this code if you want the result count numbers to be updated on each filter
<script>
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
'cmsfilter',
(filterInstances) => {
const [filterInstance] = filterInstances;
const filtersData = filterInstance.filtersData;
let resultsArray = [];
function updateItemCount() {
filtersData.forEach(function (element) {
const elements = element.elements;
elements.forEach(function (element) {
let filterValue = element.value;
let resultsNumber = element.resultsCount;
resultsArray.push({ filterName: filterValue, filterResults: resultsNumber });
});
});
resultsArray.forEach(function (filter) {
let elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
function (element) {
return element.textContent.trim() === filter.filterName;
}
);
elements.forEach(function (element) {
let resultsTextElement = element.nextElementSibling
? element.nextElementSibling
: null;
if (resultsTextElement) {
resultsTextElement.textContent = filter.filterResults;
}
});
});
}
updateItemCount();
filterInstance.listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
updateItemCount();
});
},
]);
</script>
1 Like
Hey @Support-Luis exactly like the first code which works perfect but there is a short delay when it loads. The second code has no delay but the function is not what I’m after. The results shouldn’t update when the filters are active
https://strategie-austria.webflow.io/blog
You can see here that the results are showing after 3-4 Seconds.
Hey @barrybaris! To avoid the filters from updating you can just remove this part from the code
filterInstance.listInstance.on('renderitems', (renderedItems) => {
console.log(renderedItems);
updateItemCount();
});
Without this, the numbers will always show the same amount.
