SOK: Оформление заказа с корзиной

Страница оформления заказа уровня крупных маркетплейсов — для любого магазина на Битрикс
Мы изучили, как устроено оформление заказа на ведущих торговых площадках таких как OZON, Wildberries, ЯндексМаркет, ВсеИнструменты и др., и собрали лучшие практики в одном модуле для Битрикс. Современный интерфейс, полное управление корзиной на одном экране, гибкая настройка без правки кода — и всё это на Vue 3 с архитектурой, которую легко расширять под задачи конкретного проекта.

Попробуйте бесплатно — 7 дней демо-периода.

Покупатель не уходит на отдельную страницу. Всё — здесь:

• изменить количество товара
  
• удалить позицию
  
• отложить товар — снять галочку, чтобы не включать позицию в этот заказ, но не потерять её из виду
  

Итог пересчитывается мгновенно. Именно так это работает на крупнейших площадках страны — и теперь так же работает в вашем магазине на Битрикс.

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

Карта Яндекса с пунктами самовывоза, поиск ближайшего ПВЗ, постраничный список. Для крупногабаритных или индивидуальных доставок — вместо цены показывается текст («Рассчитывается отдельно»). Нулевая стоимость заменяется на «Бесплатно» или строка скрывается совсем. Ограничения доставки по остаткам на складе и по свойствам товара настраиваются в стандартном интерфейсе служб доставки Битрикс.

Цели Яндекс.Метрики на каждый шаг покупателя и Enhanced Ecommerce для Google Analytics настраиваются в параметрах компонента. Идентификаторы целей по умолчанию совпадают с типовыми — если цели уже созданы в Метрике, менять ничего не нужно.

Модуль построен на Vue 3 с чистой компонентной структурой. Он не просто меняет внешний вид — он расширяет бизнес-логику стандартного компонента: собственные ограничения служб доставки, провайдеры бизнес-значений для автозаполнения служебных свойств заказа, изоляция по сайтам на мультисайтовых проектах.

Функционал модуля будет расширяться. Выйдет подробная документация для разработчиков, которые захотят кастомизировать решение под нестандартные задачи.

Подробная инструкция — на вкладке установки и настройки решения.
Коротко:

1. Активировать купон в разделе «Marketplace» → «Обновление решений»
   
2. Установить решение «SOK: Оформление заказа»
   
3. В настройках модуля указать сайты, привязать группы свойств к блокам «Покупатель» и «Доставка»
   
4. Переключить шаблон компонента на sok_order_placement — в режиме правки или в коде страницы
   
5. Настроить цвета, подписи и цели аналитики в параметрах компонента
   

• 1С-Битрикс: Управление сайтом — редакция «Малый бизнес» и выше
  
• Для карты самовывоза — API-ключ Яндекс.Карт в настройках модуля «Управление структурой»
  
• Для аналитики — счётчик Яндекс.Метрики и/или Google Analytics на сайте
  

Введите полученный при покупке ключ в административной части сайта в разделе «Marketplace» → пункт меню «Обновление решений» → вкладка «Активация купона».

На вкладке «Список обновлений» появится решение «SOK:Оформление заказа» — выделите этот пункт галочкой и нажмите «Загрузить».

Затем на вкладке «Установка обновлений» вам будет предложено установить решение — нажмите кнопку «Установить».

Требования: начиная от редакции БУС «Малый бизнес».

После установки в разделе «Настройки» административной части в «Настройках модулей» появится пункт «sok.order.placement» (он же доступен через левое меню админки: «Модули SOK» → «Модуль Оформления заказа» → «Настройки модуля»).

Окно настроек разделено на две вкладки.

Базовые опции работы модуля.

• Для каких сайтов использовать модуль - мультивыбор сайтов из списка активных. Модуль будет вмешиваться в работу оформления заказа только на выбранных сайтах; на остальных оформление работает в стандартном режиме.(Внимание! Сайты для которых решение не будет использоваться не должны быть выбраны в данной настройке)

• Не рассчитывать доставку - мультивыбор из списка активных служб доставки. Для отмеченных служб в шаблоне не выводится цена, рассчитанная компонентом sale.order.ajax, - вместо неё подставляется текст из следующего поля. Удобно для случаев, когда стоимость согласуется менеджером (например крупногабаритные грузы, индивидуальный расчёт, доставка партнёрами).

• Текст для не рассчитываемой доставки  - строка, которая отображается вместо цены у служб из предыдущего списка, а также в итоговой строке доставки в боковой панели. Значение по умолчанию — «Рассчитывается отдельно».

• Группы свойств для данных покупателя  - мультивыбор групп свойств заказа (модуль sale, раздел Магазин → Настройки → Свойства заказа → Группы свойств). Свойства из выбранных групп будут отрисованы в блоке «Покупатель» на странице оформления.

