Розробка користувацьких 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 не підтримує вкладені компоненти з дизайну.
Типична задача: блог з авторами та тегами
Коллекції:
Blog Posts
- title: Plain Text (обов'язкове)
- slug: Plain Text (авто, унікальне)
- 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 фільтрація обмежена: можна фільтрувати за полями поточної сторінки або фіксованими значеннями. Для продвинутої фільтрації на стороні клієнта використовується 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) — стандартний стек для складних листингів без розробки бекенду.
Обмеження платформи та обходи
| Обмеження | Обхід |
|---|---|
| Максимум 20 полів на коллекцію | Розбити на пов'язані коллекції через Reference |
| Немає вкладених коллекцій у Collection List | Використовувати Finsweet Nested Lists |
| 100 елементів у Collection List на сторінку | Finsweet CMS Load з пагінацією |
| Немає умовного рендеринга за Reference | Visibility conditions через Switch-поле |
| Multi-Reference максимум 25 зв'язків | Архітектурне рішення: join-коллекція |
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-записів. Налаштування:
- У Project Settings → Localization додати локалі (наприклад,
en,ru,de) - Для кожної коллекції увімкнути локалізацію потрібних полів
- Перемикач локалі керує видимістю записів
Альтернатива — зберігати переводи в окремих коллекціях з Reference-зв'язком до основної.
Терміни
Проста коллекція (блог, новини) з версткою шаблонів — 3–5 днів. Багатозв'язна система (каталог + фільтри + автори + теги + API-синхронізація) — 2–3 тижні. Інтеграція з зовнішнім джерелом даних через API — окрема оцінка від складності джерела.