Count how many items in a category?

Design help CMS
1

Hi everyone!

I know this topic has been spoken about over the years but is their a solution?

On my homepage I have a CMS Collection grid with my categories, and then I want to display the number of courses in each category. How can this number be dynamically updated?.. To me this seems a pretty basic request.

Screenshot 2022-12-29 at 13.31.43
Screenshot 2022-12-29 at 13.31.43962×904 84.9 KB

The only way I can think of doing this is to us a number field and manually update, but this is pretty time consuming.

Thanks
Scott

2

hi @iloveweb you can achieve this with JS. Here is simple example.

// your element (holder) for number of courses [eg. text element]
const coursesCount = document.querySelector("#count");
// your collection list 
const coursesNr = document.querySelector("#courses-list").children.length;

coursesCount.innerText = coursesNr
3

I would love this to work, but it’s not showing me any results unfortunately.
This is the script I’m using within an embed that sits inside a Collection List Item.

<script>
(function() {
var coursesCount = document.querySelector("#count");
// your collection list 
var coursesNr = document.querySelector("#courses-list").children().length;

coursesCount.innerText = coursesNr
});

I have the ID “count” applied to the Text Field and the ID “courses-list” to the Collection List accordingly.

The debugger is not showing me any errors.

I already tried using a different position for the embed.

I would appreciate some help in order to be able to show the correct count of referenced CMS items for each category.

4

hi @peterrific please follow basic posting guide rules you can find pinned on top of each section. Don’t forget that JS works only on LIVE page and not in WF Preview.

When posting please:

  1. Share your project’s Read-Only link AND live site’s Published link
  • The read-only link is a special url generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
  • The published link is the webflow.io subdomain where you can view the live site with custom code running. It is important to share this link, as custom code does not run in the Designer.
  1. Link to the third-party plugin you are trying to implement (don’t ask for recommendations - do your research!)
  2. Upload as many screen shots/screen cast videos as possible to help others locate what you are referring to
  3. Add a description as well as post a link to a working example of what you’re trying to achieve
  4. Check the browser console on the published site, and if there are any errors (red text), please take a screenshot and include it into your post as well.

How to open the console:

5

@iloveweb and @peterrific

It’s possible to count items in a collection list that’s already on the page, as Stan showed above. However first you need to make sure you have those collection lists on the page, even if they’re hidden. In Scott’s example, you’d need to load a list of all courses, with each course’s category, in order for the script to get the counts for you.

Note that you run into the 100 collection list item limit problem here, so… more script and reduced performance if you need to overcome that.

it’s also possible to count ALL items in any collection list with some creative scripting, with no 100-item limit issues. But that subdividing that by category… much more difficult to do realistically. The only way to solve that is with a ton of AJAX page requests ( slow ), or external automations that effectively clone the CMS somewhere you can query it for item counts ( complex ).

6

Thanks Stan! I will give this a shot