Разработка кастомных CMS-коллекций Webflow

Разработка кастомных CMS-коллекций Webflow

Webflow CMS — это структурированное хранилище контента с привязкой к визуальному конструктору. В отличие от WordPress, где структура данных размыта через произвольные поля и мета-боксы, Webflow CMS работает с типизированными коллекциями: каждое поле имеет жёсткий тип, каждая запись — предсказуемую схему. Это даёт чистую разметку и предсказуемое поведение при рендеринге.

Из чего состоит коллекция Webflow

Коллекция — это по сути схема данных плюс набор записей. Для каждой коллекции создаётся:

• Collection Page — шаблон отдельной записи (/blog/{slug}, /team/{slug})
• Collection List — компонент для вывода множества записей на любой странице
• Reference / Multi-Reference — связи между коллекциями

Поддерживаемые типы полей: Plain Text, Rich Text, Image, Video, Link, Email, Phone, Number, Date, Switch (булево), Color, Option (enum), File, Reference, Multi-Reference. Каждый тип имеет свои ограничения — например, Rich Text не поддерживает вложенные компоненты из дизайна.

Типичная задача: блог с авторами и тегами

Collections:
  Blog Posts
    - title: Plain Text (required)
    - slug: Plain Text (auto, unique)
    - body: Rich Text
    - published_at: Date
    - author: Reference → Authors
    - tags: Multi-Reference → Tags
    - featured_image: Image
    - seo_title: Plain Text
    - seo_description: Plain Text

  Authors
    - name: Plain Text
    - photo: Image
    - bio: Rich Text
    - linkedin: Link

  Tags
    - name: Plain Text
    - color: Color

Связь Many-to-Many через Multi-Reference работает только в одну сторону: Post знает свои Tags, но Tag не знает свои Posts напрямую. Для обратной выборки нужно использовать фильтрацию Collection List по Reference поле.

Динамическая фильтрация и сортировка

В нативном Webflow фильтрация Collection List ограничена: можно фильтровать по полям текущей страницы или фиксированным значениям. Для продвинутой фильтрации на стороне клиента используется Finsweet CMS Filter — библиотека с data-атрибутами:

<!-- Фильтр по тегу -->
<div fs-cmsfilter-field="tag">Development</div>

<!-- Collection List с атрибутом -->
<div fs-cmsfilter-element="list">
  <!-- Webflow Collection List items -->
</div>

Finsweet CMS Sort, CMS Load (пагинация через AJAX) — стандартный стек для сложных листингов без написания бэкенда.

Ограничения платформы и обходы

Webflow CMS API

Webflow предоставляет REST API для управления коллекциями. Эндпоинты:

GET  /v2/collections/{collection_id}/items
POST /v2/collections/{collection_id}/items
PATCH /v2/collections/{collection_id}/items/{item_id}
DELETE /v2/collections/{collection_id}/items/{item_id}

Это открывает возможность синхронизации данных из внешних систем: CRM, ERP, PIM. Например, автоматическое обновление каталога товаров из 1С через webhook + Node.js скрипт с Webflow SDK:

import { WebflowClient } from 'webflow-api';

const client = new WebflowClient({ accessToken: process.env.WEBFLOW_TOKEN });

async function syncProduct(product) {
  await client.collections.items.createItem(COLLECTION_ID, {
    fieldData: {
      name: product.title,
      slug: product.sku.toLowerCase(),
      price: product.price,
      'in-stock': product.quantity > 0,
    },
    isDraft: false,
    isArchived: false,
  });
}

Локализация контента

Webflow Localization (с 2023 года) позволяет создавать переведённые версии CMS-записей. Настройка:

1. В Project Settings → Localization добавить локали (например, en, ru, de)
2. Для каждой коллекции включить локализацию нужных полей
3. Переключатель локали управляет видимостью записей

Альтернатива — хранить переводы в отдельных коллекциях с Reference-связью к основной.

Сроки

Простая коллекция (блог, новости) с версталькой шаблонов — 3–5 дней. Многосвязная система (каталог + фильтры + авторы + теги + API-синхронизация) — 2–3 недели. Интеграция с внешним источником данных через API — отдельная оценка от сложности источника.