CMS Filter, Results Count: Doesn't update with filters?

Attributes
1

I have results count working with CMS Filter to display the number of items with a CMS tag applied. I am wondering if it is possible to keep that number displayed rather than having it update when other filters are applied.

For example, when you load the page tag1 would show 10 items, tag2 shows 12 items. If I use the checkbox to select items with tag1, tag2 count goes from 12 to 0.

I am wondering how I could display the counts, but keep the 10 & 12 even with the filters applied.

2

Hey @luke! Could you share a live site link?

3

@Support-Luis

of course! I have been testing on a finsweet template:

In this example I would want the number of car “make” to stay the number it shows when it loads, and not update when the filters are changed.

4

@Support-Luis I am starting to build this out for a client next week, any chance there is a solution for this?

5

Hey @luke! This was a fun challenge and I got something that works but you’ll need to fine-tune it as it currently relies on a timeout… not the best option. but it is a starting ground for you. Some modifications to your page structure where needed:

  1. remove the fs-cmsfilter-element="filter-results-count" attribute from the result text and replace it with the .results-text class
  2. add this script to your </body> 
<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) {
          var elements = Array.from(document.querySelectorAll('[fs-cmsfilter-field]')).filter(
            function (element) {
              return element.textContent.trim() === filter.filterName;
            }
          );

          elements.forEach(function (element) {
            var resultsTextElement = element.nextElementSibling
              ? element.nextElementSibling.querySelector('.results-text')
              : null;
            if (resultsTextElement) {
              resultsTextElement.textContent = filter.filterResults;
            }
          });
        });
      },
    ]);
  }, 2500);
</script>
6

@Support-Luis awesome, thanks so much for digging in on this!

I just added it to my page and it seems to be working perfectly! I’ll keep fine tuning, but for now this should work!

7

@Support-Luis as I have been working through it I found one very strange bug. For one of my filters, it displays a count of 0 even if I have it tagged to that filter. Clicking on the filter works, it just says that there are zero items with that tag. here is a screenshot of what I mean:

Screenshot 2023-06-15 at 7.14.59 AM
Screenshot 2023-06-15 at 7.14.59 AM612Ă—804 17.3 KB

There are four items in the collection. Under “services” you can see that all four are being counted.

Under Divisions, I do have one tagged to Federal. Like I said, it works to display it on the list if I select it, it just shows the count of 0! I tried deleting the tag and re-adding it, I tried tagging them all as Federal; nothing I do seems to work here. There are actually 5 categories on the page, four of them work & count just fine, and this one tag doesn’t!

8

Hey @luke you can always dm me the page link and I’ll help you debug :muscle:

1 Like
9

@Support-Luis Hi Luis, I am trying to do the same thing. Having a result count that stays fixed. I have added your code and the extra class, but it is not working. Would you mind looking into it for me?

Here is a link:
https://tbwa-agc.webflow.io/news

10

Hey there @marcel! Your Structure seems to be a little different than what Luke was using.

I’ve only removed the .querySelector from the code that targeted the text element and it seems to be working as expected.

Here is the code that adjusts to your setup.

<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>
1 Like
11

Perfect, thank you so much.

1 Like