Updated version - v1/count-list-items

Attributes
1

is there also an updated version of count-list-items

2

Hey @dennis!

Based on our research, the count-list-items attribute is only available in Attributes v1 (Legacy) with no direct standalone equivalent in v2.

However, you can find similar counting functionality integrated within other v2 attributes:

  • List Filter v2 includes fs-list-element="results-count" to show filtered results count
  • List Load v2 offers multiple counting options like fs-list-element="items-count" for total collection items, fs-list-element="visible-count" for currently visible items, and range display options

Just remember that Attributes v1 and v2 can’t be used on the same page as they’re incompatible, so you’ll need to choose one version for your entire project.

If you need help implementing any of these solutions, @Support-Luis or @Support-Pedro can assist you further.

3

The thing is that i want to show the number of items in my nested list. and that does not seem to work, is that correct?

4

Hey @dennis! Could you share a read-only link? I’ll have a look at the setup and see the best approach for this :wink:

5

hi there, sorry for the delay, had a lot of work to do.

so you can see, each brand says, “4 compatible models”. that should become dynamic on the number of items int he nested list when filtered.

Required: Please provide a staging/production URL where we can see the issue

6

Hey @dennis! I’m afraid there is no direct optionto achieve this within Attributes. However I have managed to get the item count working reliably with this code snippet using the List API.

<script>
  window.FinsweetAttributes = window.FinsweetAttributes || [];
  window.FinsweetAttributes.push([
    'list',
    async (listInstances) => {
      console.log('List Successfully loaded!');

      const [listInstance] = listInstances;
      const items = listInstance.items.value;

      async function processItem(item) {
        try {
          await item.nesting;
          const { element } = item;
          const numberCountElement = element.querySelector('[data-count="item-count"]');
          const nestedList = element.querySelector('[fs-list-element="list"]');
          const nestedItems = nestedList ? nestedList.children.length : 0;

          if (numberCountElement) {
            numberCountElement.textContent = nestedItems;
          }
        } catch (error) {
          console.error('Error resolving nesting for item:', error);
        }
      }

      await Promise.all(items.map(processItem));
    },
  ]);
</script>

We wait for all items to be nested, and the we simply count the children element for the list. The only required modification to your setup is separating the text block that will show the item count and add the attribute data-count="item-count" to it.

Final layout should look like this

<div class="brand-content">
  <div class="compatibility_list_brand">Alfen</div>
  <div class="text-block-131" data-count="item-count">4</div>
  <div class="text-block-131">compatible models</div>
</div>