Javascript — настроить фильтр (кейс: умный фильтр Битрикс) для выбора (checkbox) только одного раздела фильтра.

Javascript — настроить фильтр (кейс: умный фильтр Битрикс) для выбора (checkbox) только одного раздела фильтра.

Понадобилось сделать так, чтобы была возможность выбрать только какой-то один фильтр, при этом, второй фильтр одновременно с выбранным выбрать было нельзя. ))

Масло масляное, но в группах товаров на сайте есть взаимоисключающие друг друга фильтры.

Для реализации этого в Битрикс, в шаблоне вывода умного фильтра, добавил для input type=»checkbox» в цикле foreach поэлементного вывода дополнительный атрибут

data-filtername="<?=$arItem["NAME"]?>"

где <?=$arItem[«NAME»]?> — это не название пункта фильтра, а название раздела фильтра. Ну, например, раздел фильтра «Цвет» имеет имеет несколько элементов — цветов. Так вот, в каждом элементе раздела «Цвет» будет поле атрибута с названием «Цвет», т.е., data-filtername=»Цвет».

По сути, если элементы фильтра выводятся не в цикле, то атрибут вставляется в нужные input checkbox в HTML.

И там же в шаблоне добавил скрипт для реализации функционала:

<script>

// для первого раздела фильтра
let filterCheck = document.querySelectorAll("input[data-filtername='Одно']");  // выбираем все input с нужным атрибутом
// проходим циклом по всем элементам для проверки: если в другом разделе фильтра уже выбран какой-либо пункт, то, при клике на нашем checkbox, снимаем с него галку и выводим предупреждение

filterCheck.forEach(function(item) {
item.onclick = function() {
if (document.querySelector("input[data-filtername='Другое']:checked")) {
alert('Простите, но невозможно выбрать в фильтре Одно и Другое одновременно.')
item.checked = false; // снимаем галку с элемента
}
}
});

// аналогично первому
let filterCheck2 = document.querySelectorAll("input[data-filtername='Другое']");
filterCheck2.forEach(function(item) {
item.onclick = function() {
if (document.querySelector("input[data-filtername='Одно']:checked")) {
alert('Простите, но невозможно выбрать в фильтре Одно и Другое одновременно')
item.checked = false;
}
}
});

</script>

Реализация, понятное дело, не универсальная, но на скорую руку вполне рабочий вариант.

Please follow and like us:

Оставьте комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Открыть чат
1
Попробуйте написать нам в WhatsApp!
Попробуйте написать нам в WhatsApp!