Розробка оформлення замовлення (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 тесту клієнта.

Терміни виконання