Webflow Joe

F'in Sweet Webflow Hacks

CMS item counter

What can this be used for?

  • Dynamically show amount of available jobs
  • Dynamically show amount of blog posts in a certain category, are tagged a certain way, etc.
  • Count and dynamically show any item combination inside a Collection

Part 1

Place a hidden Collection List on the page

What we're going to do here is count the amount of empty <div> blocks that are generated on the page. Place a single div block in the Collection List and give it a unique class name. In this example, we'll use .job-counter. Now we have a dynamic Collection List generating X amount of .job-counter <div> blocks on the page. If we have 3 total jobs available, there will be 3 items in the CMS, and then 3 div blocks with the class name .job-counter rendered on the page. 

[ image of collection list]

It doesn't matter where the Collection List is on your page. It can be anywhere and is best totally hidden. Give the outer parent a {display : none} and you're good to go. If you need a counter on every page, place this Collection List inside a universal symbol, like a footer. 

Now we have to count them!

Part 2

Add this to the <body> of custom code

Before <body> tag

What the heck does that mean?

Let's learn by going step by step through the code

Before  tag

Part 3

Now we're going to add the .job-total class to the text element that you want the counter element to display in. On any text element, add the class, and watch number show up dynamically when you publish your page!

Nice! You're done. Now see it live!

The number in the circle is the total number of jobs we have in the CMS

[ screenshots of 3 items in the cms ]

0

Interested in more f'in sweet Webflow hacks?

Get an alert when we post a new one.
We have 20 posts scheduled to send throughout the next 3 months.

Nice! We'll let you know when a new hack is available.
Something went wrong while submitting the form. Please email us directly at projects@finsweet.com

Want Finsweet to build your Webflow site?

We're Webflow Experts!