Налаштування односторінкового оформлення замовлення (checkout) 1С-Бітрікс
Односторінковий checkout — режим ONE_PAGE компонента bitrix:sale.order.ajax. Усі блоки (дані покупця, доставка, оплата) відображаються на одній сторінці та оновлюються через AJAX при зміні значень. Запит на перехід до цього формату зазвичай виникає після замірів: покроковий checkout із 3–4 сторінками збільшує відтік на кожному кроці, односторінковий скорочує шлях від «Оформити» до «Оплатити».
Підключення режиму ONE_PAGE
У параметрах компонента на сторінці оформлення замовлення:
$APPLICATION->IncludeComponent(
'bitrix:sale.order.ajax',
'',
[
'DELIVERY_MODE' => 'ONE_PAGE',
'SHOW_DELIVERY_PICTURE' => 'Y',
'SHOW_DELIVERY_DESCRIPTION' => 'N',
'PAY_FROM_ACCOUNT' => 'N',
'SHOW_VAT' => 'N',
]
);
У режимі ONE_PAGE компонент при зміні будь-якого поля (зміна міста, вибір служби доставки) відправляє AJAX-запит і оновлює залежні блоки — вартість доставки, доступні платіжні системи.
Налаштування AJAX-оновлення блоків
У шаблоні односторінкового checkout за AJAX-оновлення відповідає об'єкт orderAjax — він ініціалізується у order_ajax.php шаблону. При зміні поля «Місто» викликається orderAjax.updateDelivery(), яка:
- Запитує доступні служби доставки для вказаного міста через
\Bitrix\Sale\Delivery\Services\Manager::getRestrictedObjectsList() - Розраховує вартість кожної через
\Bitrix\Sale\Delivery\Services\Base::calculate() - Оновлює блок доставки без перезавантаження сторінки
Якщо розрахунок займає більше 1–2 секунд (наприклад, зовнішній API CDEK повільно відповідає) — користувач бачить завантажувач. Це нормально, але варто додати таймаут і кешування розрахунків за кодом міста та вагою кошика.
Типові проблеми налаштування ONE_PAGE
Конфлікт із SEO-плагінами. Односторінковий checkout завантажує блоки динамічно, тому деякі SEO-інструменти не бачать контент сторінки і додають зайві мета-теги. Рішення: виключити сторінку checkout з індексації через robots.txt і <meta name="robots" content="noindex">.
Втрата даних при F5. При перезавантаженні сторінки на односторінковому checkout стандартний компонент не відновлює введені дані. Для UX це критично. Рішення — збереження даних форми в localStorage при кожній зміні поля та відновлення при завантаженні сторінки через JS.
Некоректна робота з кількома відвантаженнями. Якщо в кошику товари з різними умовами доставки, ONE_PAGE некоректно відображає список служб. Це обмеження стандартного компонента — для таких випадків потрібна кастомна розробка.
Строки налаштування
Перемикання на режим ONE_PAGE і налаштування шаблону під дизайн — 1–2 робочі дні. Додавання збереження в localStorage, кешування розрахунків доставки та доробки AJAX-логіки — 2–4 дні.