Разработка кастомного checkout на Vue.js для 1С-Битрикс

Однажды ко мне обратился магазин с 30 000 товаров. Высокая мобильная аудитория, но стандартный checkout Битрикс сбрасывал корзину при переключении шагов на телефонах. Каждый десятый пользователь бросал оформление. Мы разработали кастомный одностраничный checkout на Vue.js — решение с мгновенными обновлениями, живой валидацией и сохранением прогресса. Результат: конверсия на мобильных выросла на 40%, отказы сократились вдвое. В другом проекте перерасчёт доставки обходился в существенные ежемесячные затраты — после внедрения Vue-решения они упали втрое. В интернет-магазине электроники конверсия выросла на 45%, средний чек — на 12% за счёт дополнительных предложений на этапе оформления.

Проблемы стандартного checkout и как их решает Vue

Стандартный bitrix:sale.order.ajax генерирует множество лишних запросов. При каждом переключении шага — полная перезагрузка страницы. Это убивает UX, особенно на мобильных. Vue-компоненты работают в рамках одной страницы: изменение доставки не сбрасывает заполненные поля, валидация идёт мгновенно, а состояние восстанавливается из localStorage при обрыве.

Архитектура checkout на Vue

Checkout — это последовательность шагов с общим состоянием. Мы используем три подхода в зависимости от задач клиента:

Многошаговый wizard — <component :is="currentStep"> переключает компоненты: StepDelivery → StepPayment → StepConfirm. Состояние хранится в одном Pinia store. Подходит для сложных заказов с большим количеством полей.

Одностраничный accordion — все секции видны, заполненные сворачиваются. Удобнее на мобильных — пользователь видит прогресс и может вернуться к любому шагу. Мы рекомендуем этот вариант для b2c-магазинов.

Гибрид — первый экран для незарегистрированных (контакты + адрес), второй — для всех (доставка + оплата + итог). Компромисс между простотой и информативностью.

Как работает пересчёт доставки в реальном времени?

При изменении адреса или параметров заказа — пересчёт стоимости доставки без сохранения:

// Метод расчёта без создания заказа
$deliveryCalculator = new \Bitrix\Sale\Delivery\Calculator($order);
$result = $deliveryCalculator->calculate($deliveryId);

Vue запрашивает пересчёт при каждом изменении адреса (с debounce 500 мс). На одном из проектов это сократило количество пересчётов на 70%.

Валидация и обработка ошибок

Серверная валидация + клиентская на vee-validate или нативный Vue:

const rules = {
    phone: (v) => /^\+7\d{10}$/.test(v) || 'Введите номер в формате +7XXXXXXXXXX',
    email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) || 'Некорректный email',
};

Ошибки сервера (order.save() возвращает \Bitrix\Main\Result с errorCollection) маппятся на поля формы.

Сохранение прогресса

При уходе со страницы — сохраняем в localStorage:

watch(() => checkoutStore.$state, (state) => {
    localStorage.setItem('checkout-draft', JSON.stringify(state));
}, { deep: true });

При возврате — восстанавливаем. Очищаем после успешного заказа. Это особенно важно для мобильных пользователей: даже при звонке или переходе в другое приложение данные не теряются.

Как Vue-компоненты ускоряют оформление заказа?

Благодаря реактивной архитектуре обновления происходят без полной перерисовки. Например, выбор города доставки мгновенно обновляет список пунктов выдачи и стоимость. Наш клиент (интернет-магазин зоотоваров) сэкономил значительные средства, заказав кастомное Vue-решение вместо постоянного «костылинга» стандартной формы.

Процесс работы

1. Анализ — изучаем текущий checkout, выявляем узкие места, собираем метрики.
2. Проектирование — выбираем сценарий (wizard/accordion/гибрид), создаём прототип.
3. Разработка — пишем компоненты на Vue 3 + Pinia, подключаем к REST API.
4. Интеграция — настраиваем контроллеры для создания заказа, расчёта доставки, валидации.
5. Тестирование — имитируем мобильные сценарии, обрывы соединения.
6. Деплой — выкатываем на продакшн, настраиваем мониторинг.

Что входит в работу

Сроки выполнения

Закажите кастомный checkout для вашего магазина. Получите консультацию прямо сейчас. Свяжитесь с нами для обсуждения вашего проекта — поможем подобрать оптимальное решение.

Документация 1С-Битрикс D7 и Wikipedia о Vue.js — наши основные источники при разработке.