Изменено: 08 ноября 2023

Фильтр товаров

1. Общая информация
2. Настройка
2.1. Меняем тип отображения параметров в фильтре вне зависимости от настроек поля
3. Кастомизация
3.1. Как убрать выделение курсором текста при раскрытии фильтра
3.2. Сортировка «Сначала недорогие», «Сначала дорогие» и т.д. — как добавить произвольный параметр?
3.3. Как менять порядок полей в фильтре?
3.4. Выводим произвольный параметр фильтра в любом месте

1. Общая информация

Фильтр позволяет осуществлять сортировку товаров с Ajax (на лету) и предоставляет возможность гибкой настройки для отображения при различных сценариев.

Скачать модуль фильтра

К оглавлению

2. Настройка

2.1. Меняем тип отображения параметров в фильтре вне зависимости от настроек поля

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

Редактирование поля. Опции. тип поля - список (одиночный выбор)

Редактировать товар. Одиночный выбор из списка

Редактирование поля. Вкладка Отображение > Фильтр. Выбираем чекбоксы

Редактировать товар. Одиночный выбор из списка

Фильтр. Чекбоксы для множественного выбора

Итого мы получаем: в режиме редактирования товара одиночный выбор из выпадающего списка и множественный выбор на фронте в фильтре.

К оглавлению

3. Кастомизация

3.1. Как убрать выделение курсором текста при раскрытии фильтра

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

Рис. 1. Фильтр товаров. Выделение текста

Для решения этой проблемы, вам нужно дописать следующий CSS код:


.uk-accordion-title, .uk-accordion-content {user-select:none}

Это позволит избежать выделения текста в модуле фильтра.

К оглавлению

3.2. Сортировка «Сначала недорогие», «Сначала дорогие» и т.д. — как добавить произвольный параметр?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

К оглавлению

3.3. Как менять порядок полей в фильтре?

Принцип работы полей в фильтре: сначала осуществляется сортировка группы полей (fieldset), потом полей.

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