
АРТ КОРМУШКА
- КЛИЕНТ
- Арт КормушкаИнтернет-магазин2026
- УСЛУГИ
- UX/UI-дизайнFrontend-разработкаBackend-разработкаИнтеграцииСерверная инфраструктура
ЦЕЛЬ ПРОЕКТА
Создать интернет-магазин, в котором покупатель быстро находит товар, видит стоимость и дату доставки, безопасно оплачивает и отслеживает заказ. Для бизнеса — автоматизировать продажи, доставку, оплату и работу с повторными покупками.
Весь цифровой продукт мы создали под ключ: спроектировали пользовательский опыт и визуальную систему, разработали клиентскую и серверную части, настроили инфраструктуру, интегрировали системы доставки и оплаты и реализовали собственную бонусную систему.
ВИЗУАЛЬНАЯ СИСТЕМА
ЦВЕТА
(01)Палитру подбирали так, чтобы сохранить ощущение близости к природе и одновременно сделать каталог удобным для просмотра. Молочный выбрали вместо чистого белого — он создаёт более тёплый фон и не спорит с фотографиями товаров. Графитовый даёт выразительный, но не резкий контраст и обеспечивает хорошую читаемость. Оливковый поддерживает природный характер бренда и направляет внимание на ключевые действия, а светлый шалфей помогает выстроить визуальную иерархию без лишнего шума.
Молочный
- RGB
- 253, 250, 244
- HEX
- #FDFAF4
Графитовый
- RGB
- 45, 45, 45
- HEX
- #2D2D2D
Оливковый
- RGB
- 92, 105, 61
- HEX
- #5C693D
Светлый шалфей
- RGB
- 220, 230, 197
- HEX
- #DCE6C5
ТИПОГРАФИКА
(02)Raleway формирует основной визуальный голос магазина: от крупных заголовков до навигации и основного текста. Разные начертания гарнитуры создают понятную иерархию и сохраняют единый характер интерфейса.
Аа Бб Вв Гг 0123456789
- Display61 px
- Заголовок страницы49 px
- Заголовок раздела31 px
- Крупный текст18 px
- Основной текст16 px
- Подписи13 px
ПОКУПАТЕЛЬСКИЙ ПУТЬ
Каталог и товары
Каталог должен был работать не как длинная витрина, а как инструмент осознанного выбора. У изделий много различий, которые сложно оценить только по фотографии, поэтому мы выстроили путь от общего ассортимента к конкретной модели вокруг понятных покупателю параметров.
Что требовалось решить
Фильтры под реальный ассортимент
Готовые системы фильтрации для этой задачи не подходили: они не учитывали специфику ассортимента и то, как покупатели на самом деле выбирают изделия. Сначала требовалось разобрать товары и определить характеристики, которые действительно влияют на решение: вид кормушки, тип крепления, цвет, материал, размер и другие параметры.
Характеристики как основа выбора
Для каждого товара задали значения этих характеристик. На них работает фильтрация, и они же отображаются в карточке — покупатель получает только подходящие изделия и может сразу сравнить их по одинаковым параметрам.
Наша реализация
Индивидуальная система фильтрации
Мы разработали единую систему характеристик товаров специально под ассортимент «Арт-Кормушки». Часть параметров используется для подбора: вид изделия, тип крепления, материал, цвет и другие критерии, по которым покупатель действительно может сузить каталог.
Исследование: категорийные фильтры
При проектировании мы использовали выводы отраслевых UX-исследований как основу для гипотез, а конкретные решения адаптировали под ассортимент и сценарии покупателей «Арт-Кормушки». Baymard отмечает, что универсальных фильтров недостаточно: важные критерии зависят от конкретной категории. Рекомендации Baymard по фильтрам
Пользователи также ожидают, что по характеристикам из товарной выдачи можно сузить каталог. По данным Baymard, 38% исследованных магазинов не предоставляли фильтры для части уже показанных свойств. В проекте параметры подбора используют одни и те же данные в фильтрах и в представлении товара. Исследование Baymard
Характеристики в карточке товара
На странице товара характеристики собраны в понятный список. Сначала покупатель видит параметры, по которым выбирал изделие в каталоге: например, вид кормушки, способ крепления, материал и цвет. Названия и значения совпадают с фильтрами, поэтому после перехода не приходится заново понимать, что именно было выбрано.
Рядом показываются свойства конкретной модели, которые важны для покупки, но не нужны как общие фильтры для всего каталога: точные размеры, вес, вместимость, комплектация и особенности установки. Так фильтрация остаётся компактной, а карточка товара даёт полную информацию об изделии в удобном для просмотра виде.
Управление каталогом без разработчика
Ту же систему характеристик использует административная часть магазина. При добавлении товара сотрудник выбирает категорию, заполняет предусмотренные для неё параметры, добавляет описание, фотографии, варианты, цену и наличие. После публикации данные автоматически появляются в карточке и подключаются к соответствующим фильтрам.
Для изменения названия, характеристик, категории или состава товара не нужно редактировать код и обращаться к разработчику. Новые изделия добавляются по уже подготовленной структуре, поэтому каталог остаётся единообразным даже при расширении ассортимента.
Быстрое добавление в корзину
Если покупатель уже определился с моделью, информации в каталоге достаточно и товар не требует выбора обязательных параметров, его можно добавить в корзину непосредственно из каталога — без перехода к карточке товара. Для более внимательного выбора остаётся подробная страница товара.
Исследование: действия в карточке
Baymard отмечает, что карточка с несколькими действиями сложнее обычной ссылки на товар. Поэтому быстрое добавление оформлено как отдельный понятный сценарий для уже выбранной модели и не заменяет переход к фотографиям, характеристикам и подробному описанию. Исследование интерактивных карточек
Результат
Понятный путь выбора
Покупатель может сузить ассортимент по значимым критериям, а затем увидеть в карточке и знакомые параметры из фильтров, и подробные свойства конкретной модели: размеры, вес, вместимость, комплектацию и особенности установки. Если информации в каталоге уже достаточно, товар добавляется в корзину без обязательного перехода на отдельную страницу.
Управляемый каталог для бизнеса
Единая структура товарных данных одновременно управляет фильтрацией и содержанием карточек. Сотрудник магазина может самостоятельно добавлять товары и категории, изменять характеристики, фотографии, варианты, цены и наличие через административную часть — без редактирования кода. Новые изделия сразу встраиваются в существующую логику каталога и сохраняют единый формат представления.
Ключевые решения
- (01)Собственная модель характеристик вместо готового набора фильтров
- (02)Фильтрация по виду изделия, типу крепления, цвету и другим значимым параметрам
- (03)Связанные параметры в фильтрах и карточке товара
- (04)Подробные характеристики каждой модели в удобном виде
- (05)Самостоятельное управление товарами и категориями без изменения кода
- (06)Цена и добавление в корзину прямо из каталога
Desktop & Mobile
Каталог с категориями


Поиск по каталогу


Фильтрация товаров


Карточка товара




Характеристики товара


Desktop
1920pxКаталог с категориями

Поиск по каталогу

Фильтрация товаров

Карточка товара

Характеристики товара

Mobile
375pxКаталог с категориями

Фильтрация товаров

Характеристики товара

Поиск по каталогу

Карточка товара



