Пан Чемодан: Обновили чекаут на 1С‑Битрикс и получили +44,7% заказов год к году

TL;DR

Переписали чекаут интернет‑магазина «Пан Чемодан» на 1С‑Битрикс: ушли со старого API, который Битрикс снял с поддержки, перевели фронт на Vue.js. В декабре 2023 года заказов стало на 44,7% больше, чем в декабре 2022, Total Blocking Time на странице упал на 55%.

Pitch

К нам пришёл fashion‑ритейлер с 62 бутиками и интернет‑магазином на 1С‑Битрикс. Битрикс прекратил поддержку старого API чекаута, накопились задачи, которые на нём было не решить: дубли товаров в корзине, невозможность обновить модуль СДЭК, разная логика доставок для сайта и мобильного приложения. Мы переписали бэкенд чекаута, перевели фронт на Vue.js и собрали единый набор компонентов для корзины, доставок, оплат и авторизации. В декабре 2023 заказов стало на 44,7% больше, чем годом ранее, Total Blocking Time снизился на 55% — чекаут стал заметно отзывчивее.

Контекст клиента

«Пан Чемодан» — fashion‑ритейлер с более чем 20‑летней историей, продаёт мужские и женские сумки и чемоданы. На момент работ — 62 бутика по России и интернет‑магазин на 1С‑Битрикс. С Intensa клиент работает с 2016 года: сначала сняли нагрузку с сервера в 2 раза, потом сделали интеграцию с мобильным приложением IMSHOP за 3 месяца, потом взялись за чекаут.

Задача

При масштабировании проекта и подключении новых интеграций упёрлись в проблему старого API чекаута, поддержку которого 1С‑Битрикс официально прекратил. В бэклоге к этому моменту накопилось несколько задач, которые не могли решить из‑за старого компонента:

1. Происходило дублирование товаров в корзине при сохранении заказа.
2. Невозможно было обновить модуль СДЭК, установить ПВЗ и синхронизировать новые точки.
3. Из‑за разного механизма получения доступных доставок для сайта и мобильного приложения приходилось делать работу дважды.

Нужно было перевести чекаут на актуальный API, поправить логику доставок и оплат, сделать единый источник данных для сайта и приложения.

Что сделали

Переписали бэкенд чекаута

• Формирование доступных складов самовывоза.
• Удаление недоступных товаров к заказу для текущего региона.
• Добор пакетов.
• Актуализацию ограничений оплат и доставок.
• Загрузку профиля пользователя по текущему местоположению.
• Перенос функционала франчайзи.

Сделали фронтенд на Vue.js

Перевели чекаут на Vue.js и собрали единый набор компонентов:

• Вывод корзины, пакетов, личных данных, списка доставок, карты для выбора пункта самовывоза и самих точек самовывоза, списка оплат, адреса доставки, блока для комментария, предупреждений и нотификаций, попапа с авторизацией.
• Функционал промокода.
• Блок «Итого».
• Чекбоксы подписки и согласия на обработку персональных данных.
• Страницу «Спасибо за заказ».

Результат

Код чекаута стал более гибким и адаптированным под внедрение дополнительных модулей — например, доставки, рассрочки, подарочных сертификатов. Чекаут стал «чище» кодом и начал быстрее работать при взаимодействии с любыми элементами: при заполнении форм, переключении кнопок, вводе адреса. Клиент получил ускоренную работу интерфейса и ускоренную работу с элементами выбора доставки.

Улучшился один из показателей скорости загрузки — Total Blocking Time, суммарное время всех интервалов от первой отрисовки до полной загрузки страницы. После обновления показатель стал лучше на 55%.

В декабре 2023 года количество заказов в интернет‑магазине выросло на 44,7% по сравнению с декабрем 2022 года.

Где проект сейчас

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

Команда

• Кирилл Трофимов — Генеральный директор
• Ирина Мигунова — Менеджер проектов

Технологии

• CMS: 1С‑Битрикс
• Фронтенд: Vue.js
• Язык: PHP
• Доставка: СДЭК

Ссылки

• Публикация: https://intensa.ru/⁠blog/⁠obnovlenie‑chekauta‑v‑magazine‑chemodanov/
• Сайт клиента: https://panchemodan.ru/
• Связанные кейсы: Снизили нагрузку на сервер в 2 раза, Интеграция с мобильным приложением IMSHOP