Bitrix sale order ajax

С переходом битрикса на новое ядро, 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() также ставим строгую проверку на ноль. Вместо

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

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

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

С выходом нового шаблона компонента sale.order.ajax на форумах битрикса разгораются возмущения и недомения. Мол, теперь код всего шаблона на JavaScript и как его кастомизировать непонятно. На самом деле да, код js-скрипта составляет почти семь тысяч строк. Сходу в таком количестве кода, даже хорошо написанного (к сожалению, битрикс этим не балует), соблюдая паттерны программирования, будет непросто.

В этой заметке я покажу способ, как можно кастомизировать основной скрипт логики шаблона оформления заказа (order_ajax.js), не прибегая к его правке. Что нам это даёт? Когда прилетят очередные обновления шаблона, мы просто заменим его и всё. Все наши кастомизации будут работать (в теории).

Кастомизировать будем так, чтобы в оформлении осталось только 2 блока (блока с вводом данных покупателя, а так же выводом самой корзины), вместо 6. Если у нас интернет-магазин маленький, то задача вполне себе реальная.

Читайте также:  1С признак учета субконто

Чтобы получилось примерно так:

Все махинации сводятся к расширению BX.Sale.OrderAjaxComponent. Ну как, к расширению.. Полноценным расширением это сложно назвать. Так как битрикс в разработке шаблонов (и не только), практически не ориентируется на расширение этих шаблонов своими партнёрами, то нам приходится выкручивать себе яйца и изобретать костыли. По другому это не назвать. Вот зачем нужно было писать объект BX.Sale.OrderAjaxComponent без прототипа?

Ладно, ближе к делу 🙂

Кастомизируем

Создаём файл order_ajax_ext.js в папке с шаблоном компонента sale.order.ajax (там же, где лежит файл order_ajax.js) с содержимым:

Подробнее, что происходит

В отдельных переменных определяем функции-методы родительского BX.Sale.OrderAjaxComponent, чтобы их можно было вызвать в дочерних функциях и не получить ошибку Maximum call stack size exceeded.

Копируем ссылку с BX.Sale.OrderAjaxComponent в BX.Sale.OrderAjaxComponentExt.

В методе BX.Sale.OrderAjaxComponentExt.init вызываем родительский init, следом прибиваем ссылки «изменить» у всех блоков. Они нам не нужны.

В методе BX.Sale.OrderAjaxComponentExt.getBlockFooter прибиваем кнопки «Назад» и «Вперед» у блоков. Они нам тоже не понадобятся — все блоки у нас развёрнуты.

В методе BX.Sale.OrderAjaxComponentExt.editOrder ненужным блокам-секциям добавляем css-класс bx-soa-section-hide. По нему мы и будем скрывать ненужные блоки. А так же в этом методе раскрываем только нужные нам блоки: «Покупатель» и «Товары в заказе».

Метод BX.Sale.OrderAjaxComponentExt.initFirstSection оставляем просто пустым. Если этого не сделать, то у анонимов при попытке оформления будет вываливаться эксепшен, по поводу отсутствия необходимых обязательных полей.

Правки шаблона: подключаем наш скрипт и меняем вызов BX.Sale.OrderAjaxComponent на свой

В файле template.php нашего шаблона нового оформления добавляем подключение нашего скрипта order_ajax_ext.js:

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

Правки CSS

Ну и не забываем добавить в файл стилей, чтобы ненужные блоки скрылись:

На этом всё. Всегда старайтесь подходить к задачам творчески 🙂

Похожие записи

1С-Битрикс. LazyLoad или ленивая загрузка контента при включенном кешировании

В этой заметке я хочу рассказать о технологии LazyLoad или в простонародье «ленивая загрузка» в Битриксе. Метод, описанный мной, будет точно работать в компонентах catalog.section и news.list.

1С-Битрикс. Защита от спама в регистрации без капчи

Не редкость, когда боты начинают регистрироваться на сайтах и захламлять списки пользователей своим присутствием. В «1С-Битрикс» можно включить капчу для защиты от спама. Но порой и капча не спасает, да и заставлять пользователей вводить код с капчи, я считаю, не гуманно. Воспользуемся другим трюком.

1С-Битрикс. Пишем человеческий шаблон многоуровнего меню каталога

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

В заметке будет (интересного):

  • построение древовидного массива без рекурсии (неограниченной вложенности)
  • анонимная рекурсивная функция
  • формирование урлов для секций супер-быстрым способом
  • поработаем с сущностями инфоблока через ORM D7

Дальше много кода.

61 комментарий

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

Александр, по-моему, всё так же обработчиком на событие OnOrderNewSendEmail.

Отличное решение! Спасибо.Не подскажете как мне раскрыть поля bx-soa-paysystem и bx-soa-delivery Ни как понять не могу.

я готова тебя расцеловать. Ты просто спас меня. Извини, что на ты – это я от избытка чувств )))

Ирина, рад, что сделал вашу жизнь чуточку лучше 🙂

