Битрикс: оформление заказа, упрощаем компонент sale.order.ajax

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

(function () {
    'use strict';
 
    var initParent = BX.Sale.OrderAjaxComponent.init,
        getBlockFooterParent = BX.Sale.OrderAjaxComponent.getBlockFooter,
        editOrderParent = BX.Sale.OrderAjaxComponent.editOrder
        ;
 
    BX.namespace('BX.Sale.OrderAjaxComponentExt');    
 
    BX.Sale.OrderAjaxComponentExt = BX.Sale.OrderAjaxComponent;
 
    BX.Sale.OrderAjaxComponentExt.init = function (parameters) {
        initParent.apply(this, arguments);
 
        var editSteps = this.orderBlockNode.querySelectorAll('.bx-soa-editstep'), i;
        for (i in editSteps) {
            if (editSteps.hasOwnProperty(i)) {
                BX.remove(editSteps[i]);
            }
        }
        
        
        $('#soa-property-3').mask('+7 (999) 999-99-99'); // вешаю маску на поле ввода телефона (3 поле по счёту)
        
 
    };
 
    BX.Sale.OrderAjaxComponentExt.getBlockFooter = function (node) {
        var parentNodeSection = BX.findParent(node, {className: 'bx-soa-section'});
 
        getBlockFooterParent.apply(this, arguments);
 
        if (/bx-soa-auth|bx-soa-properties|bx-soa-basket/.test(parentNodeSection.id)) {
            BX.remove(parentNodeSection.querySelector('.pull-left'));
            BX.remove(parentNodeSection.querySelector('.pull-right'));
        }
 
    };
 
    BX.Sale.OrderAjaxComponentExt.editOrder = function (section) {
 
        editOrderParent.apply(this, arguments);
 
        var sections = this.orderBlockNode.querySelectorAll('.bx-soa-section.bx-active'), i;
 
        for (i in sections) {
            if (sections.hasOwnProperty(i)) {
                if (!(/bx-soa-auth|bx-soa-properties/.test(sections[i].id))) {
                    sections[i].classList.add('bx-soa-section-hide');
                }
            }
        }
        
        // дальше похожий код, но для сокрытия сайдбара с общей ценой
        var sections2 = this.orderBlockNode.querySelectorAll('.bx-soa-sidebar'), i;
 
        for (i in sections2) {
            if (sections2.hasOwnProperty(i)) {
                if (!(/bx-soa-cart-total/.test(sections2[i].id))) {
                    sections2[i].classList.add('bx-soa-section-hide');
                }
            }
        }
        
 
        this.show(BX('bx-soa-properties'));
 
        this.editActiveBasketBlock(true);
 
        this.alignBasketColumns();
 
        if (!this.result.IS_AUTHORIZED) {
            this.switchOrderSaveButtons(true);
        }
 
    };
 
 
    BX.Sale.OrderAjaxComponentExt.initFirstSection = function (parameters) {
 
    };
 
 
})();

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

После строчки:

$this->addExternalJs($templateFolder.'/order_ajax.js');

добавляем:

$this->addExternalJs($templateFolder.'/order_ajax_ext.js');

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

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

.bx-soa-section-hide { display: none; }

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

...
<!--    DUPLICATE MOBILE ORDER SAVE BLOCK    -->
<div id="bx-soa-total-mobile" style="margin-bottom: 6px;" class="hidden-xs"></div>
...

Ещё по теме:

• Про оформление заказа под гостем
• Про отключение авторизации при повторном оформлении заказа