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

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

Оформление заказа — этап с наибольшим процентом отказов. Стандартный bitrix:sale.order.ajax — многошаговая форма с перезагрузкой шагов. Vue-checkout позволяет сделать одностраничное оформление с мгновенными обновлениями стоимости доставки, живой валидацией и сохранением прогресса.

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

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

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

Одностраничный accordion — все секции видны, заполненные сворачиваются. Удобнее на мобильных.

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

API для создания заказа

Битрикс создаёт заказ через \Bitrix\Sale\Order:

$order = \Bitrix\Sale\Order::create(SITE_ID, $userId);
$order->setPersonTypeId($personTypeId);

// Свойства заказа (ФИО, телефон, email)
$propertyCollection = $order->getPropertyCollection();
$propertyCollection->getItemByOrderPropertyCode('NAME')?->setValue($name);

// Доставка
$shipment = $order->getShipmentCollection()->createItem();
$shipment->setFields([
    'DELIVERY_ID' => $deliveryId,
    'DELIVERY_LOCATION' => $locationCode,
]);

// Оплата
$payment = $order->getPaymentCollection()->createItem();
$payment->setFields(['PAY_SYSTEM_ID' => $paySystemId]);

$order->save();

Оборачиваем в контроллер, принимающий JSON от Vue.

Расчёт стоимости доставки в реальном времени

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

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

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

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

Серверная валидация + клиентская на 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 });

При возврате — восстанавливаем. Очищаем после успешного заказа.

Случай из практики

Магазин товаров для животных, высокая мобильная аудитория. Стандартный checkout Битрикс — 4 шага с перезагрузкой, на мобильных терялась часть данных при переключении вкладок (форма сбрасывалась). Vue-checkout в формате accordion, состояние в Pinia + localStorage: данные не теряются даже при звонке с телефона. Автозаполнение адреса через DaData с компонентом AddressSuggest.vue. Конверсия на мобильных устройствах выросла существенно — данные внутреннего A/B теста клиента.

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