Dynamic item that counts the number of posts in a collection

Design help Custom code
1

Can someone help me with this? I contacted Webflow support and here’s what they suggested:

"At the moment, we do not have a built-in counter, but what you could probably do, is to use a little jQuery to increment the value of a variable and put that custom code inside of a dynamic list.

In the footer of the page, you would take the sum of the variable and use that as a value placed on some other element on the page, perhaps a text element."

I just need to display the number of posts in a collection in the end.

2

Challenge accepted. Give me a short while. Also share your read only link.

1 Like
3

Hey Brandon

The code you need is something like this;

<script>
$('.w-dyn-items').each(function() { 
            var n = $(this).children('.w-dyn-item').length;
            $(".itemcounter").text(""+ n +"");
        });
</script>

to go in the before </body> code section.

See a working example at @Brandon_Setter - April 1st 2017 and the read only link at;

https://preview.webflow.com/preview/clickart-sandbox?preview=811e1b25b800f0a0037deb5a69d7efa5

Go to the page with your name on it and let me know how it goes on your end. All the best.

EDIT: In the case of multiple collections in a single page we would have to give the dynamic list (default is .w-dyn-items) and dynamic item (default is .w-dyn-item) new classes for each collection as well as that of the counter (.itemcounter). This is because webflow does not allow dragging elements outside the dynamic item so we cant target the counter as a sibling. Assuming you have two collections name Portfolio and Case Studies then:

<script>
$('.portfolio').each(function() {   //.w-dyn-items changes to .portfolio
            var n = $(this).children('.portfolio-item').length;   //.w-dyn-item changes to .portfolio-item
            $(".portfolio-counter").text(""+ n +"");
        });

$('.cases').each(function() { 
            var n = $(this).children('.case-item').length;
            $(".case-counter").text(""+ n +"");
        });
</script>
3 Likes
4

Wow you are a legend! Thank you so much!

Already up and running and working great!

http://weareanopentable.com (right at the top)

https://preview.webflow.com/preview/we-are-an-open-table?preview=cbe302b775fa89ae0dc7c89574559c6a

1 Like
5

Great to know. Enjoy

6

Does this still work? Is there a native solution here yet? @bsetter @AlexManyeki

7

Yes. I believe it should. No native solution yet.

8

Is there also a way to use this, to make a sum of values entered in the CMS-collection?
I have 2 variables (in the same collection) that i want to add up and show.

1 Like
9

Would be very interested in finding out also!

10

There’s some progress being made with JS.
Check out this: Math using CMS fields - #9 by anthonysalamin

11

@Finsweet has a good solution for this: Count List Items - Count the number of items in a Webflow CMS Collection List

1 Like