Поиск по каталогу
Поиск стал вторым способом работы с ассортиментом. Если каталог помогает постепенно сузить выбор фильтрами, то поиск позволяет сразу перейти к подходящему изделию, когда покупатель уже знает название, категорию, артикул или нужную характеристику.
Что требовалось решить
Найти товар без точного названия
Покупатель не всегда знает название модели. Он может ввести «деревянная кормушка на окно», название коллекции, цвет или артикул. Поэтому поиск должен учитывать не одно поле, а название товара и его варианта, описание, категорию, коллекцию, артикул и значения характеристик.
Показать нужный вариант и актуальную цену
Если запрос относится к конкретному цвету или исполнению, в результате должна появиться соответствующая фотография, а карточка — открыться сразу с выбранным вариантом. При этом цена, наличие и возможность покупки должны проверяться по текущим данным магазина. Поисковый индекс отвечает только за совпадения и их порядок, но не заменяет каталог как источник коммерческой информации.
Наша реализация
Отдельный поисковый контур
Поиск построили на базе Meilisearch. Он работает отдельным техническим контуром: товары Medusa → нормализация данных → индекс Meilisearch → серверный интерфейс поиска → предпросмотр в шапке и полная страница результатов. Браузер не перебирает загруженный каталог и не обращается к поисковому серверу напрямую.
В индекс передаются название товара и конкретного варианта, описание, категории, теги, коллекция, тип изделия, артикулы SKU, значения характеристик, адрес страницы и изображение. Поля расположены по приоритету: название влияет на порядок сильнее описания и технического адреса, поэтому более осмысленные совпадения поднимаются выше.
Быстрые результаты в шапке
Во время ввода в шапке появляются подходящие товары с фотографиями и категориями. Результаты всегда соответствуют текущему запросу; для загрузки, ошибки и пустой выдачи предусмотрены отдельные состояния.
Варианты без повторяющихся карточек
Визуально одинаковые варианты объединяются в один результат. Если цвет или исполнение меняют внешний вид, вариант показывается отдельно со своей фотографией, а карточка открывается сразу в выбранном исполнении.
Поиск с учётом опечаток
Небольшая ошибка в запросе не приводит к пустой выдаче: поиск продолжает показывать близкие совпадения.
Устойчивость к опечаткам
По данным Baymard, 69% исследованных сайтов не показывали релевантные подсказки при близких опечатках. Поэтому возможность найти товар даже с одной неверной буквой заложили в поисковый механизм. Исследование Baymard
Полная страница результатов
По Enter или кнопке «Показать все результаты» открывается отдельная страница с количеством найденных товаров и пагинацией. Поиск определяет подходящие позиции и их порядок, а актуальные цены, наличие и варианты загружаются из основной системы магазина.
Автоматическое обновление и защита выдачи
Индекс реагирует на три события каталога: создание, изменение и удаление товара. При обновлении сначала удаляются прежние документы модели, а затем загружаются новые. Поэтому после изменения количества или состава вариантов в выдаче не остаются старые результаты.
Для обслуживания предусмотрена полная переиндексация каталога пакетами и отдельная административная команда запуска. Система ожидает завершения асинхронных задач Meilisearch и обрабатывает неудачные или зависшие операции, а не считает отправку данных гарантией успешного обновления.
Административный ключ Meilisearch остаётся на сервере: браузер получает результаты только через внутренний интерфейс поиска.
Результат
Для покупателя
Нужное изделие можно найти по названию, категории, артикулу или характеристике, увидеть подходящий вариант уже в шапке и при необходимости перейти к полной выдаче. Поиск устойчив к небольшим опечаткам и не перегружает результаты одинаковыми карточками.
Для магазина
Поисковый индекс обновляется вместе с каталогом, но актуальные цены, наличие и возможность покупки всегда проверяются по основной системе. Магазин получает быстрый поиск, не рискуя показать черновик, устаревший вариант или цену из поисковой копии.
Ключевые решения
- (01)Отдельный поисковый индекс Meilisearch
- (02)Поиск по названию, категории, артикулу и характеристикам
- (03)Живой предпросмотр результатов в шапке
- (04)Устойчивость к небольшим опечаткам
- (05)Отдельные результаты для визуально разных вариантов
- (06)Полная страница поиска с количеством результатов и пагинацией
- (07)Актуальные цены и наличие из основной системы магазина
- (08)Автоматическое обновление индекса и защита черновиков
Оформление и оплата
Целью было сделать оформление простым и предсказуемым: сократить объём ручного ввода, сохранить понятную последовательность действий и зафиксировать итоговую стоимость перед переходом к оплате. Для авторизованного покупателя этот путь становится короче благодаря данным и адресам из личного кабинета.
Что требовалось решить
Один понятный путь без повторного заполнения
Оформление связывает контактные данные, адрес, доставку, бонусы, оплату и создание заказа. Покупатель не должен разбираться в этой внутренней логике — ему нужен короткий путь без повторного ввода информации и неожиданных изменений суммы.
Для постоянного клиента особенно важно было убрать рутину. Если имя, телефон, электронная почта и адрес уже сохранены в профиле, магазин должен использовать их автоматически, а не заставлять человека заполнять те же поля при каждой покупке.
Наша реализация
Последовательное оформление
Оформление построили как последовательность Контакты → Доставка → Оплата → Подтверждение заказа. Гость вводит имя, телефон и электронную почту и подтверждает согласие на обработку данных. У авторизованного покупателя контакты подставляются из профиля, а сохранённый адрес можно сразу использовать для нового заказа.
Сервер нормализует контакты и записывает платёжный и доставочный адрес в корзину. Следующие этапы используют согласованный набор данных без повторного заполнения и расхождений.
Исследования оформления
По данным Baymard, 17% опрошенных пользователей отказывались от покупки из-за слишком длинного или сложного оформления. При этом на воспринимаемую сложность сильнее влияет количество полей и действий, чем число отдельных шагов. Исследование Baymard
Принцип Redundant Entry в WCAG 2.2 рекомендует не запрашивать повторно уже введённые сведения: их следует подставлять автоматически или давать выбрать из сохранённых вариантов. WCAG 2.2
Проверка бонусов и итоговой суммы
Перед оплатой авторизованный покупатель может применить бонусы. Сервер проверяет владельца корзины, доступный размер списания и связь бонусной резервации с конкретной платёжной сессией.
Затем система заново рассчитывает стоимость товаров и доставки, скидки и бонусы и фиксирует сумму счёта. Если после этого состав корзины меняется, прежняя платёжная ссылка становится недействительной, а для актуальной суммы создаётся новый счёт.
Почему выбрали Robokassa
Для российского интернет-магазина требовалось платёжное решение с поддержкой банковских карт и СБП, расчётов в рублях, фискальных чеков, возвратов через API, тестового режима и подписанного серверного подтверждения операций. Модуль оплаты Robokassa соответствовал этим требованиям и позволял собрать связанные процессы в одном платёжном контуре.
Возможности платёжного модуля
Официальная документация Robokassa подтверждает поддержку банковских карт и СБП, серверного уведомления о результате, фискализации и возвратов через API. Эти возможности стали технической основой реализованного сценария. Начало работы Фискализация Возвраты
Безопасность оплаты
Реквизиты банковской карты вводятся в официальной форме Robokassa и не сохраняются магазином. Оплата подтверждается только по подписанному серверному уведомлению после проверки счёта, суммы и связи с заказом. Повторное уведомление не создаёт второй заказ и не проводит платёж повторно.
Результат
Для покупателя
Покупатель получает последовательное оформление с минимальным повторным вводом, сохранёнными адресами и понятным выбором между банковской картой и СБП. Если платёж завершился ошибкой, попытку можно безопасно повторить без повторного прохождения всех этапов.
Для магазина
Корзина, бонусы, доставка, платёж, заказ и кассовые документы связаны единым серверным сценарием. Повторные уведомления не создают дубликаты, устаревшая платёжная ссылка перестаёт действовать после изменения корзины, неоплаченные заказы автоматически отменяются, а возвраты выполняются через официальный API Robokassa.
Ключевые решения
- (01)Автозаполнение контактов и сохранённых адресов из личного кабинета
- (02)Последовательный путь от контактов к доставке и оплате
- (03)Серверная проверка корзины, доставки, скидок и бонусов
- (04)Оплата банковской картой и через СБП в Robokassa
- (05)Безопасная повторная попытка после ошибки оплаты
- (06)Фискальные чеки, автоматическая отмена и возвраты через API
Desktop & Mobile
Корзина и итоговая стоимость


