Оформление заказа: настройка sale.order.ajax

Оформление заказа — страница, где решается, купит покупатель или закроет вкладку. Каждый лишний шаг, каждая перезагрузка страницы и каждое непонятное поле снижают долю тех, кто доходит до кнопки «Оформить».

Компонент sale.order.ajax собирает всю форму оформления на одной странице и обрабатывает переходы между шагами без перезагрузки. Разберём его устройство, настройку способов доставки и оплаты, и то, почему это современная замена устаревшему пошаговому мастеру заказа.

Чем отличается от старого компонента

До появления sale.order.ajax оформление строилось на компоненте sale.order.wizard — с явными шагами и перезагрузкой страницы между ними. Новый компонент строит ту же логику на одной странице, переключая блоки через JavaScript.

Для нового проекта выбор однозначен в пользу sale.order.ajax. Переделывать существующий сайт с мастера на AJAX-версию стоит, если конверсия оформления заметно ниже ожидаемой, — сама по себе смена компонента не решит проблем с логикой доставки и оплаты, но уберёт лишние перезагрузки.

Базовое подключение

<$APPLICATION->IncludeComponent(
    'bitrix:sale.order.ajax',
    'main',
    [
        'PATH_TO_BASKET'     => '/personal/basket/',
        'PATH_TO_PERSONAL'   => '/personal/',
        'PATH_TO_ORDER'      => '/personal/order/',
        'ALLOW_AUTO_REGISTER' => 'Y',
        'ALLOW_GUEST_REGISTER' => 'Y',
        'DELIVERY_NO_AJAX'   => 'N',
        'PROP_1' => ['NAME', 'PHONE', 'EMAIL'],
        'TEMPLATE_LOCATION'  => 'popup',
        'DISABLE_BASKET_REDIRECT' => 'N',
    ]
);?>

Ключевые параметры и их влияние на поведение:

Оформление без регистрации

Обязательная регистрация перед покупкой — один из самых надёжных способов снизить конверсию. Параметр ALLOW_GUEST_REGISTER позволяет оформить заказ, указав только контактные данные, а учётную запись создать автоматически в фоне, если включён ALLOW_AUTO_REGISTER.

Покупатель при этом получает письмо с данными для входа уже после оформления, а не сталкивается с формой регистрации до того, как решил купить. Это тот же принцип, что и с формой регистрации на сайте в целом — минимум обязательных полей на входе, остальное потом.

Способы доставки и оплаты

Компонент сам подгружает доступные способы доставки и оплаты, настроенные в административной части, и пересчитывает стоимость доставки при смене адреса без перезагрузки страницы.

Порядок настройки, при котором форма ведёт себя предсказуемо:

1. Настройте службы доставки со своими условиями расчёта стоимости.
2. Настройте платёжные системы и привяжите их к нужным способам доставки.
3. Проверьте, что для каждой комбинации региона и способа доставки есть хотя бы один вариант оплаты — иначе покупатель упрётся в тупик посреди формы.
4. Задайте понятные названия — они видны покупателю прямо в форме.

Подключение конкретной платёжной системы, например ЮKassa, требует ещё и настройки уведомлений об оплате — этот процесс подробно разобран в статье ЮKassa в Битрикс: подключение и настройка.

Свойства заказа в форме

Поля формы — это свойства заказа, настроенные в административной части. Параметр PROP_1 и последующие определяют, какие свойства показываются на каком логическом шаге компонента.

Разумный минимум для первого шага — имя и способ связи. Адрес и уточняющие детали запрашиваются после выбора способа доставки, когда они уже нужны предметно, а не заранее.

Обработка событий заказа

После успешного оформления полезно повесить собственную логику: отправить дополнительное уведомление, передать данные во внешнюю систему, зафиксировать цель в системе аналитики. Делается это через события модуля продаж, а не правкой самого компонента:

<?php
AddEventHandler('sale', 'OnSaleOrderSaved', 'onOrderSaved');

function onOrderSaved($event)
{
    $order = $event->getParameter('ENTITY');

    if ($order->isNew()) {
        // ... своя логика для нового заказа ...
    }
}

Такой подход переживает обновление ядра и не требует правок в кастомизированном шаблоне компонента при каждой доработке.

Проверка перед запуском

1. Пройдите оформление гостем, без регистрации.
2. Пройдите оформление авторизованным пользователем — данные должны подставляться сами.
3. Смените способ доставки и убедитесь, что стоимость пересчиталась без перезагрузки.
4. Проверьте комбинацию региона, для которого доступен только один способ доставки.
5. Дойдите до оплаты и убедитесь, что заказ действительно создался в системе.
6. Проверьте письмо с подтверждением заказа.
7. Пройдите весь путь с мобильного устройства.

Частые ошибки

• Регистрация обязательна. Заметная часть посетителей уходит, не дойдя до оплаты.
• Для части регионов нет доступного способа оплаты. Покупатель упирается в тупик и не может завершить заказ.
• Слишком много полей на первом шаге. Форма выглядит длинной ещё до того, как покупатель понял, сколько будет стоить доставка.
• Своя логика встроена прямо в шаблон компонента. Ломается при обновлении, вместо событий модуля продаж.
• Не проверена работа на мобильном. Большая часть трафика интернет-магазинов приходит с телефонов.

Итог

sale.order.ajax — современный способ собрать оформление заказа на одной странице без перезагрузок между шагами. Ключевые решения, определяющие конверсию: разрешить оформление без обязательной регистрации, минимизировать число полей на первом экране и убедиться, что для каждой комбинации доставки и региона доступен хотя бы один способ оплаты.

Дополнительную логику — уведомления, интеграции, аналитику — правильнее вешать через события модуля продаж, а не через правки шаблона компонента: это переживает и обновления, и последующие доработки формы.