Настройка оформления заказа 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С и интернет-магазинами.

Как настройка корзины 1С-Битрикс решает проблему потери конверсии

Мы занимаемся настройкой корзины и оформления заказа на 1С-Битрикс с 2013 года. За это время столкнулись с типовой болью: штатный sale.order.ajax теряет на каждом шаге 10–15% покупателей. Три шага — и треть тех, кто уже добавил товар, уходит. Не потому что передумали — интерфейс спотыкается.

sale.order.ajax выдаёт 500-ку, если не настроен хотя бы один обработчик доставки. Виснет на 15 секунд при расчёте СДЭК — запрос синхронный, без таймаута. Требует ИНН у физлица, потому что свойство не разделено по типу плательщика. Каждый такой кейс — прямые потери, которые система не компенсирует.

Наш опыт (более 10 лет, 300+ проектов, сертифицированные специалисты) показывает: переделка чекаута с одним фокусом — конверсия — окупается за 1–2 месяца. Минимум шагов, максимум удобства, надёжная работа связок с платежами и доставкой.

Почему одношаговый чекаут увеличивает конверсию?

Все поля на одной странице. Логичная группировка, никаких лишних переходов:

• Контактные данные — имя, телефон, email. Три поля. Не пять, не десять, не «укажите дату рождения для программы лояльности».
• Доставка — выбрал город → увидел способы с ценами и сроками. AJAX-расчёт через API СДЭК, Boxberry, Почты России. Запросы параллельные, таймаут 3 секунды — если один API завис, остальные покажутся.
• Оплата — способы фильтруются по выбранной доставке. Наложенный платёж при самовывозе? Не показываем.
• Промокод — поле видно, проверка мгновенная, скидка отображается в итоге сразу.
• Итого — динамический пересчёт при любом изменении. Поменял количество → сумма → стоимость доставки → итого. Без перезагрузки.

Под капотом:

• Полный AJAX — ни одной перезагрузки. Компонент работает через Bitrix\Sale\Order::create() и REST, не через стандартный sale.order.ajax.
• Валидация в реальном времени: не «заполните поле правильно», а «номер телефона: +7 (__) --». Маска inputmask + серверная проверка.
• Сохранение данных при случайном уходе — sessionStorage хранит введённое, при возврате всё на месте.
• Автозаполнение адреса через DaData: начал вводить улицу → полный адрес с индексом, FIAS-кодом и координатами. Меньше ошибок на стороне курьерской.
• Поддержка свойств заказа по типу плательщика — физлицо видит одни поля, юрлицо — другие. Переключатель в форме.

Одношаговая форма даёт прирост конверсии в среднем на 15–20% по сравнению с многошаговой (согласно данным Statista, доля отказов на втором шаге достигает 40%). Источник: Statista, исследование чекаута в e-commerce.

Как восстановить брошенные корзины?

Сохранение. Авторизованные — корзина в b_sale_basket, доступна с любого устройства. Гости — cookie с TTL 30 дней. FUSER_ID привязан к cookie, корзина не пропадёт через час. Синхронизация: добавил с телефона, оформил с ноутбука — корзина единая.

Возврат. Email-серия: 3 письма. Через 1 час — напоминание. Через 24 часа — «ваш товар заканчивается». Через 72 часа — персональный промокод на 5–10%. Реализация через sale.basketcomponent + CEvent::Send() с отложенной отправкой через агенты. Push-уведомления через браузер — Notification API, подписка через сервис-воркер. Ретаргетинг — данные о корзине уходят в Яндекс.Директ через eCommerce-события.

Аналитика отказов. На каком шаге уходят? Если на выборе доставки — цена шокирует. Если на оплате — карта отклоняется, 3D-Secure не проходит. Ошибки платёжной системы ловим через коллбэки ЮKassa/CloudPayments и пишем в лог — видим конкретный процент отказов по каждой причине. Гарантируем возврат 15–20% пользователей, оформивших корзину и покинувших сайт.

Гостевой заказ: убить обязательную регистрацию

«Хочу купить USB-кабель за 300 рублей, а меня просят придумать пароль из 8 символов с заглавной буквой и спецсимволом». Обязательная регистрация убивает 25–30% конверсии на мелких заказах.

• Покупка без аккаунта — оформляем через CSaleUser::GetAnonymousUserID() или создаём пользователя автоматически с рандомным паролем.
• После оформления — письмо с данными для входа. Хочет — активирует аккаунт, не хочет — и так получит заказ.
• Повторный визит — определяем по email или телефону, привязываем к существующему аккаунту.
• Авторизация прямо в чекауте: SMS-код вместо пароля — через Bitrix\Main\Authentication\ShortCode или интеграцию с SMS-гейтом.