Подскажите как раскрыть поля bx-soa-paysystem и bx-soa-delivery сразу при загрузке стран цы и не закрывать их.

Рома, нужно немного попрограммировать.

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

Спасибо огромное. У меня антологичный вопрос Влад:

Как раскрыть поля bx-soa-paysystem и bx-soa-delivery?

Никто не решал, как все-так теперь редактировать товар на странице оформления заказа – плюс минус удалить. Функционал удалили, взамен – ждите?

Вроде и не было никогда управление корзиной в компоненте sale.order.ajax.

На конференции говорили, что вот-вот сделают из коробки 🙂

Т.е. старые компоненты выпилены (в визуалке), остается только этот. Клиент набрал корзину, передумал насчет половины товаров, КАК ЕМУ БЫТЬ ДАЛЬШЕ?)))) Дальше нИ ОДНОГО товара из корзины нельзя удалить никак! Перезаходить в браузер что-ли? 80-е возвращаются?

решение с новым шаблоном достойно редкостного говнокода, к сожалению. битрикс стал кругом городить еще большие костыли и велосипеды. тогда бы уж подключили сразу ангулар и делали с ним, всеравно каждый чих получаем новый json объект от сервера

Решение понравилось, но не работает в safari почему-то. Ставил в тч на типовой магазин.

Отличное временное решение для небольших магазинов. Спасибо за работу и публикацию.

Я это говно однажды переписал на Vue js. Вся js-лапша с кучей строк говнокода превратилась в 200 строчек на Vue.

А все потому, что нехер городить лапшу на своем "супер-говно-битрикс-js-фреймворке", а нужно js-шаблонизатор использовать для таких вещей, все за всех уже придумали.

Было бы здорово, если бы поделились своим решением.

Олег, спасибо я развернул все карточки. А то ошибка все вылезала.

Читайте также:  Файл поврежден деинсталляция невозможна что делать

В итоге вышло так:

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

Еще остается пустой блок, тоже убираем: .bx-soa-more

Не делайте это решение! Сам купился на красиво написанный пост, попробовав его с первого взгляда все нормально ,стоит пощелкать по доставкам и начинается магия, все сыпется .Есть решение лучше – либо старый шаблон -https://camouf.ru/club/user/1/blog/77/ ,либо https://dev.1c-bitrix.ru/support/forum/forum6/topic83447/?PAGEN_1=8 – ищем к сожалению функционала старого sale.order.ajax не хватило ((( пришлось "ковырять" новый ((( расскажу как я развернул все блоки, т.к. вопрос актуальный и я на него так и не нашел нормального ответа. " , делаем все пункты и все работает как надо,изменить правда остальное уже на до изучать order.ajax.js и D7

да ладно! ничо не сыпется! у меня 14 доставок и в трех группах. плюс кроссы с платежниками.

Мне вам лично записать? У меня самая последняя версия 1С битрикс ,малый бизнес,все делал по шагам. Работает до 1 раза выбора доставки или оплаты, начинаешь менять , вкладки начинают слетать ( скрываются ) , приходится перезагружать страницу. Если пользователь не авторизован, так вообще не работает так как должно. Или на слово мне не верите? Могу видео записать .

стоит пощелкать по доставкам и начинается магия

Maks, в начале заметки же написано:

Кастомизировать будем так, чтобы в оформлении осталось только 2 блока (блока с вводом данных покупателя, а так же выводом самой корзины), вместо 6.

Откуда вы тут взяли блок доставок? То есть мой вариант скрывает блок с доставкой вовсе. Откуда она у вас взялась?

Способ, описанный в заметке, применён на рабочем сайте. Вот скриншот с него https://yadi.sk/i/gLPSoin33Jh7UV Как видите, выбора доставки и оплаты там нет.

да, видимо я вас не так понял изначально. Спасибо за разъяснение что ваш способ работает только С ТЕМ, что вы написали. Это не тот случай когда можно вырезать функционал ( это не комплексный компонент новости, и даже не каталог) . Здесь по дефолту должно работать все, потому что этот компонент делает продажи сайта,и весь интернет -магазин строится на нем ( доставки, оплаты, расчет скидок), а полу работающий функционал на вашей совести. Если у вас не работают стандартные вещи,которые обязаны работать в таком компоненте, откуда у меня будет уверенность что вы еще что-то не вырезали или забыли? Скажем так, вы просто не разобрались в ядре D7 и не знаете как сделать ,поэтому скрыли. Если бы знали, вы оставили бы эту опцию , а люди ,читающие ваш блог сами бы выбрали скрывать им эти функции или нет. Я лично нашел это, хотя знаком с D7 2 дня, если вы считаете себя профессионалом, почему вы не сделали это ? Не вводите своим кодом людей в заблуждение, если недостаточно владеете документацией. Я считаю , выкладывать такой код не профессионально. Это сугубо мое мнение.

