Битрикс умный фильтр, catalog.smart.filter ajax обновление данных без AXAJ_MODE

В шаблоне bitrix:catalog.smart.filter редактируем script.js - ищем функцию JCSmartFilter.prototype.postHandler и редактируем следующее

//if (modef.style.display === 'none')
//{
//  modef.style.display = 'inline-block';
//}

$.get(
    result.FILTER_AJAX_URL, 
    function (data) {
        $('.catalog-list').html($(data).find('.catalog-list').html());
    }
);

// .catalog-list - селектор который необходимо обновить. Естественно jQuery должен быть подключен.

В 18ой версии не работало, пока не исправил url:

$.get(
    BX.util.htmlspecialcharsback(result.FILTER_AJAX_URL), 
    function (data) {
        $('.catalog-list').html($(data).find('.catalog-list').html());
    }
);

Можно еще сделать так, чтобы обновлялось без перезагрузки страницы, но по нажатию на какую-нибудь кнопку. Получается, что-то вроде такого:

$(document).on('click', $('any-button-selector'), function () {
    $.get( BX.util.htmlspecialcharsback(result.FILTER_AJAX_URL),
        function (data) { 
            $('.catalog-list').html($(data).find('.catalog-list').html()); 
        }
     );
 });

vanilajs:

Дописываем метод в прототип JCSmartFilter для поиска в куске html нужной ноды, это делает код с jquery выше: $(data).find('.catalog-list')

JCSmartFilter.prototype.findSelectorInHtml = function(html, selector){
    var wrapperNode = document.createElement('div');
    wrapperNode.innerHTML = html;

    return wrapperNode.querySelector(selector);j
}

В JCSmartFilter.prototype.postHandler в ветку else там где if (result.INSTANT_RELOAD && result.COMPONENT_CONTAINER_ID) пишем:

var self = this;
url = BX.util.htmlspecialcharsback(result.FILTER_AJAX_URL);
BX.ajax.get(url, function(data) {
    var tableWrapper = document.querySelector('.products__wrapper');
    var newTableWrapper = self.findSelectorInHtml(data, '.products__wrapper');
    tableWrapper.innerHTML = newTableWrapper.innerHTML
});

Где .products__wrapper – ваша обертка для списка товаров


Ключевые преимущества:

  • Полный контроль над структурой запросов и ответов

  • Возможность кастомизации прелоадеров и обработки ошибок

  • Совместимость с нестандартными шаблонами компонента

Решение особенно актуально для проектов с требованием к оптимизации производительности и нестандартной логикой взаимодействия с фильтром.