SOK: Оформление заказа с корзиной
Технические данные
Совместимые редакции
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Малый бизнес
- Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Бизнес
Описание
Страница оформления заказа уровня крупных маркетплейсов — для любого магазина на Битрикс
Мы изучили, как устроено оформление заказа на ведущих торговых площадках таких как OZON, Wildberries, ЯндексМаркет, ВсеИнструменты и др., и собрали лучшие практики в одном модуле для Битрикс. Современный интерфейс, полное управление корзиной на одном экране, гибкая настройка без правки кода — и всё это на Vue 3 с архитектурой, которую легко расширять под задачи конкретного проекта.
Попробуйте бесплатно — 7 дней демо-периода.
Корзина прямо на странице оформленияПокупатель не уходит на отдельную страницу. Всё — здесь:
- изменить количество товара
- удалить позицию
- отложить товар — снять галочку, чтобы не включать позицию в этот заказ, но не потерять её из виду
Итог пересчитывается мгновенно. Именно так это работает на крупнейших площадках страны — и теперь так же работает в вашем магазине на Битрикс.
Настройка без программистаВнешний вид подгоняется под фирменный стиль прямо в параметрах компонента — цвет, фон блоков, скругления кнопок и полей. Все подписи на странице тоже там: названия блоков, тексты кнопок, сообщения, тексты пустой корзины. Верстальщик не нужен.
Доставка под любой сценарийКарта Яндекса с пунктами самовывоза, поиск ближайшего ПВЗ, постраничный список. Для крупногабаритных или индивидуальных доставок — вместо цены показывается текст («Рассчитывается отдельно»). Нулевая стоимость заменяется на «Бесплатно» или строка скрывается совсем. Ограничения доставки по остаткам на складе и по свойствам товара настраиваются в стандартном интерфейсе служб доставки Битрикс.
Аналитика из коробкиЦели Яндекс.Метрики на каждый шаг покупателя и Enhanced Ecommerce для Google Analytics настраиваются в параметрах компонента. Идентификаторы целей по умолчанию совпадают с типовыми — если цели уже созданы в Метрике, менять ничего не нужно.
Архитектура, которую можно расширятьМодуль построен на Vue 3 с чистой компонентной структурой. Он не просто меняет внешний вид — он расширяет бизнес-логику стандартного компонента: собственные ограничения служб доставки, провайдеры бизнес-значений для автозаполнения служебных свойств заказа, изоляция по сайтам на мультисайтовых проектах.
Функционал модуля будет расширяться. Выйдет подробная документация для разработчиков, которые захотят кастомизировать решение под нестандартные задачи.
Как внедритьПодробная инструкция — на вкладке установки и настройки решения.
Коротко:
- Активировать купон в разделе «Marketplace» → «Обновление решений»
- Установить решение «SOK: Оформление заказа»
- В настройках модуля указать сайты, привязать группы свойств к блокам «Покупатель» и «Доставка»
- Переключить шаблон компонента на sok_order_placement — в режиме правки или в коде страницы
- Настроить цвета, подписи и цели аналитики в параметрах компонента
- 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 и сгруппированы по нескольким вкладкам в окне настройки компонента. Часть стандартных параметров компонента скрыта шаблоном - они используются с фиксированными значениями.
Группа «Основные параметры» (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.
Расположение и стилизация блоков:
- Расположение блока покупателя (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).
- При инициализации компонента — YM_GOALS_INITIALIZE (по умолчанию BX-order-init).
Значения по умолчанию соответствуют типовым целям типового шаблона 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
Перед отправкой заявки в техническую поддержку убедитесь что для модуля установлены все обновления, а также выполните проверку системы. Если при проверке системы есть ошибки пожалуйста предварительно устраните их.
Техническая поддержка осуществляется только для модулей с активными лицензиями для модуля и 1С-Битрикс Управление Сайтом.
Также обращаем ваше внимание, что обсуждения не являются каналом технической поддержки, для оперативного устранения проблем следует отправлять запрос именно в техническую поддержку.
Время работы поддержки: пн - пт с 09 - 18:00 (GMT+7)
Время реагирования 24 - 48 часов.
Установите этот модуль прямо сейчас!
Для этого укажите адрес сайта:
