Создание сайтов на 1С Битрикс стало еще просто, используйте готовые шаблоны! Подключайте современные модули, делая ваш сайт еще эффективнее!
Например, парсер сайтов

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

50%

17 900 i
8 950 i
Заказать
Оформление заказа
х
В наличии

Страница оформления заказа уровня крупных маркетплейсов — для любого магазина на 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/ на стороне проекта (не в пакете МП);
  • документация для разработчиков под нестандартные задачи.

Как внедрить

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

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

Требования

  • 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 часов.

x