Химия для кофейного оборудования2026UA · RU · EN
ONSE
Пятнадцать позиций, шесть категорий, три языка и двенадцать брендов оборудования в фильтре — с дозировкой, составом и паспортом безопасности на той же странице, которую покупатель уже читает.
- Сайт
- Каталог
- CMS
- i18n

- Отрасль
- Химия для кофейного оборудования
- Длительность
- 6 недель
- Команда
- 1 дизайнер · 1 инженер
- Платформы
- Сайт · Каталог продукции · Sanity Studio · Библиотека документов
01
Задача
ONSE производит химию для кофемашин, и её покупатель — не потребитель у полки. Владелец кофейни, сервисный инженер и дистрибьютор в Польше приходят с разными вопросами: сколько стоит короб, не повредит ли это группе Franke, где паспорт безопасности. Ни на один из них фотография банки не отвечает.
Ассортимент к тому же жил в нескольких местах сразу: печатные этикетки, PDF-паспорта, карточки на маркетплейсах и отдельный разговор про private label со своим минимальным заказом. То, что мы делали, должно было стать той версией, которую правит сама компания, а не ещё одной копией, отстающей от остальных.
- Ассортимент
- 15 позиций в шести категориях
- Аудитория
- Кофейни · HoReCa · сервисы · дистрибьюторы
- Рынки
- Украина плюс 25 стран экспорта
02
Решение
Карточка товара — центр сайта. У каждой позиции есть артикул, форма выпуска, дозировка, масса, полный состав, срок годности и условия хранения в виде таблицы — а дальше процедура, разделённая по классам техники, потому что 15 г в суперавтомате и 15 г в холдере — это разные инструкции.
Совместимость — это фильтр, а не абзац. Двенадцать брендов оборудования — Saeco, Thermoplan, WMF, Melitta, Necta, Franke и остальные — выбираются в каталоге и перечислены в каждой карточке с моделями, на которых средство проверяли. Вопрос «подойдёт ли к моей машине» закрыт до того, как кто-то напишет письмо.
На сайте ничего не зашито в код. Товары, категории, документы, совместимость и каждая строка всех трёх языковых версий — документы Sanity, которые правят в Studio, поставляемой вместе с сайтом по адресу /studio. Публикация дёргает вебхук, и страницы, которых коснулось изменение, пересобираются.
- Карточка
- Спека, дозировка, состав, безопасность, FAQ
- Совместимость
- 12 брендов оборудования, фильтром
- Редактирование
- Studio на /studio, ревалидация вебхуком
03
Архитектура
- L0Sanity StudioЕдет вместе с сайтом на /studio
- L1Хранилище контентаТовары, категории, документы, тексты
- L2Вебхук ревалидацииPOST /api/revalidateNext.js App RouterПредсобран, ревалидируется
- L3UA · RU · ENhreflang на каждом URLКаталог и карточки15 позиций, шесть категорийПять форм запросаОпт · образцы · private label
- L4Image CDN Sanitysrcset под каждый брейкпоинтРазметка и sitemapProduct · FAQ · хлебные крошкиПочта отдела продажОтвет в течение рабочего дня
Связи (10)
- Sanity Studio → Хранилище контента · публикация
- Хранилище контента → Вебхук ревалидации · вебхук
- Вебхук ревалидации → Next.js App Router · сброс кеша
- Хранилище контента → Next.js App Router · GROQ
- Next.js App Router → UA · RU · EN
- Next.js App Router → Каталог и карточки
- Next.js App Router → Пять форм запроса
- Next.js App Router → Разметка и sitemap
- Каталог и карточки → Image CDN Sanity
- Пять форм запроса → Почта отдела продаж
04
UX
Три аудитории, три входа, и все три на первом экране: посмотреть продукцию, запросить оптовые цены, получить образцы. Дистрибьютору и владельцу кофейни нужно разное от одного каталога, и ни одному из них не приходится читать чужую страницу, чтобы дойти до своей.
Каталог фильтруется так, как думает покупатель: по категории со счётчиком прямо на чипе, по бренду оборудования, поиском по названию или артикулу, с сортировкой по умолчанию, по новизне и по имени. Бейджи несут то, что иначе повторяет по телефону отдел продаж: хит продаж, популярное, для сервиса.
Сертификация здесь не строчка в подвале. ГСТУ-050:2004 и ГСТУ 3-051:2004 напечатаны на этикетках и продублированы в характеристиках, а страница документов держит восемь паспортов безопасности в одном клике — по одному или одним архивом.
- Входы
- Каталог · опт · образцы
- Фильтры
- Категория · оборудование · поиск · сортировка
- Документы
- 8 паспортов, по одному или архивом
05
UI
Тёмные полосы героя, на них упаковка, снятая на белом, и глубокий винный акцент, который отмечает главное действие и больше ничего. Банка — самое яркое пятно на любой странице, и для ассортимента, который берут коробами, это правильно.
Светлая и тёмная темы обе спроектированы и переключаются из шапки. Таблицы характеристик, строка состава и пошаговые процедуры набраны так, чтобы их читали на расстоянии вытянутой руки над столом в сервисе, а не пролистывали с дивана.
06
Разработка
Next.js App Router, за ним Sanity. Страницы предсобраны и отдаются из кеша; публикация в Studio вызывает вебхук, который сбрасывает ровно то, чего коснулось изменение, — отданная копия отстаёт от хранилища не больше чем на минуту, а правка дозировки перестаёт быть деплоем.
Украинский — основной язык, рядом русский и английский. Каждый URL объявляет свои альтернативы, sitemap несёт все три версии всех 29 страниц, а разметка Product, Organization, хлебных крошек и FAQ отдаётся на каждой странице — именно она выводит ответ про дозировку в выдачу, а не тег title.
Изображения идут с CDN Sanity со srcset под каждый брейкпоинт и подбором формата, поэтому банка на телефоне — не уменьшённый десктопный файл. В каждой форме есть скрытое поле-ловушка для ботов, а /studio и /api закрыты в robots.txt.
07
Что он умеет
Карточки товара
Форма выпуска, дозировка, масса, состав, срок годности и хранение таблицей — с артикулом и количеством в коробе, которые нужны оптовому заказу.
Процедуры по классам техники
Отдельные инструкции для суперавтоматов, домашних машин и профессиональных групп — с профилактической и усиленной дозировкой для каждой.
Совместимость с оборудованием
Двенадцать брендов в фильтре каталога и список в каждой карточке с моделями, на которых средство проверяли.
Фильтры каталога
Чипы категорий с живыми счётчиками, выбор оборудования, поиск по названию или артикулу и три порядка сортировки.
Private label
Процесс из пяти шагов, упаковка от бутылок 250 мл до канистр 20 л и условия прямо на странице: от 500 единиц на позицию, 6–8 недель.
Наборы образцов
Заявка для HoReCa и сервисных центров, чтобы проверить линейку на своём оборудовании до первого оптового заказа.
Библиотека документов
Восемь паспортов безопасности — по одному или одним архивом.
Три языка из одного источника
Украинский, русский и английский правятся как один набор документов, с альтернативами hreflang и sitemap по всем локалям.
08
Интеграции и стек
Интеграции
- Sanity CMS
- Image CDN Sanity
- Rozetka
- Епіцентр
- Telegram
- Viber
Фронтенд
- Next.js
- React
- TypeScript
- Tailwind CSS
Контент
- Sanity
- Встроенная Studio
- GROQ
- Image CDN
Доставка
- Инкрементальная регенерация
- Ревалидация вебхуком
- Микроразметка
- hreflang
09
Чем это закончилось
- 15
- Позиций опубликовано
- 3
- Языков
- 12
- Брендов оборудования
- Sanity
- Контент
Шесть категорий — порошки, таблетки, жидкости, спреи, гранулы
UA · RU · EN — по 29 страниц в каждом
В фильтре и в каждой карточке
Studio на /studio; публикация ревалидирует страницу
Оптовый каталог, который отвечает на вопрос покупателя на странице, а не в переписке: дозировка, состав, совместимость и паспорт безопасности лежат на том товаре, к которому относятся, на трёх языках, и правит их производитель, а не мы.




Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.
Есть продукт, который давно пора сделать?Расскажите о нём.
Опишите, что должно измениться в вашем бизнесе. Мы разберёмся, что для этого действительно нужно — даже если нужно меньше, чем кажется.