Кастомизация нового шаблона компонента sale.order.ajax в 1С-Битрикс. Как развернуть блоки?

Многие не будут спорить со мной, что разработчики CMS, мягко говоря, создали идеальное оформление заказа на 8186 строк javascript-кода. Рекомендаций по кастомизации на просторах интернета очень мало, а если что и можно найти, то предлагаемые изложенные решения не работают на практике (всегда читайте нижние комментарии в блогах). Кто-то предлагал расширять BX.Sale.OrderAjaxComponent, на github’е можно скачать шаблон с якобы адекватной кастомизацией, есть и те, кто написал инструкцию по шагам при работе с файлом order_ajax.js. Но ни один из советчиков, так и не помог в решении поставленной передо мной задаче. А специалисты технической поддержки сказали, что не дают никаких советов в данном вопросе.

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

Шаг 1. Функция init

У нас может быть две ситуации, одна из которых подразумевает, что пользователь уже совершал покупки в нашем интернет-магазине и в параметрах вывода компонента стоит галочка «Автозаполнение оплаты и доставки по предыдущему заказу», и когда галочка деактивирована. Для начала определяем совершал ли текущий пользователь покупку или нет?

После строки this.propsHiddenBlockNode = BX(parameters.propsBlockId + ‘-hidden’) вставляем:

this.haveOrder = (this.result.LAST_ORDER_DATA.FAIL === undefined) ? true : false;

Шаг 2. Функция editOrder

Каждый блок может иметь одно из двух состояний: активное или неактивное, проще говоря, развёрнутое или свёрнутое. Основной задачей данной функции является перебор всех доступных узлов (шагов оформления заказа) для последующей передачи их в функцию editSection, где и происходит отрисовка соответствующего блока. При чём активным блоком является самый верхний элемент DOM по отношению к другим, что говорит нам функция initFirstSection, которая определяет activeSectionId (id активной секции).

На этом шаге кастомизации мы добавляем в цикл for (i in sections), перед вызовом функции this.editSection(sections[i]):

if (this.haveOrder === false || this.params.USE_PRELOAD != 'Y')
{
    this.show(sections[i]);
}

А после вызова this.editSection(sections[i]):

if (sections[i].id == this.regionBlockNode.id && this.haveOrder === false || this.params.USE_PRELOAD != 'Y')
{
    this.fixLocationsStyle(this.regionBlockNode, this.regionHiddenBlockNode); // отрисовка полей местоположения
}

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

Шаг 3. Функция locationsCompletion

Выполняет отрисовку формы отвечающей за указание местоположения покупателя и показ в неактивном состоянии блоков «Регион доставки» и «Свойства заказа». Поэтому строку this.showActualBlock() оборачиваем в условие:

if (this.haveOrder === true && this.params.USE_PRELOAD == 'Y')
{
    this.showActualBlock();
}

А в самом конце этой же функции в условия добавляем:

if (this.activeSectionId !== this.regionBlockNode.id && this.haveOrder === true && this.params.USE_PRELOAD == 'Y')
    this.editFadeRegionContent(this.regionBlockNode.querySelector('.bx-soa-section-content'));
 
if (this.activeSectionId != this.propsBlockNode.id && this.haveOrder === true && this.params.USE_PRELOAD == 'Y')
    this.editFadePropsContent(this.propsBlockNode.querySelector('.bx-soa-section-content'));

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

Шаг 4. Функция createPickUpItem

Именно здесь регистрируется событие описанное выше. Находим вызов функции this.clickNextAction(event) и вместо него пишем:

if (this.haveOrder === false || this.params.USE_PRELOAD != 'Y')
{
    return BX.PreventDefault(event);
}
else
{
    this.clickNextAction(event);
}

Шаг 5. Функция checkPickUpShow

И ещё один момент. Если в сортировке способов доставки стоит первым пунктом «Самовывоз», то есть тот способ, у которого есть свои свойства, а именно — пункты выдачи, то необходимо раскрыть этот блок при загрузке страницы и задать корректные параметры для установки меток на карте. Чтобы это сделать нужно перед this.editSection(this.pickUpBlockNode) вставить следующий код:

if (this.firstLoad && !this.haveOrder)
{
    this.initMaps();
 
    if (this.maps && !this.pickUpMapFocused)
    {
        this.pickUpMapFocused = true;
        setTimeout(BX.proxy(this.maps.pickUpMapFocusWaiter, this.maps), 200);
    }
 
    this.show(this.pickUpBlockNode);
}

Кнопки предназначенные для переключения между блоками прибиваем с помощью CSS. Теперь всё готово и корректно работает.

Пример файла order_ajax.js

 

 

Понравилась статья? Поделись: