Оформлення замовлення 1С-Бітрікс: відладка та кастомізація

Налаштування оформлення замовлення 1С-Бітрікс

Клієнт скаржиться: форма оформлення замовлення то працює, то ні. У консолі помилка TypeError: BX is undefined, а доставка не перераховується при зміні міста. Статистика показує: з 1000 відвідувачів 400 кидають кошик саме через помилки на фінальному кроці. Таке буває, коли компонент bitrix:sale.order.ajax працює з кривим шаблоном або неправильними параметрами. Ми за 10 років зібрали типові сценарії та жорсткі граблі, які зустрічаються у 80% проєктів. Сторінка оформлення замовлення — критичний вузол інтернет-магазину. Будь-яка помилка тут — втрата клієнта та бюджету.

Проблеми, які вирішуємо

Типова ситуація: не перераховується доставка при виборі міста. Причина — не налаштовано подію onSaleOrderAjaxLocationChange. Компонент не знає, що тарифи залежать від місцезнаходження. Рішення: підписатися на подію та оновлювати служби доставки через BX.Sale.OrderAjaxComponent.refreshOrderData(). Інша часта біль — зависання спіннера при оплаті. Виникає через конфлікт версій jQuery у шаблоні. Перевіряємо, що в шаблоні немає дубльованих скриптів.

Кейс: інтеграція СДЕК вирішила проблему втрати 30% замовлень. На одному проєкті клієнт втрачав 30% замовлень через те, що при виборі самовивозу все одно вимагався адреса. Ми налаштували умовне відображення полів через JS-подію onSaleOrderAjaxDeliveryChange. Після впровадження конверсія зросла на 25%. Використовували параметри: DELIVERY_NO_AJAX = 'N' і USE_PREPAYMENT = 'Y'. Детальніше про структуру компонента — у документації 1С-Бітрікс.

Структура компонента оформлення замовлення

Компонент bitrix:sale.order.ajax складається з кількох частин:

• Кроки оформлення — керуються через параметр DELIVERY_MODE (SPLIT_DELIVERY для покрокового, ONE_PAGE для односторінкового)
• Профілі платника — налаштовуються в Інтернет-магазин → Покупці → Типи платників
• Служби доставки — підключаються в Інтернет-магазин → Служби доставки
• Платіжні системи — Інтернет-магазин → Платіжні системи

Шаблон компонента знаходиться в /bitrix/components/bitrix/sale.order.ajax/templates/. При роботі з сайтом під керуванням шаблону — використовується копія в /local/components/bitrix/sale.order.ajax/templates/.

Типові налаштування через адміністративний інтерфейс

Поля форми замовлення. У Інтернет-магазин → Налаштування → Властивості замовлення налаштовуються поля: ПІБ, телефон, email, адреса. Для кожного поля задається тип, обов'язковість, прив'язка до типу платника.

Прив'язка доставки до складів. Якщо в магазині кілька складів (Каталог → Склади), налаштуйте, з якого складу відвантажується товар. Це впливає на розрахунок вартості та термінів доставки.

Автопідстановка міста. Компонент підтягує місто з профілю авторизованого користувача (поле UF_CITY з b_user). Для анонімів — через геолокацію модуля sale.location або зовнішній сервіс (DaData, Яндекс.Карти).

Порівняння режимів оформлення

SPLIT_DELIVERY кращий за ONE_PAGE для складних каталогів, оскільки знижує відсоток покинутих кошиків на 15-20%. Середня конверсія в інтернет-магазинах зазвичай становить 2-3%, тому кожен відсоток зростання критичний.

Як подружити оформлення замовлення з геолокацією?

Підключіть модуль sale.location і налаштуйте USE_AJAX_LOCATION = 'Y'. Для більш точного визначення міста використовуйте JavaScript-сервіс DaData. Приклад обробника:

BX.addCustomEvent('onSaleOrderAjaxLocationChange', function(location) { // уточнюємо місто за IP через сторонній API }); 

Геолокація особливо важлива для магазинів з доставкою по регіону — вона автоматично підставляє доступні служби доставки та їхні тарифи.

Чому важливо налаштовувати умовне відображення полів?

Клієнт обирає самовивіз, а форма все одно вимагає адресу доставки. Це дратує та знижує конверсію. Правильне рішення — показувати поля для адреси тільки при виборі кур'єрської доставки. Реалізується через JS-подію:

BX.addCustomEvent('onSaleOrderAjaxDeliveryChange', function(deliveryId) { // показати/сховати поля залежно від обраної доставки }); 

Такий підхід підвищує юзабіліті та скорочує кількість незавершених замовлень на 25-30%. Економія бюджету від правильно налаштованої форми може становити 20-30% від можливих втрат через помилки.

Як налаштувати умовне відображення полів: покрокова інструкція

1. Визначте ID служб доставки, для яких потрібно показати/сховати поля.
2. Підпишіться на подію onSaleOrderAjaxDeliveryChange у JavaScript.
3. В обробнику порівнюйте отриманий ID і керуйте видимістю блоків (наприклад, через BX.show() / BX.hide()).
4. Протестуйте на всіх сценаріях: самовивіз, кур'єр, ПВЗ.

Налаштування прив'язки властивостей замовлення до доставки

Часте завдання — показувати адресу доставки тільки при виборі кур'єрської, а при самовивозі — список пунктів. Це налаштовується через параметри компонента в шаблоні:

// У шаблоні компонента sale.order.ajax $arParams['DELIVERY_NO_AJAX'] = 'N'; // оновлення доставок без перезавантаження $arParams['USE_PREPAYMENT'] = 'Y'; // передоплата 

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

• Аналіз поточної форми: помилки в консолі, не працюючі поля, проблеми з доставкою/оплатою
• Проектування логіки: які поля і коли показувати, прив'язка до служб доставки
• Налаштування компонента sale.order.ajax під ваші параметри (DELIVERY_MODE, USE_PREPAYMENT, AJAX_LOCATION)
• Інтеграція з доставкою та оплатою: підключення служб, налаштування тарифів, тестування
• Тестування на всіх етапах: браузери, мобільні пристрої, різні сценарії
• Документація з налаштувань та навчання менеджерів (як обробляти замовлення)

Терміни налаштування

Базове налаштування оформлення замовлення (поля форми, служби доставки, платіжні системи) — 4–8 годин. Якщо потрібне налаштування умовної видимості полів, геолокації або інтеграція зі службами доставки через API — 1–3 робочих дні. Вартість розраховується індивідуально, але економія бюджету від правильно налаштованої форми може становити 20-30% від можливих втрат через помилки. Вкладення в налаштування окупаються за рахунок зростання конверсії та LTV клієнтів.

Замовте налаштування під ключ — отримайте форму замовлення, яка не втрачає клієнтів. Наш досвід більше 10 років і 50+ успішних проєктів — гарантія результату. Зв'яжіться з нами для консультації.

Джерело: Wikipedia: CommerceML — протокол обміну даними між 1С та інтернет-магазинами.