Здравствуйте!
Кастомизирую шаблон компонента сравнения товаров catalog.compare.result в составе компонента catalog. При удалении товара из сравнения выполняется ajax-запрос, который подтягивает верстку компонента catalog.compare.result с обновленными данными.
Натягиваемая верстка содержит в себе многочисленные JS-украшательства, такие как слайдеры slick, которые инициализируются в файле script.js шаблона компонента catalog.compare.result. При первом открытии все работает как надо, но разумеется, после удаления товара из сравнения эти слайдеры разваливаются, так как их инициализации в возвращаемом по AJAX фрагменте верстки не происходит.
Чтобы не отнимать много времени, сразу вопрос: есть ли какой-то наиболее типовой, предпочтительный и адекватный способ добиться отработки кода из script.js в ситуации, когда компонент подгружается/обновляется через AJAX? Либо, если такое невозможно, добиться отработки скриптов из прочих файлов, допустим если код вынесен в файл test.js, и этот файл подключается в template.php:
<!-- ** верстка слайдера ** -->
<script src="<?=$templateFolder?>/test.js"></script>
Далее расскажу о том, что уже пробовал, прошу прощения за сумбурность.
Немногим ранее я решал похожую задачу: в списке товаров (catalog.section) нужно было реализовать кнопку "быстрого просмотра", которая открывала бы модальное окно с компонентом catalog.element, выводящим выбранный товар. Я создал отдельный файл с вызовом компонента catalog.element, на который отправлял ajax'ом ID выбранного товара, а в ответ мне приходила верстка этого компонента:
...
$APPLICATION->ShowAjaxHead(false, false, false, true);
$APPLICATION->IncludeComponent("bitrix:catalog.element", ... );
...
В тот раз мне помог вызов метода ShowAjaxHead() перед вызовом компонента. Благодаря нему файл script.js выполнялся, и в модальном окне работали кнопки добавления в корзину.
Но теперь все выглядит как-то сложнее, ведь я нахожусь в комплексном компоненте. Пробовал вызвать ShowAjaxHead() в файле compare.php, перед вызовом компонента catalog.compare.result, но в таком случае все работает совсем некорректно. Размещал ShowAjaxHead() также в других местах, но в лучшем случае просто не получал никакого результата.
Также делал попытки пойти другим путем. В файле script.js шаблона компонента содержится функция deleteResult(), которая принимает обновленную верстку компонента. Я вынес скрипты, инициализирующие слайдеры, в отдельный файл test.js и подключил в файле template.php тегом script, а в функции deleteResult() попробовал обработать приходящую в параметр result верстку методом BX.processHTML, чтобы вычленить из нее скрипты и выполнить их методом BX.ajax.processScripts(). Но в свойстве SCRIPT возвращаемого объекта лежит пустой массив:
CompareClass.prototype.deleteResult = function(result)
{
var processed = BX.processHTML(result, false);
console.log(processed); // в processed.SCRIPT - пустой массив
BX.closeWait();
BX.onCustomEvent('OnCompareChange');
BX(this.wrapObjId).innerHTML = result;
};
Правда, вынесение инициализации слайдеров в отдельный файл test.js и подключение его тегом script все же дало некоторый эффект: когда мы удаляем из сравнения первый товар, файл срабатывает и слайдеры инициализируются. Но если вслед за ним удалить второй товар, то файл test.js перестает отрабатывать, хотя в html тег script, подключающий его, присутствует. Не понимаю, почему так происходит... В общем, задолбался я уже, наверняка решение есть, и оно где-то рядом, но я совсем уже ничего не соображаю(