• Группы свойств для данных доставки - аналогично, но для блока «Доставка»: выбранные группы свойств перенесутся туда (например адрес, дата/время доставки, пункт самовывоза и т.п.).

Группы свойств в списках сгруппированы по типам плательщика: рядом с названием группы в скобках указан тип плательщика, к которому она относится. Это позволяет на одном сайте использовать разные наборы свойств для физических и юридических лиц.

После изменения параметров нажмите «Сохранить» (или «Применить»).

Сопоставление «бизнес-смыслов» служебным свойствам заказа (отметка "Служебное" в свойстве заказа) - отдельный блок SOK_ORDER_PLACEMENT в системе бизнес-значений Битрикс.

• На вкладке отображается интерфейс для сопоставления свойств и их значений.

• Список для привязки значений свойств автоматически формируется из всех служебных свойств заказа (поле «Служебное» = «Да», активные) с разбиением по вкладкам типов плательщиков и сайтов.

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

  • Значение - статичная строка;
    
  • Свойство заказа - другое свойство этого же заказа;
    
  • Заказ - поле самого заказа (ID, сумма, валюта и т.п.);
    
  • Пользователь - стандартные поля пользователя;
    
  • Пользователь: UF-поля - пользовательские поля (UF_*) текущего пользователя; данный источник значений является кастомным.
    

• Сохранение выполняется через кнопку «Сохранить». Хранилище общее с штатным механизмом бизнес-значений Битрикса.

Если на сайте не установлен/не активен модуль sale или нет служебных свойств заказа, вместо интерфейса показывается ссылка-подсказка на стандартную страницу «Настройки бизнес-значений» (/bitrix/admin/sale_business_value.php).

Шаблон sok_order_placement подключается через стандартный компонент bitrix:sale.order.ajax на странице оформления заказа (обычно /personal/order/make/index.php, но может размещаться на любой другой странице):

<?$APPLICATION->IncludeComponent(
   "bitrix:sale.order.ajax",
   "sok_order_placement",
   array(),
   false
);?>

Если на сайте уже есть рабочая страница оформления заказа на стандартном шаблоне sale.order.ajax, достаточно сменить шаблон компонента на sok_order_placement в режиме правки.

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

• двойным щелчком по области компонента оформления заказа на странице;
  
• через пункт «Компоненты» в административном меню и в появившемся контекстном меню выбрать «SOK:Оформление заказа» (bitrix:sale.order.ajax, шаблон sok_order_placement).
  

Параметры шаблона sok_order_placement дополняют стандартные параметры bitrix:sale.order.ajax и сгруппированы по нескольким вкладкам в окне настройки компонента. Часть стандартных параметров компонента скрыта шаблоном - они используются с фиксированными значениями.

• Разрешить использование профилей покупателей (ALLOW_USER_PROFILES) — даёт авторизованному покупателю выбрать сохранённый профиль (адрес, контакты и т.п.) вместо повторного ввода. При включении становится доступным следующий параметр.
  
• Разрешить множество профилей покупателей (ALLOW_NEW_PROFILE) — разрешает покупателю создавать в личном кабинете несколько профилей и сохранять каждый новый заказ как отдельный профиль. Виден только если включён ALLOW_USER_PROFILES.
  
• Показывать блок авторизации для не зарегистрированного пользователя (SHOW_AUTH_BLOCK) — отображает на странице оформления блок входа/регистрации со ссылкой в личный кабинет (тексты блока настраиваются параметрами MESS_LOGIN_REGISTER_MSG, MESS_TRACK_ORDERS, MESS_LOGIN_REGISTER).
  
• Минимальная сумма для оформления заказа (MIN_SUMM_ORDER) — минимальная стоимость корзины, при которой кнопка оформления активна. При недоборе суммы пользователь увидит соответствующее предупреждение.
  
• Местоположение пользователя по умолчанию (USER_DEFAULT_LOCATION) — код локации Битрикса, который подставляется как местоположение по умолчанию, если пользователь не выбрал его явно (полезно вместе со SPOT_LOCATION_BY_GEOIP).
  
• Подключить jQuery (USE_JQUERY) — принудительно подключает ядро jQuery (CJSCore::Init('jquery3')). Включать только если на сайте есть сторонние скрипты, зависящие от jQuery.
  

Расположение и стилизация блоков:

• Расположение блока покупателя (PAYER_POSITION) — before (в начале) или after (в конце). По умолчанию — в начале.
  
• Расположение списка товаров (BASKET_POSITION) — before или after. По умолчанию — в конце.
  
• Тип отображения списка товаров (CART_VIEW_TYPE) — compact (компактная карточка) или full (увеличенная карточка). По умолчанию — compact.
  
