Шаблон оформления заказа битрикс

Итак, оформление заказа в Битрикс по-простому. Или кастомизация компонента sale.order.ajax. Вот прекрасная статья – https://www.olegpro.ru/post/1c_bitriks_kastomizaciya_novogo_shablona_komponenta_saleorderajax.html

Опишу свой процесс кастомизации (работе по подстраиванию стандартного компонента под себя как по функциональности, так и по оформлению)

Вот пока как выглядет моя форма кастомизированная из sale.order.ajax, дальше дорабатывать можно ещё проще.

1. Берём навороченный компонент sale.order.ajax (Одношаговое оформление заказа), в визуальном редакторе перетаскиваем его на страницу. Дважды кликаем по нему в области редактора. Копируем компонент в своё пространство шаблонов. Дальше можно какие-то настройки уже обозначить.

2. Теперь надо убирать лишние шаги и делать оформление по-своему. Все работы сведутся к расширению BX.Sale.OrderAjaxComponent (типа расширение такое). Создаём файл order_ajax_ext.js в папке с шаблоном компонента sale.order.ajax (там же, где лежит файл order_ajax.js). Вот моё содержимое order_ajax_ext.js

3. Теперь этот расширенный файл js добавляем в шаблон. В этой же папке открывает template.php

А так же в файле template.php меняем все вызовы BX.Sale.OrderAjaxComponent на BX.Sale.OrderAjaxComponentExt

4. И добавляем в наши стили класс

5. Далее только с помощью css я скрыл поле комментария к заказу, стилизовал кнопку "Оформить заказ" и навёл прочую красоту. Также скрыл сайдбар с дополнительной кнопкой оформления для случая узкого окна браузера (hidden-xs) – это в том же своём template.php

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Новый вариант шаблона битрикс

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

Примеры кода Вы также, можете посмотреть в шаблоне new_logictim_bonus

Участки кода, которые необходимо добавить:

Читайте также:  Элемент закодирован в неподдерживаемом формате 0xc00d5212

Скрываем свойства заказа с бонусами:
в метод перед вставляем код (чтобы указанная выше строка попадала под условие)

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

Последний шаг к совершению покупки — это оформление заказа. Для тех, кто хочет оформить быстрый заказ, доступна форма покупки в 1 клик. В ней заполняются поля для связи, например, имя и телефон. Оформление заказа с выбором оплаты, доставки, местоположения доступно в 2 вариантах: с открытыми и закрытыми блоками в форме. В форме с закрытыми блоками после заполнения полей в «Регион доставки» необходимо кликнуть на кнопку «Далее», чтобы перейти к заполнению блока «Доставка». Аналогично для блоков «Оплата» и «Покупатель».

Форма покупки в 1 клик.

О том, как настроить поля в форме покупки в 1 клик, читайте в статье.

Оформление заказа с открытыми блоками для заполнения. В Аспро: Next этот вариант доступен, начиная с версии 1.4.0. Аспро: Оптимус версия 1.4.0, Аспро: Маркет версия 1.6.0.

Оформление заказа с закрытыми блоками для заполнения.

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

В поле «Шаблон компонента» выберите нужный вариант оформления заказа:

Шаблон оформления заказа с открытыми блоками для заполнения:
v1 (Аспро: Next — интернет-магазин)
v1 (Аспро: Optimus — Адаптивный интернет-магазин)
v1 (Аспро: Маркет — Адаптивный интернет-магазин)

bootstrap_v4 (Встроенный шаблон) — стандартный шаблон 1С-Битрикс без стилей решения.

Читайте также:  Угол между координатной плоскостью oxy и плоскостью

.default (Встроенный шаблон) — стандартный шаблон 1С-Битрикс со стилями решения с закрытыми блоками.

Оцените статью
Добавить комментарий

Adblock detector