Типичная задача: интернет-магазин на Webflow с каталогом в 500 товаров, каждый товар имеет 15 характеристик, 3 категории, 2 бренда и 5 тегов. Стандартная коллекция упирается в лимит 20 полей, а простые связи не дают гибкой фильтрации. Вместо того чтобы мигрировать на другую платформу, мы проектируем схему из нескольких связанных коллекций и реализуем продвинутую фильтрацию через Finsweet CMS Filter. За 2–3 недели получаем производительный каталог с AJAX-пагинацией и многокритериальным поиском.
Мы разрабатываем кастомные CMS-коллекции Webflow под ключ. Наши инженеры ежедневно решают задачи сложных связей, синхронизации с CRM и обхода ограничений платформы. В этой статье разберём реальные кейсы и технические решения.
Как связать CMS-коллекции между собой?
Связи в Webflow реализуются через поля Reference (один-к-одному) и Multi-Reference (один-ко-многим). Например, в блоге с авторами и тегами:
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 CMS лучше WordPress для структурированного контента?
Webflow CMS быстрее в разработке шаблонов — не нужно верстать отдельно админку и вывод записей. Каждый тип поля жёстко типизирован, что исключает ошибки на уровне данных. В отличие от произвольных полей WordPress, Webflow даёт чистую разметку и предсказуемый рендеринг.
Что делать при превышении лимита полей?
| Ограничение | Обход |
|---|---|
| Максимум 20 полей на коллекцию | Разбить на связанные коллекции через Reference |
| Нет вложенных коллекций в Collection List | Использовать Finsweet Nested Lists |
| 100 элементов в Collection List на странице | Finsweet CMS Load с пагинацией |
| Нет условного рендеринга по Reference | Visibility conditions через Switch-поле |
| Multi-Reference максимум 25 связей | Архитектурное решение: join-коллекция |
Как обеспечить производительность с Core Web Vitals?
Правильная архитектура CMS-коллекций напрямую влияет на LCP и CLS. Избегайте N+1 запросов: при выводе списка записей с Reference-полями Webflow генерирует отдельный запрос для каждой связи. Группируйте данные в одной коллекции, если это возможно, или используйте Finsweet CMS Load для отложенной загрузки связанных элементов. Контролируйте размер изображений через Webflow Image API — это снижает TTFB.
Динамическая фильтрация и сортировка
В нативном 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 скрипт:
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 позволяет создавать переведённые версии CMS-записей. Настройка:
- В Project Settings → Localization добавить локали (например,
en,ru,de) - Для каждой коллекции включить локализацию нужных полей
- Переключатель локали управляет видимостью записей
Альтернатива — хранить переводы в отдельных коллекциях с Reference-связью к основной.
Ориентировочные сроки по типам проектов
| Тип проекта | Сроки | Особенности |
|---|---|---|
| Простой блог | 3–5 дней | 1 коллекция, 5 полей |
| Каталог с фильтрами | 2–3 недели | 3–5 коллекций, Multi-Reference, Finsweet |
| Многоязычный сайт | 3–4 недели | Локализация, переводы |
| Интеграция с CRM | 4–6 недель | API-синхронизация, webhooks |
Что входит в работу
- Проектирование схемы данных коллекций
- Настройка связей (Reference / Multi-Reference)
- Разработка шаблонов Collection Page и Collection List
- Реализация фильтрации и сортировки (встроенная + Finsweet)
- Интеграция с внешними источниками через Webflow API
- Документация по структуре контента
- Обучение команды работе с CMS
- Гарантийная поддержка после сдачи
Сроки и стоимость
Стоимость рассчитывается индивидуально. Наши инженеры имеют сертификацию Webflow и 5+ лет опыта работы с платформой. Гарантируем поддержку после запуска.
Закажите аудит текущей CMS-структуры — мы найдём узкие места и предложим оптимизацию. Свяжитесь с нами для оценки вашего проекта — мы подготовим детальное предложение.