• Показывать тип плательщика если он один (SHOW_ONE_PERSON_TYPE) — оставлять блок выбора типа плательщика, даже если активен только один тип. Удобно, чтобы блок не исчезал визуально.
  

Подписи и информация в блоках оплаты и доставки:

• Отображать названия в списке платежных систем (SHOW_PAY_SYSTEM_LIST_NAMES).
  
• Отображать название в блоке информации по платежной системе (SHOW_PAY_SYSTEM_INFO_NAME).
  
• Отображать названия в списке доставок (SHOW_DELIVERY_LIST_NAMES).
  
• Отображать название в блоке информации по доставке (SHOW_DELIVERY_INFO_NAME).
  
• Количество пунктов самовывоза на странице (PICKUPS_PER_PAGE) — пагинация списка ПВЗ. По умолчанию — 5.
  

Самовывоз и карты:

• Показывать карту в блоке свойств заказа (SHOW_MAP_IN_PROPS) — отрисовывать карту для свойств заказа с типом «адрес».
  
• Тип используемых карт (PICKUP_MAP_TYPE) — на данный момент доступен только Яндекс.Карты (yandex). API-ключ берётся из настроек модуля Управление структурой (yandex_map_api_key).
  

Стоимость доставки (поля раскрываются динамически):

• Показывать стоимость доставки если она равна 0 (SHOW_ZERO_DELIVERY_PRICE) — оставить строку «Доставка: 0» в итогах. По умолчанию — Y.
  
• Заменять стоимость доставки если она равна 0 (CHANGE_ZERO_DELIVERY_PRICE) — заменять «0» на собственный текст (виден только если SHOW_ZERO_DELIVERY_PRICE = Y).
  
• Текст замены стоимости доставки если она равна 0 (CHANGE_ZERO_DELIVERY_PRICE_TEXT) — собственно текст замены, по умолчанию «Бесплатно».
  

Купоны и заглушка:

• Отображать поля ввода купонов (SHOW_COUPONS) — глобальный флаг показа поля промокода в блоках корзины, доставки и оплаты.
  
• Путь к заглушке для пустого изображения (EMPTY_IMG_PATH) — путь к картинке-заглушке для товаров без изображения. По умолчанию — /local/templates/.default/components/bitrix/sale.order.ajax/sok_order_placement/images/no_photo.png.
  

Цвета и скругления (CSS-переменные шаблона):

• Основной цвет шаблона (COLOR_PRIMARY) — colorpicker, по умолчанию #1ab4e6.
  
• Цвет фона блоков (BLOCKS_BACKGROUND) — colorpicker, по умолчанию «Прозрачный».
  
• Прозрачность при наведении (COLOR_OPACITY_HOVER) — число 0..1, по умолчанию 0.7.
  
• Радиус скругления блоков (BORDER_RADIUS_BLOCK_OUTER) — в пикселях.
  
• Радиус скругления внутренних блоков (BORDER_RADIUS_BLOCK_INNER) — в пикселях.
  
• Радиус скругления для инпутов (BORDER_RADIUS_INPUT) — в пикселях.
  
• Радиус скругления для кнопок (BORDER_RADIUS_BUTTON) — в пикселях.
  

• Свойства товаров отображаемые в свернутом виде в списке товаров (PRODUCT_COLUMNS_HIDDEN) — мультивыбор колонок/свойств товаров корзины, которые показываются только в развернутой карточке.
  
• Скрыть поле комментариев к заказу (HIDE_ORDER_DESCRIPTION) — убирает поле «Комментарии к заказу».
  
• Расположение комментария к заказу (ORDER_DESCRIPTION_POSITION) — delivery (в блоке доставки) или profile (в блоке профиля). По умолчанию — в блоке доставки.
  

• Использовать цели счетчика Яндекс.Метрики (USE_YM_GOALS) — включает отправку целей. Счётчик Яндекс.Метрики должен быть подключён на странице.
  

При включении становятся доступны:

• Номер счётчика Яндекс.Метрика (YM_GOALS_COUNTER).
  
• Идентификаторы целей по событиям:
  • При инициализации компонента — YM_GOALS_INITIALIZE (по умолчанию BX-order-init).
    
  • При редактировании блоков — YM_GOALS_EDIT_REGION, YM_GOALS_EDIT_DELIVERY, YM_GOALS_EDIT_PICKUP, YM_GOALS_EDIT_PAY_SYSTEM, YM_GOALS_EDIT_PROPERTIES, YM_GOALS_EDIT_BASKET.
    
  • При переходе из блока по кнопке «Далее» — YM_GOALS_NEXT_REGION, YM_GOALS_NEXT_DELIVERY, YM_GOALS_NEXT_PICKUP, YM_GOALS_NEXT_PAY_SYSTEM, YM_GOALS_NEXT_PROPERTIES, YM_GOALS_NEXT_BASKET.
    
  • При оформлении заказа — YM_GOALS_SAVE_ORDER (по умолчанию BX-order-save).
    

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

