Last active
October 26, 2022 07:17
-
-
Save VasiliuKr/85b4e95988e5f445fecb800703b818ef to your computer and use it in GitHub Desktop.
catalog.smart.filter - ajax обновление списка без AXAJ_MODE
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// В шаблоне 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);
}
В 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 – ваша обертка для списка товаров
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Обновляет список товаров в каталоге по изменению свойства в фильтре без перезагрузки страницы.