Шаблон умного фильтра в Битриксе достаточно сложный, с точки зрения верстки и не очень красиво отображается на мобильных устройствах, занимая много места над товарами.
Я сделал шаблон выезжающий сбоку при нажатии на кнопку, при этом учел упрощение верстки под конкретный дизайн сайта.
Типовой шаблон умного фильтра привязан к bootstrap сетке, что не всегда удобно, так как не все используют bootstrap при верстке сайтов. Подключать лишние 150 килобайт стилей из-за этого компонента не очень продуктивно.
Кроме того, на мобильных устройствах фильтр занимает много места над товарами. Особенно, если в вашем магазине много свойств, это становится совсем неуместным. И даже отобрав какие-то параметры, не каждый пользователь выдержит постоянную промотку до результатов.
На много удобнее сделать вот так: при мобильном разрешении фильтр скрывается в боковую панель и на его месте появляется кнопка вызова "Показать фильтр". При нажатии на кнопку, фильтр выезжает поверх области просмотра и имеет собственную прокрутку по вертикали (если параметры не помещаются по высоте)
В приложенном архиве шаблон умного фильтра сделанный по такому принципу. В довесок к такому поведению, в нем упрощенная верстка с использованием sass, что позволит легко переделать дизайн фильтра под дизайн конкретного сайта.
Скачать архив с шаблономВ приложенном шаблоне оставлены часто используемые варианты параметров: цифры с ползунками, чекбоксы и радиокнопки. При этом окультуренные, что бы выглядело красиво.
Если используете и другие параметры, можете "дернуть" их из штатного фильтра, просто скопировать нужные case-ы.
Шаблон самодостаточный: не нужно выводить фильтр дважды, он умеет работать и на декстопе (работает как обычный фильтр) и на мобильном. Вся логика заключена исключительно в css и совсем немного js.
Уже при желании и потребности, можно прикреплять кнопку вызова фильтра, что бы постоянно была сверху (при прокрутке страницы) или вывести отобранные параметры под ней.
Видео: умный фильтр для мобильных разрешений
Как устроен шаблон и как его модифицировать, смотрите в видео.
Поддержать выпуски видео уроков, поблагодарить за полезную инструкцию или заметку можно через:
Юманей
| Цитата |
|---|
| Николай написал: Сделал - работает, но не выводится количество напротив каждого свойства. |
Добавьте, в нужных свойствах.
| Код |
|---|
<?if ($arParams["DISPLAY_ELEMENT_COUNT"] !== "N" && isset($ar["ELEMENT_COUNT"])):?> <span data-role="count_<?=$ar["CONTROL_ID"]?>"> <? echo $ar["ELEMENT_COUNT"]; ?> </span> <?endif;?> |
| Цитата |
|---|
| Дерните из штатного шаблона. В этом не стал оставлять, их чаще просят не показывать) |
| Цитата |
|---|
| Николай написал: Не ожидал столь быстрый ответ ))) Не могли бы Вы поподробней - Какой кусок кода - из какого файла и куда вставить ( на основе этого видео- урока) . Для профи это конечно "скопировать и вставить" . А я буду целый день с этим разбираться |
Выше успел отредактировать свой же пост. Там ответ)
| Цитата | ||
|---|---|---|
написал:
Выше успел отредактировать свой же пост. Там ответ) |
| Цитата |
|---|
| Гость написал: Теперь разбираюсь с моментом: группа свойств свернута или развернута - в стандартном шаблоне стрелочка стоит вниз и при наведении подчеркивание, если свернуто. |
После названия параметра можете добавить любой div или например i
| Код |
|---|
<?= $arItem["NAME"] ?> <i> > </i> |
Вместо > использовать картинку или стрелку из fontawesome
В стилях ее переворачивать если у блока есть селектор bx-active (оно уже есть в шаблоне) например так:
| Код |
|---|
.bx-active .smart-filter_title i {
transform: rotate(90deg)
}
|
| Цитата | ||||||
|---|---|---|---|---|---|---|
написал:
После названия параметра можете добавить любой div или например i
Вместо > использовать картинку или стрелку из fontawesome В стилях ее переворачивать если у блока есть селектор bx-active (оно уже есть в шаблоне) например так:
|
или $this->SetViewTarget ( основной гимор был в понимании , как это в кнопку убрать - сворачивать , разворачивать) . Может это будет в следующих заметках))). Остановился на Вашем варианте. Спасибо.
| Цитата |
|---|
| Влад написал: Привет, у меня такой вопрос. Создал на страничке поиска компонент catalog.search по вашим видео урокам. Как сделать чтобы умный фильтр работал на страничке поиска? Желательно с примером кода я новичок) |