Show number of items inside each card

Hello Webflow champs, this is my first time in the forum.
I have a collection list of cities and I have a collection list of listings and each city has multiple listings, I want to show the number of listings on the cities card, the listings, and the cards are both on different pages.
I’ll appreciate your help🙂

https://preview.webflow.com/preview/prime-estate?utm_medium=preview_link&utm_source=designer&utm_content=prime-estate&preview=d53b1a2f0e5f2cf97b93d42ef7ea81da&workflow=preview

I tried ChatGPT, but it was asking to set up Node.js

Hi Hadi,

Webflow doesn’t have any way to do counting or math operations natively. The way I typically approach these setups is;

Card display;

  • Create your city cards
  • Create a place to show the listing counts
  • Give it a CMS-bound custom attribute to denote the city slug, e.g. listing-count={{slug}}

Data source;

  • Drop a collection list ( per 100 items ) on the page, each bound to listings
  • Use a CMS bound custom attribute to designate the listing’s city slug, e.g. listing-city={{slug}}
  • This can be hidden

Javascript;

  • Loop through your city cards
  • For each of them, count up the number of items with have the matching city
  • Set that number for display

Thanks! I’ll give it a try

I jst want to say thank you so very much, i just put your solution into ChatGPT and after some trial and error i finally found the working solution. I’ve been searching for this solution for days, but just becuase of you in achieved my goal, YOU ARE A LEGEND!!!

1 Like