Maks, вы как-то между строк прочитали заметку. Я же написал, что покажу способ кастомизации нового шаблона sale.order.ajax. Постарайтесь хотя бы эту фразу вдумчиво прочитать. Но я поясню на всякий случай — описанное в заметке — это как один из вариантов кастомизации нового шаблона.

Программирование — ведь крутая штука. Одну задачу можно решить кучей способов. Мой способ и описан в заметке. У кого-то другого он может быть свой.

Это не тот случай когда можно вырезать функционал

Почему не тот случай? Я же говорю, что это работает на боевом сайте. Если у сайта одна оплата и доставка, то к чему давать пользователю выбирать их? Поэтому они и скрыты.

Если у вас не работают стандартные вещи,которые обязаны работать в таком компоненте, откуда у меня будет уверенность что вы еще что-то не вырезали или забыли?

Вырезано только то, что требовалось в задаче, которая описана в заметке.

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

Интересно, а причём здесь новый шаблон компонента, его скрипт order_ajax.js (который в заметке я и расширяю) и, указанное вами, ядро D7? Вы что-то путаете тёплое с мягким.

Не вводите своим кодом людей в заблуждение, если недостаточно владеете документацией.

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

Я считаю , выкладывать такой код не профессионально. Это сугубо мое мнение.

А я считаю, что это мой личный блог, и я могу писать в нём что захочу. Благо, публикуя такие заметки, большинству они помогают в решении их задач (почитайте хотя бы комментарии выше). Ну а вам просто не повезло.

Читайте также:  Звуковая карта не видит разъемы

Пишите что хотите, я еще раз повторюсь , я сказал если выкладываете код, делайте его гибким и расширяемым, НЕ ДЛЯ ПОЛЬЗОВАТЕЛЯ , а для тех людей , кто будет его потом использовать (разработчики-интеграторы, заказчик – захочет поставить доставку) . Это Хорошо если он ничего не будет менять, но наши реалии не такие, у нас каждый день меняется что -то. Да я не изобретаю велосипеды как "некоторые", я сперва ищу готовые решения, разбираю как они работают ,если подходят – использую. А вы,видимо, любитель колес,ну удачи вам с этим. Я что -то писал про то , что в файле order_ajax.js используется D7 ? Я сказал вы не разбираетесь в нем, только и всего. Вы уже додумали. Делайте как хотите.Мое мнение останется при мне – это логично оставить возможность доставки и оплаты. Иначе у вас в админке есть, в настройках компонента есть,а в шаблоне нет. Да вы гений!Посносили то,что не смогли поправить , или просто бабла срубили, конечно , это же дольше займет по времени доработать параметры компонента и сделать отключение блоков. Можно же просто вырезать к х***м все! Вот ваша позиция. Я вас понял. Всего вам доброго

Maks, веселите меня сегодня весь день своими громкими заявлениями 🙂

я сказал если выкладываете код, делайте его гибким и расширяемым

Так он и так гибкий. Гибче некуда. Если вдруг не поняли, то: берёте любой метод из BX.Sale.OrderAjaxComponent и переопределяете его в BX.Sale.OrderAjaxComponentExt. Всё. Просто, не правда ли?

Да я не изобретаю велосипеды как "некоторые", я сперва ищу готовые решения, разбираю как они работают ,если подходят – использую.

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

Я что -то писал про то , что в файле order_ajax.js используется D7? Я сказал вы не разбираетесь в нем, только и всего.

Ок. Как вы тогда сделали такой вывод, если в заметке нет ни слова о D7? Парадокс.

Халявы? Я не халявщик, я не велосипедист повторяю. Вам нравится – изобретайте колеса.

Что у вас просто? Вы дурак , или прикидываетесь? Я вам говорю делайте гибко,и расширяемо, вы мне говорите метод заменить. Вы издеваетесь? Ну я посмотрю как человек сперва ваш метод использует, а потом у него вдруг появятся заявки и доставка и он заменит метод на дефолт и все будет работать.

Он сперва кастомизирует ВАШ МЕТОД, а потом уже захочет обратно доставку и оплату, и все придется переносить!

Я не халявщик, я не велосипедист повторяю

Ну так докажите. Покажите хоть один решённый вами кейс. Пока что я вижу только хныканье и полное отсутствие желания или способностей к решению своей задачи.

Я вам говорю делайте гибко,и расширяемо

Я ж уже показал как делать. Непонятно? Обратитесь к программисту уже.

вы мне говорите метод заменить.

Ага, представляете? Когда что-то нужно сделать самому, то придётся всё-таки включить голову, а не идти плакаться по блогам, что решение какой-то задачи не соответствует вашей.

Ну я посмотрю как человек сперва ваш метод использует, а потом у него вдруг появятся заявки и доставка и он заменит метод на дефолт и все будет работать. Он сперва кастомизирует ВАШ МЕТОД, а потом уже захочет обратно доставку и оплату, и все придется переносить!

Итак, оформление заказа в Битрикс по-простому. Или кастомизация компонента 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector