RU EN

Корзина и оформление заказа на одной странице в 1С-Битрикс

8 мин чтения
Стандартная схема оформления заказа в 1С-Битрикс обычно разделяет корзину и сам процесс оформления заказа. Пользователь сначала работает с корзиной, а затем переходит к отдельной форме, где выбирает доставку, оплату и указывает контактные данные.

Но в некоторых проектах удобнее разместить всё на одной странице: список товаров, изменение количества, купоны, доставку, оплату и контактные данные.

При этом важно не изменять файлы ядра Битрикс, чтобы обновления системы не перезаписали доработки.

В этой статье разберём вариант, при котором используются стандартные компоненты 1С-Битрикс, но их шаблоны переопределяются внутри шаблона сайта.

Что необходимо сделать

В результате хотим получить одну страницу оформления заказа, на которой:

  • отображается корзина;
  • можно изменять количество товаров;
  • можно удалять товары;
  • работают купоны;
  • сразу отображается оформление заказа;
  • нет повторного списка товаров;
  • не выводится блок подарков;
  • все разделы оформления заказа раскрыты сразу;
  • не требуется изменять стандартные компоненты в /bitrix/components/.

Размещаем корзину и оформление заказа на одной странице

Например, на странице:


/personal/cart/
размещаем два стандартных компонента:

  • bitrix:sale.basket.basket — корзина;
  • bitrix:sale.order.ajax — оформление заказа.
Для корзины используем отдельный шаблон, например:


basket
Для оформления заказа:


order
Компонент корзины отвечает за:

  • список товаров;
  • изменение количества;
  • удаление позиций;
  • работу с купонами.
Компонент оформления заказа отвечает за:

  • данные покупателя;
  • регион;
  • доставку;
  • оплату;
  • итоговую стоимость;
  • создание заказа.

Параметр BASKET_WITH_ORDER_INTEGRATION

Для совместной работы корзины и оформления заказа используется параметр:


BASKET_WITH_ORDER_INTEGRATION
При значении:


Y
шаблон корзины понимает, что рядом на странице находится компонент оформления заказа.

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

Параметр можно передать непосредственно в вызове компонента:


"BASKET_WITH_ORDER_INTEGRATION" => "Y",
Однако если параметр отсутствует в визуальных настройках шаблона компонента, при дальнейшем редактировании страницы через административную панель его легко потерять.

Поэтому удобнее добавить параметр в настройки самого шаблона корзины.

Добавляем BASKET_WITH_ORDER_INTEGRATION в .parameters.php

Файл располагается в шаблоне сайта:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/basket/.parameters.php
Добавляем параметр:


$arTemplateParameters["BASKET_WITH_ORDER_INTEGRATION"] = [
    "PARENT" => "BASE",
    "NAME" => GetMessage("SBB_PARAM_BASKET_WITH_ORDER_INTEGRATION"),
    "TYPE" => "CHECKBOX",
    "DEFAULT" => "Y",
    "REFRESH" => "N",
];
Теперь этот параметр можно будет контролировать через настройки компонента.

Для названия параметра добавляем языковую фразу в файл:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/basket/lang/ru/.parameters.php
Например:


$MESS["SBB_PARAM_BASKET_WITH_ORDER_INTEGRATION"] =
    "Интеграция корзины с оформлением заказа";
При этом сам стандартный компонент Битрикс не изменяется.

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

Удаляем блок подарков из корзины

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

В таком случае из собственного шаблона корзины можно удалить код, связанный с:


USE_GIFTS
В частности, можно убрать:

  • инициализацию параметров подарков;
  • вывод компонента bitrix:sale.products.gift.basket;
  • блоки подарков в позициях TOP и BOTTOM;
  • неиспользуемые языковые фразы;
  • CSS-стили, относящиеся только к подаркам.
Так шаблон становится заметно компактнее, а неиспользуемый CSS больше не загружается на странице.

Убираем повторный список товаров из sale.order.ajax

