Как показать количество объектов CMS коллекции Webflow

Как прокачать проекты использующие CMS коллекций для ведения новостного блога или публикации статей? Пользователям сайта будет удобно ознакомиться количеством контента внутри, понять масштаб содержимого и сделать вывод заранее: либо контент немного и с ним можно быстро ознакомиться, либо наоборот и компания давно занимается публикациями.

Так было сделано на сайте кооператива Koop для учета количества участников, проектов, портфолио, услуг и ресурсов. Это позволяет отслеживать динамику развития компании и заинтересовать пользователя сайта к ознакомлению.

Существует простой способ добавления счетчика объектов внутри CMS коллекции и состоит из 3 шагов:

1. Создаем скрытый список CMS коллекции

1.1. Добавляем CMS коллекцию на страницу проекта

1.2. Внутрь объекта кладем текстовый элемент и присваиваем ему название или любое другую переменную

1.3. Присваиваем класс для объекта коллекции с названием переменной «name», например .name-item

1.4. Присваиваем класс для CMS коллекции с настройкой стиля layout: hidden, например .hide

2. Создаем счетчик количества объектов

Добавляем текстовый элемент с настройками стиля и называем той-же переменной «name», что и класс объекта коллекции, например .name-count

3. Пишем код

Добавляем код в настройках страницы или на весь сайт в Footer code и заменяем 3 переменные нашим «name»: .name-item, .name-count и nameNumber

<script>

nameNumber = $('.name-item').length;
$('.name-count').text(nameNumber);

</script>

Таких счетчиков может быть неограниченное количество и создаются они путем дублирования переменных с названием

Вот и все, думаю эта фишка найдет применение во многих сайтах и окажется полезной для ваших пользователей, удачи на проектах🍀