GuardLabs
demo / webflow-cms-filter
Webflow · CMS Collection List

Фильтр, поиск и сортировка Collection List без перезагрузки страницы

Collection List в Webflow отлично выводит записи CMS, но живой фильтрации на стороне посетителя у него нет: клик по категории в нативном варианте ведёт на другую страницу. Ниже рабочая связка на data-атрибутах, которая фильтрует, ищет и сортирует прямо в браузере.

Боль

Где Collection List упирается в потолок

Что просят клиенты

  • Каталог работ или товаров с кнопками категорий, живым поиском и сортировкой.
  • Счётчик «показано N из M» и внятное пустое состояние.
  • Всё мгновенно, без перехода на отдельную страницу категории.

Что даёт Webflow из коробки

  • Фильтры Collection List задаются в Designer и фиксируются на публикации.
  • Посетитель менять выборку не может: только переходы между страницами.
  • Стандартный обход: атрибутный скрипт в Page Settings, класс решений, известный по библиотеке Finsweet Attributes. Ниже наша компактная реализация того же паттерна.

Живой артефакт

Каталог на разметке Collection List

Разметка карточек повторяет вывод Webflow: контейнер w-dyn-list, элементы w-dyn-item. Скрипт не знает о содержимом заранее, он читает data-атрибуты, как читал бы поля CMS.

показано 12 из 12
лендинг

Silence Audio

запуск 14.05.2026
магазин

Kava Market

запуск 02.06.2026
портфолио

Atelier Nord

запуск 21.03.2026
блог

Field Notes

запуск 09.04.2026
лендинг

Deep Focus

запуск 30.01.2026
магазин

Bloom Store

запуск 17.02.2026
портфолио

Studio Klar

запуск 25.06.2026
блог

Morning Brief

запуск 05.05.2026
лендинг

Nova Clinic

запуск 01.07.2026
магазин

Craft Supply

запуск 08.03.2026
портфолио

Habitat 7

запуск 12.01.2026
блог

Open Kitchen

запуск 18.06.2026
Ничего не нашлось. Сбросьте поиск или выберите другую категорию.

Решение

Как это встаёт в реальный Webflow-проект

Со стороны Designer

  1. На элементы Collection Item навесить custom attributes: data-glf-cat, data-glf-name, data-glf-date. Значения привязать к полям CMS через выпадашку поля.
  2. Кнопкам категорий задать data-glf-filter со слагом категории.
  3. Поиску и селекту сортировки: data-glf-search и data-glf-sort.

Со стороны кода

  1. Скрипт кладётся в Page Settings, поле Before body tag.
  2. Никаких библиотек: чистый JS около 60 строк, работает с любым числом карточек.
  3. Тот же паттерн масштабируется в пагинацию и комбинированные фильтры.

Ядро скрипта (фрагмент)

var items = Array.from(document.querySelectorAll('[data-glf-list] .w-dyn-item'));
function apply() {
  var visible = items.filter(function (el) {
    var okCat = cat === 'all' || el.getAttribute('data-glf-cat') === cat;
    var okText = el.getAttribute('data-glf-name').toLowerCase().indexOf(q) > -1;
    return okCat && okText;
  });
  visible.sort(byMode(sortMode)).forEach(function (el) { el.parentNode.appendChild(el); });
  items.forEach(function (el) { el.style.display = visible.indexOf(el) > -1 ? '' : 'none'; });
  counter.textContent = 'показано ' + visible.length + ' из ' + items.length;
}

Полный скрипт: view-source этой страницы, блок между маркерами GLF-FILTER-START и GLF-FILTER-END. Он же без изменений вставляется в Page Settings реального проекта.

Как проверить

Проверка за две минуты

  1. Нажмите «Магазины»: остаются три карточки, счётчик меняется, страница не перезагружается.
  2. Введите в поиск «kava»: выборка сузится до одной карточки, регистр не важен.
  3. Выберите «Сначала новые»: карточки пересортируются по дате запуска.
  4. Введите бессмысленный запрос: появится честное пустое состояние вместо белого экрана.
  5. Откройте DevTools: разметка карточек действительно w-dyn-list и w-dyn-item, как в выводе Webflow CMS.