Хімія для кавового обладнання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; публікація ревалідує сторінку
Оптовий каталог, який відповідає на питання покупця на сторінці, а не в листуванні: дозування, склад, сумісність і паспорт безпеки лежать на тому товарі, до якого належать, трьома мовами, і править їх виробник, а не ми.




Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.
Є продукт, який давно час зробити?Розкажіть про нього.
Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.