Перейти к содержимому
Silka

Химия для кофейного оборудования2026UA · RU · EN

ONSE

Пятнадцать позиций, шесть категорий, три языка и двенадцать брендов оборудования в фильтре — с дозировкой, составом и паспортом безопасности на той же странице, которую покупатель уже читает.

Открыть живой сайт
  • Сайт
  • Каталог
  • CMS
  • i18n
Главная ONSE — профессиональный уход за кофейным оборудованием
Отрасль
Химия для кофейного оборудования
Длительность
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

Архитектура

  1. L0
    Sanity StudioЕдет вместе с сайтом на /studio
  2. L1
    Хранилище контентаТовары, категории, документы, тексты
  3. L2
    Вебхук ревалидацииPOST /api/revalidate
    Next.js App RouterПредсобран, ревалидируется
  4. L3
    UA · RU · ENhreflang на каждом URL
    Каталог и карточки15 позиций, шесть категорий
    Пять форм запросаОпт · образцы · private label
  5. L4
    Image 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
  • Пять форм запроса Почта отдела продаж
Одно хранилище контента за тремя языковыми версиями. Сайт предсобран и отдаётся из кеша; сбрасывает его публикация в Studio — чтобы поменять дозировку, никто не выкатывает деплой.

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
Языков

UA · RU · EN — по 29 страниц в каждом

12
Брендов оборудования

В фильтре и в каждой карточке

Sanity
Контент

Studio на /studio; публикация ревалидирует страницу

Оптовый каталог, который отвечает на вопрос покупателя на странице, а не в переписке: дозировка, состав, совместимость и паспорт безопасности лежат на том товаре, к которому относятся, на трёх языках, и правит их производитель, а не мы.

Каталог ONSE с чипами категорий, фильтром оборудования и сортировкой
Каталог с фильтрами
Карточка ONSE Coffee Cleaner 900 г с артикулом, формой выпуска и дозировкой
Карточка товара
Страница private label ONSE с предложением производства и его условиями
Private label
ONSE на мобильном
Мобильная версия

Каждый продукт проектируется под телефон как отдельный опыт, а не как суженный десктоп.

Есть продукт, который давно пора сделать?Расскажите о нём.

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