Страница оформления заказа уровня крупных маркетплейсов — для любого магазина на 1С-Битрикс.
Мы изучили оформление заказа на OZON, Wildberries, Яндекс.Маркет, ВсеИнструменты и др. и собрали практики в одном модуле: современный интерфейс, корзина на одном экране с оформлением, настройка без правки кода, Vue 3 и архитектура под расширение проекта.
Модуль подключается как шаблон sok_order_placement стандартного компонента bitrix:sale.order.ajax.
Попробуйте бесплатно — 7 дней демо-периода.

Корзина прямо на странице оформленияПокупатель не уходит на отдельную страницу корзины. На экране оформления заказа:
- выбор позиций галочками («выбрать все» / снять выбор);
- в заказ попадают только отмеченные товары; остальные остаются отложенными (DELAY);
- изменение количества с мгновенным пересчётом итога;
- удаление позиции с возможностью восстановления;
- два вида карточек товара: компактный и увеличенный;
- вывод свойств в карточке: свойства корзины и свойства инфоблока / SKU;
- пустая корзина: настраиваемые тексты и кнопки «В каталог» / «На главную».

Покупатель, профили и поля заказа- типы плательщиков (можно показывать блок даже при одном типе);
- профили покупателя: выбор, создание, редактирование, сохранение, удаление с подтверждением;
- свойства заказа разделены на группы «Покупатель» и «Доставка» (настройки модуля);
- служебные свойства через бизнес-значения модуля (маппинг по типу плательщика);
- расположение блока покупателя: до или после доставки/оплаты (параметр);
- комментарий к заказу — в блоке доставки или профиля.



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


Расширение настроек служб доставки Битрикс — дополнительные ограничения в стандартном интерфейсе службы:
- по наличию на складе (скрыть службу, если остатка не хватает);
- по свойству товара и типу плательщика (скрыть службу при совпадении значения; для SKU — опция проверки родителя).

Оплата, итог и купоны- указан выбранный способ оплаты и доставки;
- sticky-сайдбар итога: якоря на доставку/оплату, позиции, НДС, скидка, итого, кнопка оформления;
- настраиваемый отступ фиксированной боковой панели;
- купоны: применение, удаление, статус;
- ограничение по минимальной сумме заказа с предупреждением;

Гостевой сценарий, согласия и оферта- блок «Вход или регистрация»;
- оформление с авторегистрацией (ALLOW_AUTO_REGISTER=Y);
- без авторегистрации: гостю доступны вход, корзина и итог; доставка/оплата скрыты, кнопка оформления недоступна до входа;
- AJAX-прокси шаблона для корректного пересчёта корзины/доставки/купонов у гостя;
- согласие на обработку ПДн через ядро USER_CONSENT (запись в журнал при сохранении заказа);
- подпись согласия из соглашения Битрикс или include-файла;
- опция показывать галочку согласия только гостям;
- текст оферты без галочки (отдельный include).

