Abra: полная переделка интернет-магазина посуды и товаров для дома

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

Старый проект вырос из прежней архитектуры и множества последовательных доработок. Чтобы заметно изменить пользовательский опыт и при этом сохранить рабочий контур компании, мы разделили систему на современную SSR-витрину и привычный для редакторов и менеджеров Bitrix-бэкенд.

Новый магазин для розницы и бизнеса

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

Получился не набор разрозненных страниц, а единая дизайн-система для десятков экранов и состояний. Интерфейс адаптирован для desktop, tablet и mobile, поддерживает клавиатурную навигацию и сохраняет ключевые действия на любом размере экрана.

Тихая предметная галерея

Визуальную концепцию построили вокруг самого товара. Крупные фотографии, тёплая нейтральная палитра, редакционная типографика и строгая сетка создают ощущение спокойной предметной галереи. Интерфейс не спорит с фактурой посуды и остаётся практичным в насыщенных торговых сценариях.

Nuxt 4 поверх Bitrix

Публичную часть разработали на Nuxt 4, Vue 3 и TypeScript с серверным рендерингом. Браузер работает с единым API витрины, а Nuxt обращается к Bitrix server-to-server. Типизированные контракты отделяют интерфейс от источника данных: страницы не пришлось переписывать при переходе от прототипов к живому каталогу.

Bitrix сохранился как центр управления товарами, ценами, остатками, контентом и заказами. Для нового сайта создан отдельный API-контур: каталог и карточки, корзина, checkout, авторизация, избранное, личный кабинет, блог, страницы брендов и коллекций получают реальные данные из административной системы.

Заказ как сквозной бизнес-процесс

Самая сложная часть проекта находилась за пределами видимого интерфейса. Мы связали оформление заказа с RetailCRM, подготовили регламентированный обмен CommerceML с 1С, подключили онлайн-оплату картой и через СБП, возвраты, письма и доставку. Правила повторно проверяются на сервере: доступные способы зависят от типа плательщика, доставки, статуса заказа и подтверждения менеджером.

Для интеграций зафиксировали контракты, матрицы статусов и оплат, правила идентификации товаров и покупателей, сценарии повторной выгрузки, отмены и восстановления после ошибок. Благодаря этому магазин, CRM и учётная система работают как один процесс, а критические операции не зависят от случайного состояния интерфейса.

Запуск без потери работающего магазина

Переезд на основной домен подготовили как отдельный инженерный этап. До переключения проверили canonical-ссылки, sitemap, старые адреса, товарные ссылки для CRM, платёжные возвраты и фоновые задания. Новый релиз разворачивается атомарно, проходит typecheck, сборку и health-check до переключения трафика.

Перед запуском сохранили зашифрованные резервные копии старого и нового контуров, конфигурацию сервера и контрольные суммы. После переключения проверили ключевые страницы на трёх разрешениях, API, карточки товаров, корзину, SEO-файлы и интеграционные выгрузки. Старые пользовательские адреса получили точечные перенаправления, а административный Bitrix остался на отдельном служебном домене.

Результат

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

Технологии: Nuxt 4, Vue 3, TypeScript, 1С-Битрикс, REST API, RetailCRM, CommerceML, ЮKassa, СБП, PM2, Nginx

Работы: аналитика, проектирование, UX/UI-дизайн, дизайн-система, frontend- и backend-разработка, интеграции, адаптивная вёрстка, QA, SEO-переезд, автоматизация деплоя и запуск