Streaming live at 10am (PST)

Dynamic item that counts the number of posts in a collection

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.

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

1 Like

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 http://clickart-sandbox.webflow.io/counter 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

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

Great to know. Enjoy

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

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

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

Would be very interested in finding out also!

There’s some progress being made with JS.
Check out this: Math using CMS fields