Настройка без программистаВ параметрах компонента sale.order.ajax (шаблон sok_order_placement):
- основной цвет, hover, радиусы, фон блоков;
- подписи блоков, кнопок, сообщений, тексты пустой корзины;
- состав и поведение блоков оформления (покупатель, доставка, оплата, корзина);
- цели аналитики (см. ниже).
Верстальщик для базовой адаптации под фирменный стиль не нужен.
Аналитика из коробки- цели Яндекс.Метрики на шаги покупателя — в параметрах компонента;
- Enhanced Ecommerce для Google Analytics;
- идентификаторы целей по умолчанию совпадают с типовыми (если цели уже есть в Метрике, менять не обязательно).
Архитектура и доработка- UI на Vue 3 (Bitrix Extensions);
- шаблон стандартного bitrix:sale.order.ajax — без правки ядра Sale;
- расширение бизнес-логики: restriction’ы доставки, провайдеры бизнес-значений, события;
- изоляция по сайтам на мультисайте (модуль только на выбранных сайтах);
- кастомизация частей интерфейса через parts/custom/ на стороне проекта (не в пакете МП);
- документация для разработчиков под нестандартные задачи.
Как внедритьПодробная инструкция — на вкладке установки и настройки решения. Коротко:
- Активировать купон в «Marketplace» → «Обновление решений».
- Установить «SOK: Оформление заказа с корзиной».
- В настройках модуля указать сайты и привязать группы свойств к блокам «Покупатель» и «Доставка».
- Переключить шаблон sale.order.ajax на sok_order_placement (режим правки или код страницы).
- Настроить цвета, подписи и цели аналитики в параметрах компонента.
Требования
- 1С-Битрикс: Управление сайтом — «Малый бизнес» и выше;
- для карты самовывоза — API-ключ Яндекс.Карт («Управление структурой»);
- для аналитики — счётчик Яндекс.Метрики и/или Google Analytics.
Готовый модуль оформления заказа с корзиной для 1С-Битрикс: один экран checkout, галочки и отложенные товары, профили, доставка/ПВЗ, расширенные ограничения служб доставки, гостевые сценарии, согласия, аналитика и настройка без правки ядра.
Попробуйте бесплатно 7 дней или установите решение из Marketplace.
Установка решенияВведите полученный при покупке ключ в административной части сайта в разделе «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 и сгруппированы по нескольким вкладкам в окне настройки компонента. Часть стандартных параметров компонента скрыта шаблоном - они используются с фиксированными значениями.
Группа «Основные параметры» (BASE)- Разрешить использование профилей покупателей (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.
Группа «Внешний вид» (VISUAL)Расположение и стилизация блоков:
- Расположение блока покупателя (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) — в пикселях.
Группа «Дополнительные настройки» (ADDITIONAL_SETTINGS)- Свойства товаров отображаемые в свернутом виде в списке товаров (PRODUCT_COLUMNS_HIDDEN) — мультивыбор колонок/свойств товаров корзины, которые показываются только в развернутой карточке.
- Скрыть поле комментариев к заказу (HIDE_ORDER_DESCRIPTION) — убирает поле «Комментарии к заказу».
- Расположение комментария к заказу (ORDER_DESCRIPTION_POSITION) — delivery (в блоке доставки) или profile (в блоке профиля). По умолчанию — в блоке доставки.
Группа «Настройки аналитики» (ANALYTICS_SETTINGS)Цели Яндекс.Метрики- Использовать цели счетчика Яндекс.Метрики (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) — выбирается из общего списка свойств всех каталогов сайта.
Группа «Основные надписи» (MAIN_MESSAGE_SETTINGS)- Заменить стандартные фразы на свои (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).
Группа «Дополнительные надписи» (ADDITIONAL_MESSAGE_SETTINGS)
- Заменить стандартные фразы на свои (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.
Группа «Сообщения об ошибках» (ERROR_MESSAGE_SETTINGS)- Заменить стандартные фразы на свои (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).
Стандартные параметры компонента sale.order.ajaxПомимо собственных, доступны стандартные параметры исходного bitrix:sale.order.ajax
Для оформления заявки в техподдержку отправьте свой запрос на электронную почту
info@sok24.ru. Для диагностики ошибок может потребоваться административный доступ к сайту.
Перед отправкой заявки в техническую поддержку
убедитесь что для модуля установлены все обновления, а также
выполните проверку системы. Если при проверке системы есть ошибки пожалуйста предварительно устраните их.
Техническая поддержка осуществляется только для модулей с активными лицензиями для модуля и 1С-Битрикс Управление Сайтом.
Также обращаем ваше внимание, что обсуждения не являются каналом технической поддержки, для оперативного устранения проблем следует отправлять запрос именно в техническую поддержку.
Время работы поддержки: пн - пт с 09 - 18:00 (GMT+7)
Время реагирования 24 - 48 часов.