После размещения корзины и оформления заказа на одной странице возникает ещё одна проблема.

Компонент sale.basket.basket уже показывает товары, но sale.order.ajax по умолчанию также выводит собственный список позиций заказа.

В результате пользователь видит товары дважды.

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

Из template.php убираются блоки, связанные с выводом:


BASKET ITEMS BLOCK
и логика параметра:


BASKET_POSITION
Также можно удалить больше не используемые параметры:

  • BASKET_POSITION;
  • SHOW_BASKET_HEADERS;
  • PRODUCT_COLUMNS_HIDDEN;
  • другие параметры отображения списка товаров, которые больше не используются.
Из CSS после этого можно удалить стили таблицы товаров, SKU-блоков и элементов, которые больше не присутствуют в шаблоне.

Важно оставить bx-soa-basket

Полностью удалять контейнер корзины из шаблона sale.order.ajax нельзя.

JavaScript стандартного оформления заказа ожидает наличие элемента:


#bx-soa-basket
Если его удалить полностью, код order_ajax.js может обращаться к отсутствующему DOM-элементу и вызвать ошибку.

Поэтому сам вывод товаров можно убрать, но совместимый скрытый контейнер необходимо оставить.

Это позволяет сохранить работу стандартного JavaScript компонента без повторного списка товаров.

Раскрываем все блоки оформления заказа сразу

По умолчанию компонент sale.order.ajax работает как пошаговая форма.

Пользователь последовательно проходит блоки:

  1. Регион.
  2. Доставка.
  3. Оплата.
  4. Контактные данные.
  5. Подтверждение заказа.
Между этапами используются кнопки «Назад», «Далее» и ссылки редактирования.

Если оформление заказа должно находиться целиком на одной странице, такую механику можно изменить в собственной копии файла:


order_ajax.js

Какие функции order_ajax.js необходимо изменить

В описываемом варианте изменения затрагивают четыре функции.

  • editSection — секция всегда считается активной;
  • changeVisibleContent — все секции остаются раскрытыми;
  • changeVisibleSection — содержимое секций всегда отображается;
  • getBlockFooter — кнопки «Назад» и «Далее» не выводятся.
Дополнительно скрываются ссылки «Редактировать», а основная кнопка оформления заказа остаётся доступной на странице.

После этого форма перестаёт выглядеть как пошаговый мастер и становится обычной длинной формой оформления.

Если стандартное пошаговое поведение требуется сохранить, этот этап можно полностью пропустить.

Удаляем лишние стили

После удаления HTML-блоков часть стандартного CSS становится не нужна.

Можно удалить стили, относящиеся исключительно к:

  • подаркам;
  • повторной таблице товаров;
  • SKU-блокам внутри оформления заказа;
  • кнопкам пошаговой навигации;
  • ссылкам редактирования этапов;
  • анимациям переключения шагов.
Это необязательный этап с точки зрения функциональности, но он делает шаблон чище и уменьшает количество потенциальных конфликтов стилей.

Структура изменённых файлов

Все доработки находятся внутри шаблона сайта.

Пример структуры:

Файл Изменения
sale.basket.basket/basket/.parameters.php Добавлен параметр BASKET_WITH_ORDER_INTEGRATION
sale.basket.basket/basket/lang/ru/.parameters.php Добавлена языковая фраза параметра
sale.basket.basket/basket/template.php Удалён блок подарков и настроена интеграция с оформлением заказа
sale.basket.basket/basket/lang/ru/template.php Удалены неиспользуемые языковые фразы подарков
sale.basket.basket/basket/lang/en/template.php Удалены неиспользуемые языковые фразы подарков
sale.basket.basket/basket/style.css Удалены стили блока подарков
sale.order.ajax/order/template.php Удалён повторный список товаров, сохранён контейнер для JS-совместимости
sale.order.ajax/order/.parameters.php Удалены параметры, связанные с повторным выводом корзины
sale.order.ajax/order/order_ajax.js Все секции оформления заказа раскрыты одновременно
sale.order.ajax/order/style.css Удалены неиспользуемые стили товаров и пошаговой навигации
personal/cart/index.php На странице размещены оба компонента и очищены лишние параметры

