Перейти до вмісту
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 на мобільному
Мобільна версія

Кожен продукт ми проєктуємо під телефон окремо, а не звужуємо десктопну версію.

Є продукт, який давно час зробити?Розкажіть про нього.

Опишіть, що має змінитися у вашому бізнесі. Ми розберемось, що для цього справді потрібно — навіть якщо потрібно менше, ніж здається.