Як кастомний checkout на Vue.js для 1С-Бітрікс підвищує конверсію на 40%

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

Проблеми стандартного checkout і як їх вирішує Vue

Стандартний bitrix:sale.order.ajax генерує безліч зайвих запитів. При кожному перемиканні кроку — повне перезавантаження сторінки. Це вбиває UX, особливо на мобільних. Vue-компоненти працюють в рамках однієї сторінки: зміна доставки не скидає заповнені поля, валідація йде миттєво, а стан відновлюється з localStorage при обриві. Наше рішення — кастомний Vue.js checkout для 1С-Бітрікс — у 3 рази швидше за стандартний.

Архітектура 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-компоненти прискорюють оформлення замовлення?

Завдяки реактивній архітектурі оновлення відбуваються без повної перерисовки. Наприклад, вибір міста доставки миттєво оновлює список пунктів видачі та вартість. Наш клієнт (інтернет-магазин зоотоварів) заощадив $200, замовивши кастомне Vue-рішення замість постійного «костылювання» стандартної форми.

Процес роботи

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

Що входить в роботу

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