• Отправлять данные электронной торговли в Google и Яндекс (USE_ENHANCED_ECOMMERCE) — включает интеграцию с Enhanced Ecommerce / Электронной торговлей.
  

При включении становятся доступны:

• Имя контейнера данных (DATA_LAYER_NAME) — по умолчанию dataLayer.
  
• Свойство, в котором указан бренд товара (BRAND_PROPERTY) — выбирается из общего списка свойств всех каталогов сайта.
  

• Заменить стандартные фразы на свои (USE_CUSTOM_MAIN_MESSAGES) — включает блок переопределения основных подписей. При выключенном флаге используются значения из языковых файлов шаблона.
  

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

• Названия блоков: «Авторизация» (MESS_AUTH_BLOCK_NAME), «Регистрация» (MESS_REG_BLOCK_NAME), «Товары в заказе» (MESS_BASKET_BLOCK_NAME), «Регион доставки» (MESS_REGION_BLOCK_NAME), «Оплата» (MESS_PAYMENT_BLOCK_NAME), «Доставка» (MESS_DELIVERY_BLOCK_NAME), «Покупатель» (MESS_BUYER_BLOCK_NAME).
  
• Корзина: «Выбрать все» (MESS_BASKET_SELECT_ALL), «Товар» (MESS_BASKET_ITEM_REMOVED), «…был удалён из корзины» (MESS_BASKET_ITEM_WAS_REMOVED), «Восстановить» (MESS_BASKET_ITEM_RESTORE).
  
• Профили: «Добавить профиль» (MESS_BUYER_PROFILE_ADD), «Отменить» (MESS_BUYER_PROFILE_CANCEL).
  
• Прочее: «Оформить заказ» (MESS_ORDER), «Стоимость» (MESS_PRICE).
  

• Заменить стандартные фразы на свои (USE_CUSTOM_ADDITIONAL_MESSAGES) — включает блок переопределения вспомогательных подписей.
  

При включении становятся доступны:

• «бесплатно» (MESS_PRICE_FREE), «Экономия» (MESS_ECONOMY).
  
• Тексты блока авторизации: MESS_REGISTRATION_REFERENCE, MESS_AUTH_REFERENCE_1..3, MESS_LOGIN_REGISTER_MSG, MESS_TRACK_ORDERS, MESS_LOGIN_REGISTER.
  
• «Дополнительные свойства» (MESS_ADDITIONAL_PROPS).
  
• Купоны: «Применить купон» (MESS_USE_COUPON), placeholder поля купона (MESS_COUPON_PLACEHOLDER, по умолчанию «Введите промокод»), «Купон» (MESS_COUPON_NAME).
  
• Итоги в боковой панели: «Доставка» (MESS_TOTAL_DELIVERY_LABEL), «НДС:» (MESS_TOTAL_SUM_TAXE_NDS), «Скидка» (MESS_TOTAL_SUM_DISCOUNT), «Итого» (MESS_TOTAL_PRICE), «Оформить заказ» (MESS_ORDER_BUTTON_TEXT).
  
• Самовывоз: «Пункты самовывоза:» (MESS_PICKUP_LIST), «Выбрать» (MESS_SELECT_PICKUP).
  
• Внутренний счёт: «На вашем пользовательском счете:» (MESS_INNER_PS_BALANCE).
  
• Пустая корзина: MESS_CART_EMPTY_TITLE, MESS_CART_EMPTY_PRODUCTS, MESS_CART_EMPTY_CATALOG, MESS_CART_EMPTY_MAIN_PAGE.
  

• Заменить стандартные фразы на свои (USE_CUSTOM_ERROR_MESSAGES) — включает блок переопределения сообщений об ошибках и предзагрузке.
  

При включении становятся доступны:

• Текст уведомления о корректной загрузке данных заказа (MESS_SUCCESS_PRELOAD_TEXT) — поддерживает плейсхолдер #ORDER_BUTTON#, который подставляется на название кнопки оформления.
  
• Текст уведомления о неудачной загрузке данных заказа (MESS_FAIL_PRELOAD_TEXT) — также поддерживает #ORDER_BUTTON#.
  
• Заголовок ошибки расчёта доставки (MESS_DELIVERY_CALC_ERROR_TITLE).
  
• Текст ошибки расчёта доставки (MESS_DELIVERY_CALC_ERROR_TEXT).
  
• Текст уведомления при статусе заказа, недоступном для оплаты (MESS_PAY_SYSTEM_PAYABLE_ERROR).
  
• Текст инпута выбора местоположения (MESS_DELIVERY_INPUT_LOCATION).
  

Помимо собственных, доступны стандартные параметры исходного bitrix:sale.order.ajax