Где должны находиться шаблоны

Все файлы компонентов должны находиться внутри собственного шаблона сайта:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/
Например:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/basket/
/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.order.ajax/order/
Файлы из:


/bitrix/components/
изменять не нужно.

Это стандартный механизм переопределения шаблонов компонентов в 1С-Битрикс.

Почему не стоит изменять ядро

Если внести изменения непосредственно в стандартный компонент, например в:


/bitrix/components/bitrix/sale.order.ajax/
или:


/bitrix/components/bitrix/sale.basket.basket/
они могут быть перезаписаны при обновлении продукта.

При использовании собственного шаблона в директории /local/ обновляется ядро Битрикс, а ваши шаблоны остаются отдельными.

Основные принципы реализации

В результате доработка строится на нескольких принципах:

  • стандартные компоненты Битрикс не изменяются;
  • все изменения находятся в /local/templates/;
  • корзина и оформление заказа работают на одной странице;
  • для их интеграции используется BASKET_WITH_ORDER_INTEGRATION;
  • повторный список товаров удаляется;
  • для совместимости сохраняется контейнер #bx-soa-basket;
  • неиспользуемые подарки и стили удаляются;
  • при необходимости все секции оформления раскрываются сразу.

Порядок внедрения

Если выполнять доработку самостоятельно, последовательность может быть следующей:

  1. Скопировать шаблон sale.basket.basket в шаблон сайта.
  2. Скопировать шаблон sale.order.ajax в шаблон сайта.
  3. Разместить оба компонента на странице корзины.
  4. Включить BASKET_WITH_ORDER_INTEGRATION.
  5. Добавить этот параметр в .parameters.php шаблона корзины.
  6. Удалить неиспользуемый блок подарков.
  7. Удалить повторный список товаров из sale.order.ajax.
  8. Оставить контейнер #bx-soa-basket для совместимости с JavaScript.
  9. При необходимости изменить order_ajax.js и раскрыть все секции.
  10. Удалить неиспользуемые CSS-стили.
  11. Проверить корзину, купоны, доставку, оплату и создание заказа.

Что необходимо проверить после доработки

После изменений стоит проверить весь сценарий оформления заказа:

  • изменение количества товара;
  • удаление товара;
  • пересчёт общей суммы;
  • работу купонов;
  • выбор региона;
  • пересчёт доставки;
  • смену службы доставки;
  • выбор платёжной системы;
  • обязательные свойства заказа;
  • пересчёт итоговой стоимости;
  • создание заказа;
  • работу страницы после AJAX-перерисовки блоков.
Особенно важно проверить JavaScript после удаления стандартных HTML-блоков. Компонент sale.order.ajax содержит достаточно много клиентской логики, которая может обращаться к элементам шаблона по ID и классам.

Перед установкой сделайте резервную копию

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

Сначала необходимо сравнить изменения и перенести нужные участки вручную.

Перед началом работы рекомендуется сохранить резервную копию текущих шаблонов:


/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.basket.basket/
/local/templates/ВАШ_ШАБЛОН/components/bitrix/sale.order.ajax/

Итог

Объединить корзину и оформление заказа на одной странице в 1С-Битрикс можно без изменения ядра.

Для этого достаточно использовать стандартные компоненты:

  • bitrix:sale.basket.basket;
  • bitrix:sale.order.ajax.
а все необходимые изменения внести в их копии внутри шаблона сайта.


Параметр BASKET_WITH_ORDER_INTEGRATION связывает корзину с оформлением заказа, а изменение шаблона позволяет убрать повторяющиеся элементы и при необходимости превратить пошаговое оформление в единую форму.


В результате пользователь получает одну страницу, на которой можно проверить состав корзины и сразу оформить заказ, а стандартные файлы 1С-Битрикс остаются нетронутыми.
Вернуться к блогу