Контактные данные и согласие


Оплата картой или через СБП


Desktop
1920pxКорзина и итоговая стоимость

Контактные данные и согласие

Оплата картой или через СБП

Mobile
375pxКорзина и итоговая стоимость

Оплата картой или через СБП

Контактные данные и согласие

Payment Flow
Выбор способа оплаты


Оплата картой или через СБП


Система доставки
Доставку сделали частью выбора товара, а не последним неизвестным шагом оформления. Система заранее определяет город и динамически рассчитывает стоимость и срок уже в карточке товара. Покупатель сразу понимает, когда сможет получить изделие, а при изменении города видит новый расчёт. Для экспресс-доставки интерфейс показывает динамический срок по данным Яндекса с добавленным временем на подготовку заказа.
Во время оформления система проверяет точность адреса, показывает доступные способы доставки и выполняет окончательный расчёт с учётом выбранного адреса и состава корзины. После передачи заказа Яндексу его статус и ссылка для отслеживания появляются в личном кабинете.
Что требовалось решить
Доставка без неизвестной цены и ошибок в адресе
Нужно было связать четыре разных сценария: получение в ПВЗ или постамате, обычную курьерскую доставку, экспресс в день заказа и грузовую доставку для крупных изделий. Для каждого варианта действуют свои условия, стоимость и сроки, поэтому одной таблицы с фиксированными ценами было недостаточно.
Покупателю важно увидеть предварительные условия ещё при выборе товара, а перед оплатой получить точный итог. Магазину, в свою очередь, нужен проверенный адрес с конкретным домом и координатами: ошибка на этом этапе приводит к перерасчёту, звонкам менеджера или несостоявшейся доставке.
Наша реализация
Почему выбрали Яндекс Доставку
Яндекс Доставку выбрали потому, что она закрывает разные способы доставки в одной интеграции. Через одного партнёра магазин получил ПВЗ и постаматы, курьерскую доставку в другой день, экспресс в день заказа и грузовой тариф. API Яндекса возвращает актуальные стоимость и сроки, статусы заказа и ссылку для отслеживания — эти данные не приходится собирать из нескольких разрозненных сервисов.
Самовывоз или курьером
Для покупателя это знакомый сценарий. В режиме «Самовывоз» он открывает интерактивную карту Яндекса и выбирает удобный ПВЗ или постамат. В корзине сохраняются выбранная точка, её адрес, тип и рассчитанный срок. Если карта временно не загрузилась, система может показать резервный список ПВЗ. В режиме «Курьером» используется отдельный проверенный адрес, поэтому данные самовывоза и курьерской доставки не смешиваются при переключении.
Официальный виджет ПВЗ
Официальный виджет Яндекс Доставки позволяет выбирать ПВЗ и постаматы на карте и передаёт магазину идентификатор, адрес и координаты выбранной точки. Магазин получает проверенные данные непосредственно от логистического провайдера и не поддерживает список точек вручную. Документация виджета Яндекс Доставки
Как определяется город
Сначала магазин проверяет сохранённый адрес авторизованного покупателя. Если его нет, используется город, который человек уже подтвердил сам. Определение по IP включается только как запасной вариант и предлагает приблизительный город — пользователь всё равно должен подтвердить его или выбрать другой. В браузере сохраняется только название подтверждённого города, без IP и координат.
Как подтверждается курьерский адрес
Покупатель вводит адрес в одном поле — «Город, улица, дом» — и выбирает подходящий дом из подсказок Яндекс Геосаджеста. Произвольно напечатанный текст не считается подтверждённым адресом. Если после выбора изменить строку вручную, подтверждение сбрасывается и дом нужно выбрать заново.
Вместе с выбранной подсказкой система получает идентификатор адресного объекта Яндекса. Координаты из браузера не используются как доверенные данные.
Ввод адреса с подсказками
В тестах Baymard 9% адресов, введённых вручную, содержали опечатки. Поэтому Геосаджест сокращает объём ручного ввода, а Геокодер проверяет конкретный дом до оплаты. Исследование автоматического поиска адреса
Проверка адреса на сервере
Перед расчётом доставки сервер самостоятельно передаёт идентификатор в Яндекс Геокодер. Адрес принимается только в том случае, если Яндекс подтверждает конкретный дом, точное совпадение, город, улицу, номер дома и корректные координаты. После проверки магазин получает единый нормализованный адрес, индекс, долготу и широту.
Так надёжность адреса не зависит от скрытых полей браузера: даже если их изменить вручную, сервер заново получит данные непосредственно от Яндекса. Ключи Геосаджеста и Геокодера остаются на сервере.
Проверка по данным Яндекса
Яндекс Геокодер позволяет получить нормализованный адрес и координаты по идентификатору объекта. В проекте эти данные запрашивает сам сервер перед расчётом доставки. Яндекс Геокодер
Расчёт от карточки товара до отслеживания
Первый расчёт выполняется ещё в карточке товара. Для самовывоза сервер находит реальную подходящую точку и запрашивает тариф, а для экспресса использует точный сохранённый адрес. Эти варианты рассчитываются независимо: если один сервис временно не ответил, другой результат всё равно можно показать. При смене города расчёт обновляется.
Исследование: стоимость и срок до корзины
В исследовании Baymard 64% участников искали стоимость доставки уже на карточке товара. Поэтому предварительный расчёт разместили рядом с покупкой, чтобы человеку не приходилось добавлять изделие в корзину только ради итоговой цены. Исследование Baymard
Baymard также рекомендует показывать ожидаемую дату или понятный срок для каждого способа доставки. В проекте срок виден в карточке товара и рядом с доступными вариантами. Исследование о сроках доставки
Во время оформления заказа система считает доставку повторно — уже по выбранному адресу и фактическому составу корзины. Доставку в пункты выдачи сделали бесплатной для покупателя. При этом система получает фактический тариф Яндекс Доставки и сохраняет его для внутреннего учёта, поэтому магазин видит реальную себестоимость логистики, даже если в заказе для клиента указано 0 ₽. Курьерская доставка в другой день внутри МКАД стоит 449 ₽, за его пределами используется тариф Яндекса, а экспресс и грузовая доставка всегда рассчитываются по актуальному предложению. К сроку перевозчика добавляется время на подготовку заказа: для экспресса — минуты, для плановой доставки и ПВЗ — дополнительный день.
Создание отправления после сборки
После успешной оплаты сервер создаёт заказ, переносит в него выбранный способ доставки, точный адрес или ПВЗ, координаты, рассчитанную стоимость и срок. Оплаченный заказ поступает в очередь сборки и остаётся на этапе «Собираем заказ»: заявка в Яндекс Доставке в этот момент ещё не создаётся.
Когда менеджер подтверждает сборку и создаёт штатное отправление Medusa, сервер передаёт уже проверенные данные в Яндекс Доставку, сохраняет номер заявки и получает официальную ссылку для отслеживания. Менеджеру не нужно повторно переносить адрес или рассчитывать тариф, но подтверждение сборки остаётся обязательной границей перед передачей заказа перевозчику.
Статусы и отслеживание
После передачи фоновая синхронизация регулярно получает статусы Яндекса: заказ собирается, собран, передан перевозчику или доставлен. Вместе со статусом в личный кабинет попадает официальная ссылка для отслеживания, при этом внутренние ответы службы доставки и технические данные покупателю не раскрываются.
Отслеживание заказа
В исследовании Baymard 50% респондентов назвали отслеживание самой важной возможностью личного кабинета. В проекте покупатель видит понятный статус заказа и официальную ссылку Яндекс Доставки без обращения к менеджеру. Исследование Baymard об отслеживании
Результат
Понятная доставка для покупателя и управляемый процесс для магазина
Покупатель видит стоимость и срок не в самом конце оформления, а уже во время выбора товара. Город определяется заранее, адрес вводится одной строкой и подтверждается подсказкой, ПВЗ выбирается на знакомой карте. После отправки не нужно уточнять состояние заказа у менеджера — актуальный статус и ссылка для отслеживания доступны в личном кабинете.
Для магазина это единый управляемый процесс от ввода адреса до завершения доставки. После подтверждения оплаты сервер получает проверенные координаты, запрашивает актуальный тариф и создаёт заказ. Когда менеджер подтверждает сборку и создаёт отправление Medusa, система передаёт данные Яндексу и затем синхронизирует статусы. Использование сервисов одного поставщика уменьшило количество разрозненных интеграций, ручных действий, ошибок в адресах и несостоявшихся доставок.
Ключевые решения
- (01)ПВЗ, постаматы, курьерская, экспресс- и грузовая доставка через одного партнёра
- (02)Предварительный срок и доступность доставки уже в карточке товара
- (03)Определение города с обязательной возможностью подтвердить или изменить его
- (04)Яндекс Геосаджест для быстрого ввода адреса одной строкой
- (05)Серверная проверка точного дома и координат через Яндекс Геокодер
- (06)Официальный виджет выбора ПВЗ с резервным списком при сбое
- (07)Динамический расчёт тарифа вместо статичных цен
- (08)Создание заявки на доставку после подтверждения сборки
- (09)Синхронизация статусов и ссылки для отслеживания без участия менеджера
Desktop & Mobile
Дата доставки в карточке товара


