Коли в проєкті Бітрікс вже є стандартний компонент замовлення, але потрібно додати крок вибору часу доставки або умовний перехід при самовивозі — стандартна логіка перестає працювати?
Клієнти втрачають конверсію, а розробники йдуть в тижні правок. Ми — команда з 10+ річним досвідом розробки на Бітрікс та більше 50 успішних проєктів — налаштовуємо покрокове оформлення замовлення з нуля або доопрацьовуємо існуюче. Налаштовуємо кількість кроків, порядок, AJAX-перемикання та додаткові поля. Оцінимо проєкт за 1 день — просто напишіть нам. За статистикою, правильно налаштоване покрокове оформлення підвищує конверсію в 1.3 рази порівняно з односторінковою формою, за рахунок зниження когнітивного навантаження на користувача. Ми вирішуємо завдання будь-якої складності: від додавання одного поля до складної логіки з умовними переходами, інтеграцією з 1С та фіскалізацією.
Як працює покроковість
Компонент bitrix:sale.order.ajax з параметром DELIVERY_MODE = SPLIT_DELIVERY розбиває оформлення на кроки. В папці шаблону .default лежить order_ajax.php та файли step_*.php. Перемикання між кроками — JavaScript-функція orderAjax.gotoStep(). Вона відправляє дані поточного кроку на сервер і отримує розмітку наступного. Важливо зберегти структуру JS-змінних: arOrderAjaxFields, arDeliveryList, arPaySystemList. Якщо ці об'єкти не заповнені коректно — AJAX-перемикання зламається.
Як додати новий крок в покрокове оформлення?
Стандартний шаблон підтримує 3 кроки. Для додавання нового (наприклад, «Вибір часу доставки» або «Подарункова упаковка») діємо за алгоритмом:
- Створюємо копію шаблону в
/local/components/bitrix/sale.order.ajax/templates/. - Додаємо файл
step_delivery_time.phpз розміткою кроку. - Реєструємо крок в JavaScript-масиві
orderAjax.steps. - В обробнику
OnSaleComponentOrderMakeOrderзберігаємо дані додаткового кроку в властивості замовлення.
Приклад JS-коду для реєстрації кроку
BX.message({STEP_DELIVERY_TIME: 'Оберіть час доставки'}); orderAjax.steps.push('STEP_DELIVERY_TIME'); На сервері в методі initStep перевіряємо, чи є крок в даних.
Причини поломки стандартного компонента при кастомних кроках
Основна причина — несумісність з очікуваною структурою даних. Кожен крок повинен повертати JSON з полями HTML, TITLE, DATA. Якщо формат порушено, orderAjax не оновлює крок. Друга причина — відсутність обробки нових полів у функції checkValid. Обов'язково додаємо валідацію для кожного кастомного поля. Згідно з офіційною документацією Бітрікс, копіювання шаблону в /local — перший крок для збереження змін при оновленні ядра.
Налаштування умовного переходу між кроками
Якщо для самовивозу потрібно пропустити крок з адресою, це реалізується через JS-подію:
BX.addCustomEvent('onSaleOrderAjaxStepChange', function(currentStep, nextStep) { if (currentStep === 'DELIVERY' && selectedDeliveryIsPickup()) { orderAjax.gotoStep('PAYMENT'); return false; } }); На сервері знімаємо обов'язковість полів адреси для самовивозу — через умову в OnSalePropertyValueCheck.
Як прискорити AJAX-перемикання між кроками?
AJAX-перемикання вже асинхронне, але швидкість можна підвищити кешуванням тегованим для списків доставки та оплати. Використовуємо Bitrix\Main\Data\Cache з тегами sale_delivery та sale_pay_system. Також відключаємо зайві виклики GetList в епілозі. При правильному налаштуванні крок перемикається за 200–400 мс — це в 3 рази швидше повного перезавантаження сторінки.
Порівняння: покрокове vs односторінкове оформлення
| Параметр | Покрокове оформлення | Односторінкове оформлення |
|---|---|---|
| Конверсія (середня) | 68–72% | 55–60% |
| Кількість полів на екрані | до 7 | до 20 |
| Підтримка складної логіки | умовні переходи, кастомні кроки | тільки базові поля |
| Час розробки кастомізації | 2–5 днів | 1–2 дні |
| Ризик помилок при інтеграції з 1С | середній (потребує тестування) | низький |
Що входить в роботу
- Документація: технічне завдання з описом кроків, діаграма станів, інструкція з експлуатації.
- Доступи: налаштування прав доступу до компонента, ролі для операторів.
- Навчання: сесія для адміністраторів з управління кастомними кроками.
- Підтримка: гарантійне обслуговування 1 рік, консультації щодо доопрацювань.
Етапи роботи
| Етап | Що робимо | Результат |
|---|---|---|
| Аналітика | Аудит поточної схеми оформлення, перевірка інтеграцій (1С, платіжні системи) | Технічне завдання з описом кроків |
| Проєктування | Проектуємо структуру кроків, логіку умовних переходів | Діаграма станів |
| Реалізація | Пишемо кастомний шаблон, додаємо кроки, налаштовуємо AJAX | Робочий компонент в /local |
| Тест | Перевіряємо на всіх сценаріях (самовивіз, кур'єр, оплата карткою/готівкою) | Чек-лист тестів |
| Деплой | Заливаємо на бойовий сервер, теговане кешування, документація | Інструкція з експлуатації |
Терміни та гарантії
Налаштування на базі стандартного компонента — 1–3 робочих дні. Додавання нестандартних кроків — 2–5 днів. Вартість налаштування визначається після аналізу обсягу робіт та фіксується в договорі. Наші клієнти економлять до 40% часу на доопрацюваннях порівняно з самостійною кастомізацією. На всі роботи даємо гарантію 1 рік. Команда — сертифікований партнер 1С-Бітрікс з досвідом більше 10 років та більше 50 реалізованих інтернет-магазинів. Використовуємо тільки ліцензійне ПЗ.
Типові технічні прорахунки при кастомізації
- Шаблон не скопійовано в
/local— при оновленні ядра зміни зникнуть. - Новий крок не додано в
orderAjax.steps— кнопка «Далі» не з'являється. - Не оброблено подію
onSaleOrderAjaxStepChangeдля умовного переходу — користувач застрягає на кроці. - Не враховано фіскалізацію (54-ФЗ) при зміні кроків — чеки не проходять. Налаштовуємо передачу даних на АТОЛ Онлайн або аналоги.
Перед початком робіт перевіряємо відповідність вимогам Wikipedia: 1С-Бітрікс та AJAX.
Зв'яжіться з нами — оцінимо проєкт за 1 день. Отримайте консультацію та дорожню карту. Напишіть нам — ми налаштуємо покрокове оформлення замовлення під ваші завдання.