Кросс-селл: допродажи, которые не раздражают

В корзине

Рекомендации на основе реальных данных из b_sale_basket — «с этим товаром покупали» на базе ассоциативных правил, а не рандома. Привязка через свойство инфоблока PROPERTY_ACCESSORIES. Оптовая мотивация: «Возьмите 3 — сэкономьте 15%» — реализуется через правила корзины в b_sale_discount. Порог бесплатной доставки: «Добавьте на 500 руб. — доставка бесплатно». Простой виджет, но увеличивает средний чек на 10–20%.

Управление через админку

Менеджер привязывает рекомендуемые товары вручную или включает автоматические алгоритмы. Правила отображения: категория, диапазон цен, наличие. A/B-тестирование разных стратегий — без разработчика.

Промокоды: правильная реализация

UX промокода:

• Поле видно, но не кричит — не отвлекает тех, у кого кода нет.
• Мгновенная проверка: «Промокод истёк» / «Минимальная сумма 3000₽» — а не «Error 422».
• Скидка видна в итоговом расчёте отдельной строкой.
• Можно убрать промокод и применить другой.

UX-оптимизация: мелочи, которые решают

Десктоп:

• Прогресс-бар — пользователь видит, где он.
• Умные дефолты — самый популярный способ доставки уже выбран (определяем по статистике b_sale_order).
• Минимум обязательных полей — только то, без чего нельзя отправить заказ. Отчество? Необязательно. Комментарий? Необязательно.
• Пересчёт без лоадеров на 5 секунд — debounce 300ms на AJAX-запросах.

Мобильные:

• Крупные кнопки — палец не промахивается. min-height: 48px по гайдам Google.
• Правильные типы клавиатуры: type="tel" для телефона, inputmode="numeric" для количества.
• Кнопка «Оформить» зафиксирована внизу — position: sticky.
• Сворачиваемые секции — экранное пространство на 375px дорого.

Обработка ошибок:

• «Проверьте номер карты» вместо «Payment processing error».
• Автопрокрутка к первой ошибке — scrollIntoView({ behavior: 'smooth' }).
• «Товар закончился» — обрабатываем без потери заполненных данных. Предлагаем аналог или убираем с пересчётом.

Интеграции

• DaData — адрес, ФИО, ИНН. Подсказки по мере ввода, валидация ФИАС.
• Яндекс.Карты — выбор ПВЗ на карте, геолокация для определения города.
• СДЭК, Boxberry, Почта России — API-расчёт стоимости и сроков в реальном времени.
• ЮKassa, CloudPayments, Тинькофф — приём платежей, рекуррентные списания, холдирование.
• CRM — заказ автоматически уходит в Битрикс24, создаётся сделка с привязкой к контакту.
• Склад — проверка остатков через CCatalogStoreProduct::GetList() в реальном времени.

Подробнее о технологиях можно прочитать в Wikipedia: Корзина (электронная коммерция) и Википедия: Одношаговый заказ.

// Псевдокод для параллельных запросов
$promises = [];
foreach ($tariffs as $tariff) {
    $promises[] = async(function() use ($tariff, $basket) {
        return $tariff->calculate($basket);
    });
}
$results = awaitAll($promises, 3000);

Что входит в работу

• Анализ текущего чекаута и выявление узких мест (аудит конверсии, логов, ошибок).
• Проектирование UX: прототипирование одношаговой формы, согласование с заказчиком.
• Разработка компонента чекаута на основе Bitrix\Sale\Order + REST, с заменой sale.order.ajax.
• Интеграция с платёжными (ЮKassa, CloudPayments, Тинькофф) и логистическими API (СДЭК, Boxberry, Почта России).
• Настройка промокодов, кросс-селла, брошенных корзин.
• Тестирование на реальных сценариях: десктоп, мобильные, планшеты.
• Передача документации (описание API, инструкции для менеджеров, доступы).
• Обучение сотрудников работе с новой корзиной.
• Пост-релизная поддержка — 2 недели мониторинга и правок.

Сроки

Свяжитесь с нами для обсуждения вашего проекта и получите консультацию по конкретным задачам. Закажите аудит корзины уже сегодня — увидите, сколько конверсии теряется на каждом шаге. Увеличение конверсии чекаута на 1–2% при стабильном трафике — это рост выручки без роста рекламного бюджета. Самый быстрый ROI в e-commerce.