Ввод адреса с подсказками геокодера


Доступные способы доставки


Выбор пункта выдачи на карте


Desktop
1920pxДата доставки в карточке товара

Ввод адреса с подсказками геокодера

Доступные способы доставки

Выбор пункта выдачи на карте

Mobile
375pxДата доставки в карточке товара

Доступные способы доставки

Ввод адреса с подсказками геокодера

Выбор пункта выдачи на карте

Заказы и личный кабинет
Личный кабинет создавали, чтобы покупателю было легко и наглядно следить за заказами и управлять ими. В одном месте можно проверить текущий этап, срок и адрес доставки, открыть историю, повторить или отменить заказ. Здесь же сохраняются и редактируются личные данные и адреса, которые затем автоматически подставляются при следующих покупках.
Что требовалось решить
Всё о заказе — в одном понятном интерфейсе
Покупателю не должно быть нужно разбираться, где искать сведения об оплате, сборке и доставке. Кабинет должен сразу отвечать на главные вопросы: что сейчас происходит с заказом, когда он будет доставлен и какие действия ещё доступны.
Не менее важно было сделать удобными следующие покупки. Контактные данные и проверенные адреса можно сохранить, изменить и повторно использовать при оформлении, не заполняя одни и те же поля заново.
Наша реализация
Вход и структура кабинета
Покупатель может войти по электронной почте и паролю или использовать Яндекс ID. После входа доступны главная страница кабинета, заказы, профиль, сохранённые адреса и бонусы. На мобильных устройствах навигация адаптируется под небольшой экран, а активный раздел остаётся явно обозначенным.
Главная страница работает как сводка: показывает активные заказы, текущий статус, ожидаемую дату и адрес доставки, сохранённые адреса и состояние профиля. Если заказов пока нет или часть данных не заполнена, интерфейс не оставляет пустой экран, а предлагает понятное следующее действие — перейти в каталог, добавить адрес или дополнить профиль.
Кабинет как отправная точка
В исследовании Baymard 52% участников использовали главную страницу кабинета для перехода к нужным функциям. Поэтому в сводке собрали реальные сценарии магазина — заказы, профиль, адреса и бонусы — без пустых разделов, которыми покупатель не может воспользоваться. Исследование Baymard
Профиль и адресная книга
В профиле покупатель может просматривать и редактировать имя, фамилию, электронную почту и телефон. Отдельная адресная книга объединяет точные адреса курьерской доставки и выбранные пункты выдачи Яндекса. Для курьерского адреса сохраняется проверенный дом с координатами, а для пункта выдачи — идентификатор, название, адрес, тип точки и оператор.
Можно хранить несколько адресов, выбрать основной и использовать сохранённые контакты и адрес при следующем оформлении. Система подставляет их автоматически, нормализует данные и защищает адресную книгу от дубликатов. При необходимости сведения можно изменить в кабинете до новой покупки.
Без повторного ввода
WCAG 2.2 рекомендует автоматически подставлять ранее введённые сведения или давать выбрать их из сохранённых вариантов. Адресная книга реализует этот принцип и уменьшает объём повторного ввода при следующих покупках. WCAG 2.2: Redundant Entry
Заказы: от сводки к подробной истории
Заказы расположены от новых к старым. Уже в списке видны номер, дата, текущий статус, способ и адрес доставки, ожидаемый срок, состав покупки и итоговая сумма. Из списка можно открыть подробную страницу заказа или повторить покупку.
На подробной странице информация разделена по смыслу. Покупатель видит товары и стоимость, состояние оплаты и отдельный путь доставки: Оформлен → Оплачен → Собираем → Передан в доставку → В пути → Доставлен. Рядом показываются ожидаемая дата, перевозчик, трек-номер, история событий с реальным временем и официальная ссылка Яндекс Доставки.
Активные заказы обновляются автоматически, пока страница открыта. После завершения доставки фоновые проверки прекращаются. Покупателю не нужно перезагружать страницу вручную, а завершённые заказы не создают лишних запросов.
Понятное отслеживание
По данным Baymard, 50% респондентов назвали отслеживание самой важной возможностью личного кабинета, а 67% исследованных сайтов не показывали все ключевые сведения последовательно. В проекте статус, ожидаемая дата, перевозчик, трек-номер, история и состав заказа доступны в кабинете, а подробный маршрут открывается у Яндекса. Исследование Baymard
Единое состояние заказа
Техническая сложность личного кабинета заключалась в синхронизации трёх систем: Medusa хранит заказ и товары, Robokassa подтверждает оплату и возвраты, а Яндекс Доставка передаёт логистические статусы. Поверх них мы построили единую модель состояния заказа, которая превращает разрозненные события в понятную последовательность — от оформления и оплаты до доставки, отмены или возврата.
Кабинет показывает покупателю только понятные этапы, даты и доступные действия. Перед повтором, отменой или возвратом сервер проверяет владельца и текущее состояние заказа, а повторное нажатие не создаёт вторую корзину, ещё одну заявку на доставку или повторный возврат денег.
Как работает повторный заказ
После нажатия «Повторить заказ» магазин берёт из прежней покупки только товары и их количество и создаёт новую корзину. Старые цены, скидки, бонусы и способ доставки не переносятся: стоимость рассчитывается заново, а наличие каждой позиции проверяется по текущим остаткам.
Если все товары доступны, покупатель переходит в новую корзину и ещё раз проверяет её состав и итоговую стоимость перед оформлением. Если хотя бы одной позиции больше нет в продаже, магазин сообщает об этом и не создаёт незаметно неполный заказ. Прежний заказ остаётся в истории без изменений.
Отмена заказа и логистический возврат
Доступное действие зависит от фактического состояния доставки. Если внешняя заявка ещё не создана, используется штатный workflow отмены Medusa. Если активное неотправленное отправление уже связано с Яндексом, сервер сначала получает допустимое подтверждение отмены от провайдера и только затем отменяет заказ, освобождает резервы и запускает полный возврат захваченной оплаты. Если перевозчик не подтвердил операцию, кабинет не показывает ложный статус «Отменён».
Для уже отправленных заказов Other-Day и ПВЗ обычная отмена заменяется отзывом и Return: возврат оплаты запускается после того, как Яндекс принял запрос на остановку и в Medusa создан Return, а остаток восстанавливается лишь после физического возвращения товара. Экспресс-заказ после передачи курьеру автоматически не отменяется — требуется поддержка Яндекса.
Отмена подтверждается в два шага: сначала покупатель открывает действие и видит его последствия, затем отдельно подтверждает решение. Промежуточные состояния — запрос отмены, возврат в пути и завершённый возврат — остаются видимыми в заказе. Повторные запросы защищены от дублирования операций и повторного возврата денег.
Понятное состояние отмены
В тестировании Baymard 42% пользователей путались после отправки запроса на отмену, если сообщение о результате оставалось неоднозначным. Поэтому кабинет показывает отдельные состояния запроса, возврата и завершения операции, а не скрывает весь процесс за общим статусом заказа. Исследование Baymard
WCAG рекомендует давать пользователю возможность проверить и отдельно подтвердить действие, которое меняет данные или приводит к финансовым последствиям. Этому принципу соответствует двухшаговая отмена заказа. W3C: предотвращение ошибок
Результат
Для покупателя
В одном кабинете собраны профиль, проверенные адреса, история покупок, актуальные статусы и доступные действия с заказом. Покупатель может самостоятельно проследить путь отправления, повторить заказ по текущим ценам или безопасно запустить отмену, не уточняя каждый этап у менеджера.
Для магазина
Кабинет снижает количество ручных операций и обращений по типовым вопросам. Заказы, оплата и доставка остаются согласованными: статусы обновляются автоматически, повторная покупка создаёт новую актуальную корзину, а отмена и возврат учитывают реальное состояние отправления и защищены от повторного выполнения.
Ключевые решения
- (01)Вход по электронной почте или через Яндекс ID
- (02)Сводка активных заказов и состояния профиля
- (03)История покупок с подробными статусами оплаты и доставки
- (04)Единая модель состояний Medusa, Robokassa и Яндекс Доставки
- (05)Сохранённые курьерские адреса и пункты выдачи
- (06)Повторный заказ по актуальным ценам и остаткам
- (07)Двухшаговая отмена и согласованный логистический возврат
- (08)Автоматическое обновление активных заказов
Desktop & Mobile
Обзор личного кабинета


