bitrix sale ajax locations

Данный пост будет посвящено новому компоненту sale.order.ajax и его шаблоны с js-файлом на 7,5+ тыс. строк. Пост будет собирательным и обновляемым — все, что буду находить в сети, и буду считать интересным и полезным — пуду публиковать тут.

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

Компонент bitrx:sale.order.ajax был полностью переработан под использование в новом ядре. В том числе был полностью переработан и шаблон данного компонента.

Вся логика отрисовки шаблона нового компонента возложена на клиентскую часть и выполняется через файл order_ajax.js (более 7700 строк некомментированного кода:().

Юрий Волошин на форуме разработчиков писал:

Т.к. «отрисовка» в новом шаблоне происходит через js, кастомизировать следует файл order_ajax.js.

У каждого блока существует два состояния — активное и скрытое.

Активная секция должна всегда находиться в DOM на странице, т.к. в ней находятся нужные нам input’ы для рассчета заказа. Неактивный блок формируется на основе активного, и его нахождение на странице не обязательно.

Основной метод — это editOrder, который вызывает редактирование каждого блока (секции — editSection). editSection — определяет текущую активность блока и вызывает конкретный метод для конкретного блока, напр. для блока оплат — editPaySystemBlock.

Если блок активен — в видимой части отрисовывается выбор платежных систем (editActivePaySystemBlock — на отрисовку пс можно повлиять здесь), если блок неактивен — editFadePaySystemBlock, который в свою очередь вызовет отрисовку в скрытой области на странице блока с платежными системами, и на основе его сформирует в видимой части информацию о выбранной пс (скрытый/пройденный шаг).

Это как «в общем» работает js и как его можно кастомизировать.

Можно добавить, что расположение блоков можно поменять в файле template.php (блоки выделены комментариями)

В принципе, идея тут заложена верная, но для решения конкретных задач очень много не хватает. И об этом свидетельствуют переписки разработчиков на партнерском форуме.

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

Определение местоположения пользователя в автоматическом режиме

Стоит задача: Определять местоположение пользователя, например, по геотаргетингу, или как-то еще — не важно. Факто в том, что в куках у пользователя уже установлен город. Как передать этот город в новый компонент? На форуме разработчиков было предложено решение:

А вот такая модификация позволяет определить местоположение только по названию города:

Скрыть какое-то свойство

Если необходимо скрыть какое-то свойство, например, свойство индекс — задать значение по умолчанию и не показывать пользователям это поле, то можно внести корректировку в JS. В функции getPropertyRowNode после switch (propertyType) добавляем скрытие данного свойства:

Исключить из показа нулевой цены за доставку

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

В функции getDeliveryPriceNodes: function(delivery) в блоке «else» заменяем. Вместо:

Так мы спрячем нулевую цену из свернутого блока с выбранной доставкой.

Дальше нужно скрыть нули в списке служб доставки. Для этого в функции createDeliveryItem: function(item) делаем строгую проверку на ноль. Вместо:

И последним нужно скрыть нулевую доставку из итоговых сумм. Для этого в функции editTotalBlock: function() также ставим строгую проверку на ноль. Вместо

В результате нулевая доставка не будет показана пользователю.

Вариант кастомизации компонента оформления от Александры Плотниковой

Александра написала мне в обратную связь о своем интересном кейсе по доработке одношагового заказа. Пока делюсь ссылкой, позже проработаю и выпишу текстом

Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.

Периодически на проектах встречается задача внедрить не стандартную логику определения местоположения в компоненте оформления заказа.

Большинство решений предлагают, по сути, эмулировать смену уже на отображенной странице с последующей перегрузкой при помощи JavaScrip. Вот еще один вариант, но без лишних перегрузок. Решение работает на основе обработчика события компонента bitrix:sale.order.ajax OnSaleComponentOrderProperties.

В первую очередь выносим идентификаторы свойств, которые нам понадобятся в доступные переменные

Далее добавляем метод обработчика события. Для примера «нестандартной» логики я взял хранение местоположение в свойстве UF_LOCATION пользователя сайта. Компонент оперирует кодом местоположения из-за этого первым делом по значению UF_LOCATION получаем код нужного местоположения. Следующим шагом, необходимо проверить почтовый индекс на соответствие местоположению. Полученные значения местоположения и индекса заносим в соответствующие переменные массива $arUserResult[‘ORDER_PROP’].

Новые технологии — это просто

пр. Обуховской обороны, д. 70, корп 2,оф. 488 newit@newit.ru

Местоположение — простое заполнение

Описание

Компонент позволяет настроить удобный выбор города из списка местоположений.


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

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

Установка компонента

Устанваливаем модуль через marketplace.
Для настройки компонента ‘простой выбор местоположения’ необходимо заменить стандартный компонент sale.ajax.locations.
Рассмотрим на примере одношагового оформления заказа sale.order.ajax.
Необходимо найти где в шаблоных sale.order.ajax выводится компонент sale.ajax.locations , в данном компоненте вывод находится в файле props.php
находим строчки

Значение переменных компонента NewIt:sale.locations.autocomplete.
CITY_INPUT_NAME — Имя поля формы города
LOCATION_VALUE — Выбранное значение города
JQUERY — Если в проекте не используется JQUERY то надо поставить «Y» .
FORM_ID_TEXT_CITY — ID текстового поля формы для введения города.
MAXITEMSTOSHOW — Максимальное отображение городов в списке
CITY_EMPTY_ID — Страна для «другого города» по умолчанию
CITY_EMPTY_ID_NAME — Название в списке для «другого города»
MINCHARS — Минимальное количество символов для отправки запроса
ONCITYCHANGE — функция которая срабатывает при выборе города
INDEX_ON — Включить заполнение поля индекса

INDEX_PLACE — Служит для назначения id или class поля с индексом.

Так же необходимо удалить компонент sale.ajax.locations в конце файла props.php

По аналогии можно заменить выбор города в других компонента.
Обятельным условием работы компонента является заполненные местоположения, для того что бы заполняло индексы необходимы заполненные индексы у городов.

Оцените статью