Настройка одностраничного оформления заказа (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 СДЭК медленно отвечает) — пользователь видит крутящийся лоадер. Это нормально, но стоит добавить таймаут и кеширование расчётов по коду города и весу корзины.
Типичные проблемы настройки 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 дня.