История заказов


Сохранённые адреса


Профиль и контактные данные


Desktop
1920pxОбзор личного кабинета

История заказов

Сохранённые адреса

Профиль и контактные данные

Mobile
375pxОбзор личного кабинета

Сохранённые адреса

История заказов

Профиль и контактные данные

Бонусная система
Для «Арт-Кормушки» разработали собственную бонусную систему, связанную с каталогом, корзиной, оплатой, заказами и личным кабинетом. Для покупателя её ценность выражена максимально прямо: 1 бонус уменьшает стоимость товаров на 1 рубль.
Что требовалось решить
Зачем понадобилась собственная система
Бонусы должны были поддерживать повторные покупки, но не превращаться в ещё один промокод или непрозрачное число в профиле. Требовалась модель, которая одинаково корректно работает при оформлении, оплате, отмене, полном и частичном возврате.
До разработки мы сопоставили поведение покупателей в программах лояльности, условия магазинов смежной категории, цены ассортимента «Арт-Кормушки» и экономику возвратов. В результате выбрали простую модель без уровней и скрытых коэффициентов: заметное приветственное начисление для второй покупки, умеренный постоянный процент и ограничение максимальной скидки.
Наша реализация
Правила программы
1 бонус = 1 ₽
Бонус уменьшает стоимость участвующих в программе товаров ровно на один рубль.
300 приветственных бонусов
Выдаётся один раз после регистрации и подтверждения личности и не используется в первой покупке.
Активация через 14 дней
Приветственные и обычные бонусы становятся доступны через 14 дней после получения соответствующего заказа.
Срок действия — 30 или 365 дней
Приветственные бонусы действуют 30 дней после активации, обычные начисления — 365 дней.
Начисление 3% за заказ
Рассчитывается от товаров, фактически оплаченных деньгами после скидок и бонусов, с округлением вниз.
Списание до 20%
Активными бонусами можно уменьшить товарную часть заказа после других скидок. Минимум — 1 бонус.
Доставка не участвует в программе
Доставка не участвует ни в начислении, ни в списании и всегда оплачивается отдельно.
Сначала используются бонусы с ближайшим сроком сгорания
Система автоматически использует бонусы с ближайшей датой окончания срока действия.
Почему выбрали приветственные 300 бонусов
Категория изделий для птиц не предполагает такую же частоту покупок, как продукты или бытовые товары. Поэтому основным стимулом сделали не высокий постоянный кэшбэк, а заметную выгоду для следующего заказа. Data Insight рекомендует welcome-механики именно для бизнеса с более редкими покупками и высоким средним чеком.
Сумму связали с товарной матрицей и лимитом списания: 300 бонусов полностью применяются к заказу от 1 500 ₽. Такой порог находится в доступной части ассортимента, поэтому начисление можно использовать целиком уже при следующей содержательной покупке, но оно не превращает недорогой товар в бесплатный.
Приветственные бонусы активируются только после первого оплаченного и полученного заказа. Магазин не уменьшает выручку первой покупки, а покупатель получает конкретный повод вернуться после знакомства с изделием.
Welcome-механика для редкой категории
По данным Data Insight, постоянный кэшбэк менее эффективен в категориях с низкой частотой покупок и высоким средним чеком. Для таких сценариев исследователи рекомендуют welcome-механики. Это стало основанием сделать 300 приветственных бонусов главным стартовым стимулом, а постоянное начисление — более умеренным. Data Insight: программы лояльности
Почему начисляем 3%
Ставку 3% выбрали как понятную постоянную выгоду без чрезмерной нагрузки на маржу: каждая 1 000 ₽ товарной выручки создаёт 30 бонусов будущей скидки. Это позволяет сочетать программу с промокодами и акциями, поскольку начисление считается только с суммы, фактически оплаченной деньгами.
Постоянное начисление сделали не главным стимулом, а поддержкой после приветственных 300 бонусов. Единую ставку оставили без уровней, чтобы покупателю не приходилось разбираться в статусах и порогах.
Умеренное начисление для редкой категории
Data Insight отмечает, что постоянный кэшбэк может быть неэффективен в категориях с редкими покупками и высоким средним чеком: размер привилегии необходимо соотносить с прибылью, а основной акцент разумнее переносить на приветственную механику. Академический обзор исследований программ лояльности также показывает, что их эффект различается между сегментами и рынками — универсальной оптимальной ставки нет. Поэтому 3% определили из экономики проекта: на каждую 1 000 ₽ фактически оплаченных товаров приходится 30 бонусов будущей скидки; доставка, промокоды и уже списанные бонусы в базу начисления не входят. Data Insight: программы лояльности International Journal of Management Reviews: обзор исследований
Почему можно списать до 20%
Лимит 20% сохраняет баланс интересов: покупатель получает заметную скидку, а не символические несколько рублей, при этом не менее 80% товарной части остаётся к денежной оплате. Ограничение защищает маржу при совместном использовании бонусов, промокодов и акций и оставляет денежную базу для следующего начисления.
Жёсткость лимита компенсировали отсутствием порога накопления: списать можно начиная с одного бонуса. Доставка исключена, потому что это отдельная прямая стоимость логистики, а доставка в пункты выдачи уже субсидируется магазином. Так бонусная программа влияет на цену товара, но не создаёт вторую скрытую скидку на перевозку.
Почему 1 бонус равен 1 рублю
Фиксированный курс позволяет сразу понять ценность баланса: 300 бонусов — это 300 ₽ скидки без дополнительных пересчётов.
Почему активация происходит через 14 дней
Срок привязали к условиям магазина: обмен товара возможен в течение 14 дней. Пока этот период не закончился, начисление остаётся ожидающим и его нельзя потратить в другом заказе. Это предотвращает сценарий, при котором покупатель использовал новые бонусы, а затем вернул исходный товар и получил деньги обратно.
Приветственные бонусы действуют 30 дней, потому что их задача — сформировать ограниченное окно для второй покупки. Обычные начисления действуют 365 дней: длительный срок соответствует невысокой частоте покупок в категории и не заставляет постоянного клиента возвращаться неестественно быстро.
Срок связан с реальным возвратным окном
Отложенная активация совпадает с 14-дневным сроком обмена, установленным магазином, и соответствует практике защиты программ лояльности от возвратного сценария. Условия возврата «Арт-Кормушки» Oracle: защита начислений до завершения возвратного периода
Как покупатель использует бонусы
На странице товара заранее показывается прогноз начисления и срок его активации. В корзине авторизованный покупатель видит доступный баланс и переключатель с максимальной суммой скидки для текущего заказа. Сервер сам учитывает остаток, другие скидки и лимит в 20%, поэтому допустимую сумму не нужно рассчитывать вручную.
Баланс, сроки и история в личном кабинете
В кабинете отдельно показаны доступные и ожидающие бонусы, их эквивалент в рублях, ближайшая дата активации и срок сгорания. В истории остаются только понятные покупателю события: начисление, активация, списание, восстановление, сгорание и корректировка. Служебные операции резервирования не перегружают интерфейс.
Каждое начисление хранится отдельной партией со своим сроком. При оплате сначала используются бонусы, которые сгорят раньше. Покупателю не нужно самостоятельно выбирать партии и следить, в каком порядке их тратить.
Результат
За простым действием — точный учёт
При применении в корзине бонусы сначала резервируются, а на время оплаты защищаются от повторного использования. Это исключает двойное списание, если покупатель открыл магазин в нескольких вкладках или платёжное подтверждение пришло повторно.
Перед созданием платежа сервер ещё раз сверяет владельца корзины, баланс, товары, скидки, лимит списания и итоговую сумму. Бонусная скидка распределяется по конкретным товарным позициям, чтобы сумма заказа, фискальный чек и возможный частичный возврат использовали один и тот же расчёт.
Возвраты без расхождений
При возврате покупателю перечисляется только та часть стоимости, которая была оплачена деньгами, а использованные бонусы восстанавливаются отдельно. Одновременно пересчитывается начисление за возвращённые товары.
Например, если товар стоил 1 000 ₽, из которых 200 ₽ были покрыты бонусами, покупатель получает назад 800 ₽ и 200 бонусов. Если первоначальный срок восстановленной партии уже закончился или скоро закончится, система даёт не менее 30 дней на её использование.
Если начисленные за исходный заказ бонусы уже были потрачены до возврата, система фиксирует бонусную задолженность. Будущие начисления сначала погашают её, а до этого новое списание недоступно. В кабинете такое состояние объясняется словами, а не показывается как непонятный отрицательный баланс.
Почему понадобилась собственная разработка
Перед началом работы мы изучили готовые решения для программ лояльности, но не нашли варианта, который поддерживал бы всю выбранную модель без существенной переделки. Большинство решений рассчитано на общий баланс и простую схему «начислить — списать», тогда как программе «Арт-Кормушки» требовались отложенная активация, разные сроки действия начислений, автоматический выбор ближайших к сгоранию бонусов и резервирование на время оплаты.
Отдельным требованием стала корректная работа с полными и частичными возвратами: система должна разделять денежную и бонусную части покупки, восстанавливать использованные бонусы и пересчитывать ранее полученное начисление. Готового решения, которое одновременно учитывало бы эти правила, версии условий и подробную историю операций, не было.
Поэтому бонусную систему разработали специально под экономику и процессы магазина. Для покупателя она остаётся простой и понятной, а все сложные расчёты, проверки и восстановления выполняются автоматически на сервере.
Управление правилами и надёжность
При необходимости администратор может без изменения кода настроить количество приветственных бонусов, процент начисления, максимальную и минимальную сумму списания, задержку активации и сроки действия разных начислений. Программу, приветственные бонусы, начисление за заказы и списание можно включать или временно отключать по отдельности.
Изменённые условия сначала сохраняются как черновик, а затем публикуются с выбранной датой начала. Будущую версию можно перенести или отменить, но уже опубликованные правила не редактируются задним числом: для новых условий создаётся следующая версия.
Администратор также может просматривать бонусные счета и партии и выполнять ручные корректировки с обязательным указанием причины.
Каждый заказ сохраняет связь с версией правил, действовавшей в момент операции. Журнал фиксирует начисления, резервы, списания, возвраты и корректировки, а фоновые проверки завершают операции после сетевых сбоев и не допускают повторной обработки одного события.
Bonus System
Баланс и история операций


