Фильтры каталога товаров в виде ползукнов "от-до" в Тильде
Продолжаем улучшать каталог Тильды. На этот раз преобразил фильтры.
Код высчитывает min и max значения каждой величины и формирует диапазон. При перетаскивании ползунка данные передаются в Тильду и она сама фильтрует товары.
Код высчитывает min и max значения каждой величины и формирует диапазон. При перетаскивании ползунка данные передаются в Тильду и она сама фильтрует товары.
Функционал новых фильтров:
Ползунки “от–до” вместо стандартного списка чекбоксов: Длина, Ширина, Высота и Объём выводятся в одну строку, каждый с собственным диапазоном.
Синхронизация с существующими фильтрами Тильды: ползунок кликает только те чекбоксы, значения которых попадают в текущий диапазон конкретного фильтра, и сбрасывает фильтр, если выставить начальное значение ползунков.
Ручной ввод поля «от» и «до» над ползунком можно заполнять вручную — слайдер подтягивается под цифры и применяет фильтрацию.
Мобильный попап: на мобилках кнопки Длина/Ширина/Высота/Объём открывают отдельный всплывающий модуль с аналогичным ползунком и полями ввода; результат «Применить» синхронизирует с фильтрами Тильды. Кнопки закрыть у попапа нет, так как это добавляет визуальный шум, настроено интуитивное закрытие по тапу на затемненную область без применения фильтров.
Ключевые возможности:
1. При загрузке страницы минимальный и максимальный пределы всех фильтров вычисляются автоматически по фактическим значениям характеристик (например, Ширина от 40 до 80 мм).
Так что если добавить новое значение больше текущего максимального, то будет пересчет фильтра и выставлен новый диапазон.
2. Если пользователь возвращает ползунок в исходное положение (от = min, до = max), соответствующий фильтр автоматически сбрасывается.
Остальные активные фильтры остаются нетронутыми.
Заказать разработку похожего функционала -https://t.me/Bortsov_Mt
Ползунки “от–до” вместо стандартного списка чекбоксов: Длина, Ширина, Высота и Объём выводятся в одну строку, каждый с собственным диапазоном.
Синхронизация с существующими фильтрами Тильды: ползунок кликает только те чекбоксы, значения которых попадают в текущий диапазон конкретного фильтра, и сбрасывает фильтр, если выставить начальное значение ползунков.
Ручной ввод поля «от» и «до» над ползунком можно заполнять вручную — слайдер подтягивается под цифры и применяет фильтрацию.
Мобильный попап: на мобилках кнопки Длина/Ширина/Высота/Объём открывают отдельный всплывающий модуль с аналогичным ползунком и полями ввода; результат «Применить» синхронизирует с фильтрами Тильды. Кнопки закрыть у попапа нет, так как это добавляет визуальный шум, настроено интуитивное закрытие по тапу на затемненную область без применения фильтров.
Ключевые возможности:
1. При загрузке страницы минимальный и максимальный пределы всех фильтров вычисляются автоматически по фактическим значениям характеристик (например, Ширина от 40 до 80 мм).
Так что если добавить новое значение больше текущего максимального, то будет пересчет фильтра и выставлен новый диапазон.
2. Если пользователь возвращает ползунок в исходное положение (от = min, до = max), соответствующий фильтр автоматически сбрасывается.
Остальные активные фильтры остаются нетронутыми.
Заказать разработку похожего функционала -https://t.me/Bortsov_Mt