Streaming live at 10am (PST)

Dynamic item that counts the number of posts in a collection


#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.


#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 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>

#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


#5

Great to know. Enjoy