Условия бонусной программы


Desktop
1920pxБаланс и история операций

Условия бонусной программы

Mobile
375pxБаланс и история операций

Условия бонусной программы

Административная панель и работа склада
Административную часть сделали не просто местом для редактирования товаров, а рабочим инструментом интернет-магазина: здесь сотрудник видит новые заказы, контролирует оплату и доставку, собирает отправления, формирует складские документы и управляет каталогом.
Что требовалось решить
Связать заказ с реальной работой склада
Обычного списка заказов было недостаточно. Сотруднику нужно быстро отличать оплаченные заказы от ожидающих платежа, понимать, что уже собрано и передано перевозчику, и видеть следующее доступное действие.
Убрать ручные таблицы и повторную сверку
Для отбора товаров, комплектации заказов и маркировки отправлений нужны разные документы. Если собирать их вручную, возрастает риск перепутать количество, заказ или грузовое место.
Дать магазину самостоятельное управление
Каталог, характеристики, варианты и правила бонусной программы должны меняться из административной панели без обращения к разработчику для каждой повседневной операции.
Наша реализация
Рабочий процесс по принципу кабинетов маркетплейсов
Складской раздел построили по знакомой операционной логике: очередь задач, массовое выделение заказов, пакетные действия и готовые документы под конкретный этап. Сотрудник работает не со всей базой заказов, а только с теми, которые действительно требуют сборки или уже подготовлены к передаче.
Очередь разделена на два состояния — «К сборке» и «Собранные». В неё попадают только полностью оплаченные заказы с физическими товарами и корректно определённой доставкой. Отменённые, неоплаченные, черновые и уже завершённые заказы не смешиваются с текущей работой.
В таблице сразу видны номер и дата заказа, способ доставки, получатель, количество позиций, сумма и состояние отправления. Для Яндекс Доставки дополнительно показывается интервал передачи и прогресс до его окончания. Заказы можно выбирать группой, а частые действия доступны через командную панель и горячие клавиши.
Три независимых состояния заказа
В карточке заказа отдельно показали оплату, сборку и доставку. Один общий статус не скрывает реальную ситуацию: заказ может быть оплачен, но ещё не собран, или собран, но пока не передан перевозчику.
Сотрудник видит состояние каждого этапа, данные Robokassa и Яндекс Доставки, время последней синхронизации и рекомендуемое следующее действие. Информация обновляется автоматически, но её можно запросить повторно вручную.
Выгрузка по товарам
Выбранные заказы объединяются по одинаковым изделиям. Сотрудник получает PDF с фотографией, названием, артикулом и общим количеством товара, которое нужно взять с мест хранения. Персональные данные покупателей в эту выгрузку не включаются.
Выгрузка по заказам
Для комплектации формируется отдельный лист на каждый заказ: получатель, адрес, способ доставки, фотографии товаров, артикулы и количество. Каждый заказ начинается с новой страницы, поэтому лист можно использовать непосредственно во время сборки.
Документы по отправлениям
После сборки система связывает товары с конкретными грузовыми местами Яндекс Доставки. В документе указываются номер отправления, место формата 1/2, его штрихкод и состав. Это помогает правильно разложить товары по коробкам в многоместной отправке.
Официальные ярлыки загружаются напрямую из Яндекс Доставки, а не рисуются магазином самостоятельно. Для выбранной партии сотрудник может одним действием получить ZIP-комплект: ярлыки, список по отправлениям и сводный лист по товарам.
Сборка и создание отправлений
Перед сборкой сотрудник подтверждает, что проверил все позиции. Затем сервер повторно загружает заказ, проверяет оплату и текущее состояние и создаёт отправление на полное количество физических товаров. Нельзя случайно передать неоплаченный заказ или сформировать неполную отгрузку в обход подтверждённого платежа.
При массовом действии заказы обрабатываются последовательно. Если один из них требует внимания, уже созданные отправления сохраняются, дальнейшая обработка останавливается, а сотрудник видит, сколько заказов было успешно подготовлено.
Управление каталогом без разработчика
В карточке товара администратор редактирует категории, контент, характеристики товара и его вариантов, изображения, цены, остатки, инструкцию по установке и ссылку на Ozon. Набор характеристик зависит от категории, поэтому сотрудник видит только подходящие поля, а не длинную универсальную форму.
Характеристики, связанные с габаритами, автоматически передаются в данные для расчёта доставки. Основная категория одновременно определяет адрес карточки, хлебные крошки и положение товара в карте сайта — каталожные, логистические и SEO-данные остаются согласованными.
Разделение прав сотрудников
Права на просмотр складской очереди и создание отправлений разделены. Аналогично отдельно контролируются просмотр и изменение бонусной программы. Складской сотрудник получает только данные и действия, необходимые для своей работы, без полного доступа ко всей административной части.
Результат
Для сотрудника
Вместо переключения между общей админкой, таблицами и кабинетом перевозчика сотрудник получает последовательный сценарий: увидеть новый оплаченный заказ, отобрать товары, собрать его, скачать документы и подготовить к передаче.
Разные виды выгрузок соответствуют разным физическим операциям склада. Фотографии, артикулы, количество, адреса, грузовые места и ярлыки формируются из актуального заказа, поэтому их не приходится переносить вручную.
Для бизнеса
Административная панель связывает каталог, склад, оплату, доставку, возвраты и бонусы. Перед критическим действием сервер повторно проверяет состояние заказа, а действия сотрудников разделены правами доступа.
Это уменьшает число ручных сверок и ошибок при комплектации, ускоряет обработку партии заказов и позволяет развивать ассортимент и правила магазина силами команды, без постоянных изменений в коде.
Ключевые решения
- (01)Отдельная очередь «Склад и сборка»
- (02)Разделение оплаты, сборки и доставки
- (03)Массовый выбор заказов и горячие клавиши
- (04)PDF по товарам, заказам и грузовым местам
- (05)Официальные ярлыки и единый ZIP-комплект
- (06)Повторная проверка заказа перед выгрузкой и сборкой
- (07)Категорийные характеристики товаров и вариантов
- (08)Разделение прав склада и администраторов
SEO и поисковая доступность
SEO встроили в архитектуру магазина, чтобы товары можно было находить по конкретным запросам, старые ссылки продолжали работать после переноса, а новые позиции автоматически становились доступными поисковым и товарным сервисам.
Что требовалось решить
Доступный поисковым системам каталог
Категории, товары и информационные страницы должны передавать поисковому роботу готовое содержимое и связываться обычными ссылками.
Перенос старых адресов
После смены платформы прежние ссылки на товары, категории и материалы требовалось направить на соответствующие страницы нового сайта.
Контроль дублей
Фильтры, сортировка и пагинация создают похожие адреса. Нужно было разделить индексируемые страницы и технические комбинации, существующие только для интерфейса.
Наша реализация
Поиск видит весь каталог
Категории и карточки формируются на сервере, поэтому названия, цены, описания и ссылки доступны поисковой системе сразу. Роботу не нужно запускать интерфейс или пользоваться внутренним поиском, чтобы обнаружить товары.
Основные направления ассортимента получили собственные страницы с понятными заголовками и описаниями. Благодаря этому магазин может отвечать не только на общий запрос о кормушках, но и на более конкретные — например, о моделях на окно или изделиях из дерева.
Старые ссылки продолжают работать
При переносе магазина прежние адреса товаров, категорий и инструкций связали с соответствующими страницами нового сайта. Поэтому покупатели и поисковые системы переходят по старым ссылкам на актуальные материалы, а не на ошибку 404.
Фильтры не создают дубли
Покупатель может сочетать материалы, цвета, крепления и сортировку, но поисковой системе не нужно индексировать каждую такую комбинацию как отдельную страницу. Адреса с активными фильтрами исключаются из индексации и указывают на основную категорию.
Пагинация, наоборот, остаётся доступной поисковому роботу. У каждой страницы свой адрес и обычные ссылки перехода, поэтому товары из глубины каталога тоже можно обнаружить.
Поиск получает актуальные данные о товаре
Для карточек автоматически создаются заголовок, описание, основной адрес, хлебные крошки и товарная микроразметка Product JSON-LD. Она помогает поисковой системе понять, что перед ней товар, сколько он стоит, доступен ли он и кто его продаёт. Цена и наличие берутся из актуальных данных магазина.
Если отдельное SEO-описание не заполнено, система аккуратно формирует его из информации о товаре. Администратору не нужно вручную подготавливать обязательные метаданные для каждой новой позиции.
Новые товары добавляются автоматически
Карта сайта обновляется из текущего каталога, а служебные страницы — корзина, оформление заказа и личный кабинет — исключены из поиска. Для Google и Яндекса также формируются товарные фиды с ценами, наличием, изображениями и вариантами.
После публикации новый товар включается в общую поисковую структуру и выгрузки без ручного редактирования отдельных файлов.
Можно оценивать коммерческий результат
В Яндекс Метрику передаются только подтверждённые покупки с номером заказа, выручкой и составом. Это позволяет оценивать не просто посещаемость из поиска, а переходы к товарам, оплаченные заказы и выручку.
Результат
Поисковые системы получают готовые страницы, единую структуру адресов и актуальные данные о товарах. Старые ссылки ведут на соответствующие новые материалы, а технические комбинации фильтров не перегружают индекс.
Новые товары и категории автоматически включаются в метаданные, микроразметку, sitemap и фиды. Фактический рост трафика, позиций и заказов оценивается отдельно по данным Яндекс Вебмастера, Google Search Console и Метрики.
Ключевые решения
- (01)Серверное формирование содержимого индексируемых страниц
- (02)Отдельные поисковые направления каталога
- (03)Единые canonical и иерархические адреса
- (04)Постоянные перенаправления со старой структуры
- (05)Контроль индексации фильтров и корректная пагинация
- (06)Product JSON-LD и хлебные крошки для карточек товаров
- (07)Автоматические sitemap, robots.txt и товарные фиды
- (08)Связь поискового трафика с подтверждёнными покупками
Безопасность магазина и платежей
Безопасность встроили в основные сценарии магазина: вход в личный кабинет, работу с заказами, расчёт стоимости, оплату, бонусы и возвраты. Покупателю это даёт предсказуемые и защищённые действия, а бизнесу — уверенность, что доступ, сумма и финансовый результат подтверждены на сервере.
Что требовалось решить
Сохранить личные данные закрытыми
В кабинете хранятся контакты, адреса и история покупок. Эти сведения и действия с заказом должны быть доступны только его владельцу.
Не допустить подмены суммы
Покупатель видит цену, доставку, скидки и бонусы в интерфейсе, но окончательный расчёт должен оставаться под контролем магазина.
Корректно переживать сбои и повторные запросы
Задержка сети, повторное уведомление об оплате или двойное нажатие не должны создавать второй заказ, повторно списывать бонусы или дважды возвращать деньги.
Наша реализация
Защищённый вход и доступ к заказам
Сайт работает по HTTPS, а авторизационная сессия хранится в HttpOnly-cookie с защитными настройками и недоступна JavaScript страницы. Для входа через Яндекс ID сервер проверяет одноразовый параметр авторизации и допустимый адрес возврата.
При открытии, повторе, отмене или возврате заказа backend сопоставляет его с текущим покупателем. Подмена идентификатора в адресе не открывает чужую покупку. Та же проверка действует для корзины, бонусного счёта, сохранённых адресов и отслеживания доставки.
Сервер контролирует стоимость
Браузер показывает цену, доставку, скидки и бонусы, но не определяет их окончательные значения. Перед оплатой сервер заново проверяет состав корзины и рассчитывает итоговую сумму. Для платёжной сессии сохраняется зафиксированное состояние заказа; если корзина изменилась, прежняя ссылка на оплату перестаёт действовать.
Подписанное подтверждение Robokassa
Реквизиты карты вводятся в официальной форме Robokassa и не сохраняются магазином. Возвращение покупателя на сайт ещё не считается оплатой: backend проверяет подпись серверного уведомления, номер счёта, точную сумму и связь платежа с конкретной сессией. Только после этого заказ получает подтверждённый статус.
Защита от повторных операций
Платежи, бонусные операции, отмены и возвраты защищены идемпотентностью и серверными блокировками. Поэтому повторный callback, двойное нажатие или параллельный процесс не создают второй заказ, повторное начисление или два возврата денег. При расхождении финансовых данных автоматическая операция останавливается для ручной сверки.
Ограничение данных и запросов
В личный кабинет передаётся только публичная часть заказа: понятный статус, история, трек-номер и доступные действия. Внутренние идентификаторы, координаты маршрута и служебные данные внешних систем остаются на сервере. Для входа, платежей, отмен и других чувствительных API действуют отдельные ограничения частоты запросов.
Результат
Для покупателя
Личные данные и история покупок остаются доступны только владельцу аккаунта. Сумма заказа не меняется незаметно, карточные реквизиты не проходят через магазин, а повторное нажатие не приводит к двойной операции.
Для бизнеса
Магазин принимает решения по проверенным данным: самостоятельно рассчитывает стоимость, подтверждает оплату через Robokassa и останавливает операцию при расхождениях. Это снижает риск доступа к чужим заказам, подмены суммы, неоплаченной отправки и дублирования платежей или возвратов.
Ключевые решения
- (01)HTTPS и защищённая HttpOnly-сессия
- (02)Серверная проверка владельца заказа и корзины
- (03)Повторный расчёт стоимости перед оплатой
- (04)Проверка подписи и суммы уведомления Robokassa
- (05)Идемпотентность платежей, бонусов и возвратов
- (06)Остановка финансовой операции при расхождении данных
- (07)Ограниченная публичная выдача данных заказа
- (08)Rate limits для чувствительных API
ТЕХНОЛОГИИ
Стек магазина — от интерфейса до production-инфраструктуры
Проект объединяет отдельную витрину, commerce-backend, административную панель, поиск, фоновые процессы и внешние сервисы. Ниже собраны технологии, которые фактически используются в коде и инфраструктуре магазина.
- Витрина и интерфейс
Серверные страницы магазина, адаптивный интерфейс, доступные компоненты и анимация.
Next.js 15React 19TypeScriptTailwind CSSPostCSSAutoprefixerGSAPScrollTriggerHeadless UIRadix UIMedusa JS SDKlibphonenumber-js - Commerce и данные
Каталог, клиенты, заказы, склад, бонусы и административные процессы работают в общем commerce-контуре.
Medusa 2Medusa AdminMedusa UIMedusa Workflow EnginePostgreSQL 16Redis 7TanStack QueryReact Routerreact-i18nextZod - Поиск и обработка контента
Поисковый индекс, изображения, складские документы и товарные выгрузки формируются автоматически.
MeilisearchSharpPDFKitJSZipFast XML ParserGoogle Merchant FeedЯндекс YMLSchema.org JSON-LD - Доставка и геоданные
Адреса проверяются, тарифы рассчитываются, ПВЗ выбираются на карте, а статусы доставки синхронизируются с заказом.
Яндекс Доставка APIВиджет ПВЗ ЯндексаЯндекс ГеосаджестЯндекс ГеокодерIPWho.is - Платежи и коммуникации
Оплата, авторизация, транзакционные письма и ecommerce-аналитика связаны с состоянием заказа.
RobokassaСБПЯндекс ID OAuthUniSender GoЯндекс Метрика Ecommerce - Инфраструктура и качество
Приложения собираются, тестируются и запускаются как отдельные управляемые сервисы с воспроизводимым релизом.
Node.js 20npm WorkspacesTurborepoDocker ComposeNginxsystemdLet’s EncryptGitHub ActionsViteSWCJestESLintDependabotGit LFS
ИТОГ ПРОЕКТА
Запустили интернет-магазин полного цикла
За четыре месяца создали и запустили единую e-commerce-платформу: от каталога и подбора по параметрам до доставки, оплаты, личного кабинета, бонусной системы и административного управления. После запуска продолжаем поддерживать магазин, развивать существующие сценарии и добавлять новые функции по мере роста проекта.
Открыть сайт «Арт Кормушка»