CMS Filter item counter + Static to Collection

Hello community

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! Can you please share a published link? We can use the CMS Filter API to add the results count -1

Hi @Support-Luis
Of course, you can see it here: https://www.govshare.org/massnahmen/umstellung-der-strassenbeleuchtung-auf-led

There are 2 sections where we are using this “Praxisbeispiele” and “Anbieter”

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.

Hi @Support-Luis

It should count the displaying items, also if you use a filter. Let me attach this screenshot to explain:

Hey @baldium.com! Can you test this code?

<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

Hi @Support-Luis

Thanks for your quick reply. I’ve tested it, but it still counts the static item.

sorry, I forgot to add that you need to add an element as a sibling to the item counters with the class count-items_result

Hi @Support-Luis

It works when not using the filters. I left in production so you can check it:

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>

@Support-Luis It worked! :star_struck: Thank you so much!

Although I have 2 counters on that site and the second one was showing cero. I’ve duplicated script and classes and managed to make it work for both.

@baldium.com you are welcome!

The script should have handled both lists item counters, but anyway great to hear you got it to work!