Меню

Показать выбранные параметры умного фильтра над товарами, с возможностью отмены выбора

Показать выбранные параметры умного фильтра над товарами, с возможностью отмены выбора

Задача: При выборе параметров товаров в умном фильтре показать выбранные параметры из чекбоксов в виде кнопок и предоставить возможность отмены выбора, кликая по этим кнопкам.
Михаил, добрый день. Очень полезная функция.
Но кнопки с выбранными параметрами появляются и сразу исчезают, если включен режим Ajax в каталоге.
Если Ajax выключить, то кнопки не исчезают, но и не отрабатывают на удаление.
Под Ajax режим да, надо докручивать этот способ, возможно позже допишу в заметку.

А вот почему не отрабатывают на удаление затрудняюсь сказать, проверил на одном проекте - все нормально. Попробуйте в консоли поизучать на конфликты, может с каким-то другим скриптом конфликтует у вас.
Цитата
Алексей написал:
Михаил, добрый день. Очень полезная функция.
Но кнопки с выбранными параметрами появляются и сразу исчезают, если включен режим Ajax в каталоге.
Если Ajax выключить, то кнопки не исчезают, но и не отрабатывают на удаление.
Для того, чтобы работало без включенного ajax, можно немного изменить логику и работать с параметрами url, которые передает фильтр. Но для этого надо немного доработать шаблон самого умного фильтра. Там, где идет foreach с чекбоксами, в тег input надо добавить заполнение дата-атрибута data-url:
Код
data-url="<?= $ar['URL_ID']; ?>
После этого можно изменить функцию removeCheckboxAndClickSubmit из кода, который приводил Михаил
Код
    function removeCheckboxAndClickSubmit(button) {
        button.remove();
        const url = new URL(window.location).toString();
        const itemUrl = button.getAttribute('data-url');
        let newUrl;

        if (url.includes(`-${itemUrl}-or`)) {
            newUrl = url.replace(`-${itemUrl}-or`, '');
        } else {
            if (url.includes(`-or-${itemUrl}`)) {
                newUrl = url.replace(`-or-${itemUrl}`, '');
            } 
            else {
                newUrl = url.replace(`-${itemUrl}`, '');
            }
        }

        window.location.replace(newUrl);
    }

Этот код теперь становится нам не нужен, его можно просто удалить или закомментировать:
Код
    checkboxes.forEach((checkbox) => {        checkbox.addEventListener('change', function () {
            const buttonId = this.id;
            const existingButton = checkedItemsContainer.querySelector(`#${buttonId}`);

            if (this.checked) {
                if (!existingButton) {
                    const button = document.createElement('button');
                    button.id = buttonId;
                    button.textContent = this.nextElementSibling.querySelector('span').textContent;
                    checkedItemsContainer.appendChild(button);
                }
            } else {
                if (existingButton) {
                    existingButton.remove();
                }
            }
        });
    });
Проверил. Страница просто перезагружается и свойство не удаляется.

"url" и "itemUrl" приходят пустые. В итоге "newUrl" не изменяется при клике на кнопку.
Понял, что кнопкам тоже нужно передавать атрибут "data-url"

Поэтому код выглядит так и вроде работает:
Код
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedItemsContainer = document.querySelector('.smart_filter_checked_items');

function removeCheckboxAndClickSubmit(button) {
        button.remove();
        const url = new URL(window.location).toString();
        const itemUrl = button.getAttribute('data-url'); // берем атрибут у кнопки, чтобу удалить из урл
        let newUrl;

        if (url.includes(`-${itemUrl}-or`)) {
            newUrl = url.replace(`-${itemUrl}-or`, '');
        } else {
            if (url.includes(`-is-${itemUrl}`)) { // тут изменение,т.к. у меня 'is' встречается чаще чем 'or'
                newUrl = url.replace(`-is-${itemUrl}`, '');
            } 
            else {
                newUrl = url.replace(`-${itemUrl}`, '');
            }
        }

        window.location.replace(newUrl);
   console.log(itemUrl);
}

checkedItemsContainer.addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON') {
        removeCheckboxAndClickSubmit(event.target);
    }
});

function addCheckedButtonsOnLoad() {
    checkboxes.forEach((checkbox) => {
        if (checkbox.checked) {
            const buttonId = checkbox.id;
            const buttonData = checkbox.getAttribute('data-url'); // берем атрибуты у input checkbox
            const existingButton = checkedItemsContainer.querySelector(`#${buttonId}`);

            if (!existingButton) {
                const button = document.createElement('button');
                button.id = buttonId;
                button.textContent = checkbox.parentElement.querySelector('span').textContent; // тут изменение,т.к. у меня больше span в label
                button.setAttribute('data-url', buttonData); // добавляем атрибуты ко кнопкам
                checkedItemsContainer.appendChild(button);
            }
   console.log(buttonData);
        }
    });
}

addCheckedButtonsOnLoad();

Ну и вверху забыли ковычку в коде:

Там, где идет foreach с чекбоксами, в тег input надо добавить заполнение дата-атрибута data-url: data-url="<?= $ar['URL_ID']; ?>"
Алексей, точно, извиняюсь, упустил этот момент
Думаю умеет смысл уточнить, что для приведенного примера блок с классом .smart_filter_checked_items должен быть вставлен после вывода всех чекбоксов, например после вызова фильтра. Если он будет вызван ДО, то будет конфликт и чекбоксы будут работать некорректно.
Сделал легкий рефакторинг, может пригодится кому smart.mobile.filter
Читают тему
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
Загрузить файлы
 

Блог-note: заметки разработчика

Простые калькуляторы в карточке товара каталога на Битрикс

На одном из создаваемых сайтов было необходимо сделать небольшой калькулятор и предварительным подсчетом стоимости услуг...

Спойлер в списке новостей 1С-Битрикс

Иногда нужно сделать спойлеры в копонентах 1C-Битрикс, в основном конечно, имеет смысл при очень больших обьемах контент...

Обновить страницу Inapbrowser в приложении Apache Cordova, при выходе из фона

Задача: Мобильное приложение, созданное на Apache Cordova должно перезагрузить текущую страницу, открытую с помощью плаг...

Минимальная сумма заказа в корзине и оформлении заказа в 1С-Битрикс

В этой заметке добавим возможность установки минимальной суммы заказа, в новом шаблоне корзины на 1С-Битрикс.

Фотогалерея на шаблоне новостей в 1С-Битрикс

Частенько стоит задача, по мимо стандартных "Картинка для анонса" и "Детальная картинка", добавить в...

Глобальные фильтры на всякие случаи жизни

Глобальный фильтр, нужен чаще всего, для вывода определенных элементов, из общего массива, инфорблока. Спектр применяем...

Адаптивное гамбургер меню для битрикс

Заметка коротенькая, но решил оставить ее - так как самому часто нужно нечто подобное. В архиве готовый шаблон для Битри...

Отфильтровать новости в Битрикс за заданный период

Иногда, нужно отфильтровать элементы (новости например) по дате в Битрикс, с помощью компонента "список новостей". Для э...

Вывести торговые предложения (SKU) как простые товары в каталоге, с учетом раздела.

Задача: Отобразить SKU товаров в каталоге как простые товары, учитывая текущий раздел. Необходимо вывести все торговые п...