Битрикс кастомизация оформления заказа

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

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

Добавление пользовательской закладки

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

  • OnAdminSaleOrderView — для формы просмотра заказа;
  • OnAdminSaleOrderCreate — для формы создания заказа;
  • OnAdminSaleOrderEdit— для формы редактирования заказа.

Рассмотрим пример добавления закладки в форму редактирования заказа:

В файл bitrix/php_interface/init.php необходимо добавить обработчик события OnAdminSaleOrderEdit:

В обработчике указываем какие методы будут вызываться. Так с помощью методов mygetTabs и myshowTab определяем добавляемые закладки и их содержимое. Метод mycheck определяет действия, которые будут выполняться перед сохранением заказа, а метод myaction — действия, которые будут выполняться при сохранении заказа.

Кастомизация информационной панели

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

Следует использовать обработчик построения информационной панели onSaleAdminOrderInfoBlockShow и из него вернуть параметры, которые нам необходимо добавить:

Таким образом, вы можете вернуть необходимую дополнительную информацию, которую будете показывать менеджеру.

Добавление пользовательских блоков

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

Чтобы добавить пользовательские блоки в форму просмотра заказа, следует использовать обработчик события OnAdminSaleOrderViewDraggable:

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

  • mygetScripts — нужен, чтобы инициализировать JAVA-скрипты, которые вам понадобятся;
  • mygetBlocksBrief — нужен для описания блока;
  • mygetBlockContent — нужен для создания содержимого блока.

Чтобы добавить пользовательские блоки в форму создания/редактирования заказа, следует использовать обработчики событий OnAdminSaleOrderCreateDraggable/OnAdminSaleOrderEditDraggable:

В обработчик, помимо методов mygetScripts, mygetBlocksBrief и mygetBlockContent, добавляются еще 2 метода: mycheck и myaction, которые вызываются перед сохранением и при сохранении заказа соответственно.

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

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

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

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

Читайте также:  Как вывести видеокарту из строя

Все махинации сводятся к расширению 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 почему-то. Ставил в тч на типовой магазин.

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

Читайте также:  Gts 450 world of tanks

Я это говно однажды переписал на 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? Парадокс.

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

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

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

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

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

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

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

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

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

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