Junama Azerbaijan — сайт магазина премиальных детских колясок
Трёхъязычный каталог товаров для азербайджанского представительства Junama — польского бренда премиальных колясок. Собран на Next.js App Router и экспортируется полностью статически: каждый из 271 товара превращается в отдельную HTML-страницу на этапе сборки, а сам заказ закрывается не на сайте, а в WhatsApp.
Открыть сайт- Клиент
- Junama Azerbaijan — продавец детских колясок польского бренда Junama в Азербайджане
- Роль
- Frontend-разработка — структура данных о товарах, каталог и страницы товаров, трёхъязычная система контента, поиск, анимации, оптимизация изображений, статическая сборка и деплой.
- Стек
- Next.js · React · Tailwind CSS · Framer Motion
- Дата
- февраль 2026
- Языки
- 3 — AZ / EN / RU
- Страницы
- 276
При таком размере каталога сложность не в количестве товаров, а в их похожести: большая часть из 271 позиции — это та же коляска в другом цвете или в варианте slim. В обычном списке они выглядят как 271 отдельный товар: родитель страницу за страницей видит одну и ту же модель и так и не понимает, что чей цвет. Вторая сложность — в самой продаже: в этом ценовом сегменте никто не кладёт коляску в корзину и не оплачивает её в один клик, доставка, аксессуары и скидка всегда обсуждаются в разговоре. То есть задача сайта — не принять оплату, а начать разговор с уже собранными деталями.
- 271 товар в семи категориях: одиночные коляски, коляски для двойни, автокресла, люльки, аксессуары, игрушки и подарочные карты
- Фильтр по категориям и сортировка по цене или названию в каталоге
- Состояние фильтра и сортировки хранится в самом адресе — по отправленной ссылке открывается тот же список
- Подгрузка по двенадцать товаров кнопкой «показать ещё», со скелетон-карточками во время ожидания
- При возврате из товара восстанавливаются позиция прокрутки и число уже открытых страниц
- Полноэкранное окно поиска — ищет название товара сразу на всех трёх языках
- До пятнадцати изображений на товар: миниатюры и навигация стрелками
- Цветовые варианты одной серии автоматически связываются между собой
- Выбираемые аксессуары и итоговая сумма, которая пересчитывается на лету
- Кнопка WhatsApp — сообщение открывается уже с названием товара, выбранными аксессуарами и итоговой суммой
- Технические характеристики у каждого товара: вес, тип колёс и срок гарантии
- Три языка (AZ / EN / RU) — выбор запоминается в браузере
- Страницы истории бренда, технологии и контактов
Цветовые варианты — отдельные товары, но они знают друг о друге
Каждый цвет живёт на своей странице, потому что покупатель ищет «Junama Diamond S Line чёрная», а не название модели само по себе — если свести варианты на одну страницу, все эти запросы стянутся к одному адресу и начнут конкурировать между собой. Взамен у каждого товара появилось поле серии: при открытии страницы все цвета из той же серии выстраиваются рядом. В итоге поисковая система видит каждый цвет отдельно, а посетитель меняет цвет, не возвращаясь в каталог.
Заказ закрывается в WhatsApp, а не на сайте
Корзину и платёжную интеграцию я не делал: в этом ценовом сегменте продажа всегда идёт через разговор — обсуждаются доставка, наличие, аксессуары и скидка. Вместо этого кнопка на странице товара открывает WhatsApp с уже написанным сообщением: название товара, выбранные аксессуары и итоговая сумма находятся внутри него. Разговор начинается с конкретного товара, а не с «здравствуйте, сколько стоит?», и продавец знает, что смотрел клиент, не спрашивая об этом.
271 страница готовится при сборке, а не при заходе посетителя
Проект работает в режиме статического экспорта: после сборки остаются готовые HTML-файлы, включая 271 страницу товара. Практически это значит, что сайту не нужны ни процесс Node, ни база данных, ни API — он размещается на обычном статическом хостинге, ежемесячной платы за сервер нет, а падать в нём попросту нечему. Плата за это — изменение товара требует пересборки; при частоте обновления этого каталога это не ежедневная проблема.
Сумма с аксессуарами считается до отправки сообщения
Аксессуары можно было оформить списком «свяжитесь с нами», но тогда клиент пишет, не зная итоговой суммы, и первая половина разговора уходит на уточнение цены. Здесь при выборе аксессуара сумма пересчитывается сразу, и именно эта цифра попадает в сообщение WhatsApp. Это не платёжная система, но она отвечает на главный вопрос покупателя — «сколько всё это выйдет вместе» — не заставляя его уходить с сайта.
Состояние каталога хранится в адресе
Выбранная категория и порядок сортировки хранятся не во внутреннем состоянии компонента, а в параметрах самого адреса. Это даёт три вещи: кнопка «назад» в браузере работает ожидаемо, продавец может отправить клиенту прямую ссылку на список «коляски для двойни, от дешёвых к дорогим», и эта ссылка всегда открывает тот же список. Если бы фильтр жил только в памяти, любая отправленная ссылка каждый раз открывала бы список по умолчанию.
Возврат в каталог не должен его обнулять
Самый раздражающий сценарий в каталоге на 271 товар: посетитель долго прокручивает список, заходит в товар, возвращается — и снова оказывается наверху, рядом с первой дюжиной позиций. Поэтому и позиция прокрутки, и число уже загруженных страниц сохраняются на время сессии и восстанавливаются при возврате. Посетитель продолжает с того места, где остановился, то есть проходит каталог до конца, а не бросает его.
Все изображения в WebP, приоритет — только первым карточкам
Сайт колясок — это по сути фотосайт: у каждого товара до пятнадцати изображений. Вся галерея переведена в WebP, а в каталоге с приоритетом грузятся только первые четыре карточки, остальные подтягиваются по мере приближения к экрану. В результате мобильный посетитель, открывая каталог, скачивает несколько изображений со своего экрана, а не фотографии 271 товара.
Три языка на одном адресе — сознательный компромисс
Интерфейс трёхъязычный, но выбор хранится в браузере: отдельного адреса у языка нет. Цена этого в том, что поисковые системы видят сайт на одном языке. В этом проекте компромисс допустим, потому что названия товаров — «Junama Candy Blue Duo» — одинаковы на всех трёх языках, то есть ключевые слова, которые и приносят поисковый трафик, от языка не зависят. Когда текстовый контент станет отдельным каналом привлечения, языки нужно будет разделить на уровне маршрутов — это запланированный следующий шаг.
Сайт опубликован по адресу junama.az. Для каждого из 271 товара на этапе сборки создаётся отдельная статическая страница — со своим заголовком, описанием и картинкой для шеринга; сайту не нужен серверный процесс, поэтому он размещён на обычном статическом хостинге. Измеренные показатели производительности пока не добавлены — появятся здесь, как только будут получены.
- Есть ли на сайте онлайн-оплата?
- Нет, и это сделано намеренно. Кнопка на странице товара открывает WhatsApp с уже готовым сообщением — в нём название товара, выбранные аксессуары и итоговая сумма. В этом ценовом сегменте продажа всё равно закрывается в разговоре, поэтому сайт начинает этот разговор с уже собранными деталями.
- 271 товар не замедляет сайт?
- Нет, потому что ни одна страница не показывает весь каталог. Каталог подгружается по двенадцать товаров, изображения приходят только при приближении к экрану, а каждая страница товара создаётся готовым HTML на этапе сборки — к приходу посетителя вычислять уже нечего.
- На каком хостинге работает сайт?
- На обычном статическом хостинге. Проект собран в режиме статического экспорта: после сборки остаются только HTML, CSS, JavaScript и файлы изображений — ни процесса Node, ни базы данных, ни API не требуется.
- Как найти другие цвета той же коляски?
- У каждого товара есть поле серии. При открытии страницы товара все цвета из той же серии показываются как варианты — возвращаться в каталог не нужно.
- Что нужно, чтобы добавить новый товар?
- Товары хранятся в файле данных проекта: добавляется новая позиция и сайт пересобирается. Админ-панели нет, потому что каталог обновляется сезонно — если потребуется ежедневное редактирование, управление контентом станет отдельным шагом.
- Кто разработал сайт?
- Сайт полностью — структура данных о товарах, каталог и страницы товаров, трёхъязычная система контента, поиск, анимации и деплой — разработан Нурланом Кадировым.
Расскажите о проекте — обычно отвечаю в тот же день.
Nurlan Qadirov — Baku, Azerbaijan