Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Умный фильтр во всплывающей панели на мобильных.

Просмотров: 1412

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

Типовой шаблон умного фильтра привязан к bootstrap сетке, что не всегда удобно, так как не все используют bootstrap при верстке сайтов. Подключать лишние 150 килобайт стилей из-за этого компонента не очень продуктивно.

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

Умный фильтр битрикс

На много удобнее сделать вот так: при мобильном разрешении фильтр скрывается в боковую панель и на его месте появляется кнопка вызова "Показать фильтр". При нажатии на кнопку, фильтр выезжает поверх области просмотра и имеет собственную прокрутку по вертикали (если параметры не помещаются по высоте)

Показать фильтр битрикс

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

Скачать архив с шаблоном

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

Если используете и другие параметры, можете "дернуть" их из штатного фильтра, просто скопировать нужные case-ы.

Шаблон самодостаточный: не нужно выводить фильтр дважды, он умеет работать и на декстопе (работает как обычный фильтр) и на мобильном. Вся логика заключена исключительно в css и совсем немного js.

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

Параметры фильтр битрикс

Видео: умный фильтр для мобильных разрешений

Как устроен шаблон и как его модифицировать, смотрите в видео.

Николай 03.06.2022
Сделал - работает, но не выводится количество напротив каждого свойства.
Михаил Базаров 03.06.2022
Цитата
Николай написал:
Сделал - работает, но не выводится количество напротив каждого свойства.

Добавьте, в нужных свойствах.

Код
<?if ($arParams["DISPLAY_ELEMENT_COUNT"] !== "N" && isset($ar["ELEMENT_COUNT"])):?> 
       <span data-role="count_<?=$ar["CONTROL_ID"]?>">
                <? echo $ar["ELEMENT_COUNT"]; ?>
       </span>
<?endif;?>
Николай 03.06.2022
Цитата
Дерните из штатного шаблона. В этом не стал оставлять, их чаще просят не показывать)
Не ожидал столь быстрый ответ ))) Не могли бы Вы поподробней - Какой кусок кода  - из какого файла и куда вставить ( на основе этого видео- урока) . Для профи это конечно "скопировать и вставить" . А я буду целый день с этим разбираться ((( . Спасибо за Ваши уроки - очень познавательно. С Глубоким уважением за Ваши труды.
Михаил Базаров 03.06.2022
Цитата
Николай написал:
Не ожидал столь быстрый ответ ))) Не могли бы Вы поподробней - Какой кусок кода  - из какого файла и куда вставить ( на основе этого видео- урока) . Для профи это конечно "скопировать и вставить" . А я буду целый день с этим разбираться

Выше успел отредактировать свой же пост. Там ответ)
Гость 03.06.2022
Цитата
написал:
Цитата
Николай написал:
Не ожидал столь быстрый ответ ))) Не могли бы Вы поподробней - Какой кусок кода  - из какого файла и куда вставить ( на основе этого видео- урока) . Для профи это конечно "скопировать и вставить" . А я буду целый день с этим разбираться

Выше успел отредактировать свой же пост. Там ответ)
Спасибо - увидел позже. Нашел куда вставить - работает. Теперь разбираюсь с моментом: группа свойств  свернута или развернута - в стандартном шаблоне  стрелочка стоит вниз и при наведении подчеркивание, если свернуто. Стрелка Вверх , если развернуто. Удобно для понимания посетителя, что тут можно развернуть. Это я так понял из библиотек шрифтов Font Awesome . Ну никак пока не получается прикрутить к вашему шаблону. Может есть совет? Что, куда - вставить. Уже несколько часов вникаю в этот вопрос))).  
Михаил Базаров 04.06.2022
Цитата
Гость написал:
Теперь разбираюсь с моментом: группа свойств  свернута или развернута - в стандартном шаблоне  стрелочка стоит вниз и при наведении подчеркивание, если свернуто.

После названия параметра можете добавить любой div или например i

Код
<?= $arItem["NAME"] ?> <i> > </i>

Вместо > использовать картинку или стрелку из fontawesome
В стилях ее переворачивать если у блока есть селектор bx-active (оно уже  есть в шаблоне) например так:
Код
.bx-active .smart-filter_title i {
transform: rotate(90deg)
}
Гость 05.06.2022
Цитата
написал:
Цитата
Гость написал:
Теперь разбираюсь с моментом: группа свойств  свернута или развернута - в стандартном шаблоне  стрелочка стоит вниз и при наведении подчеркивание, если свернуто.

После названия параметра можете добавить любой div или например i

Код
 <?= $arItem["NAME"] ?> <i> > </i> 

Вместо > использовать картинку или стрелку из fontawesome
В стилях ее переворачивать если у блока есть селектор bx-active (оно уже  есть в шаблоне) например так:
Код
 .bx-active .smart-filter_title i {
transform: rotate(90deg)
}
 
Спасибо большое за ответ - ещё вчера увидел и ушел на два дня в стилизацию фильтра - думаю не плохо получилось. Попутно были мысли просто установить второй фильтр для мобильных или установленный обернуть ob_start ();
или $this->SetViewTarget ( основной гимор был в понимании , как это в кнопку убрать - сворачивать , разворачивать) . Может это будет в следующих заметках))). Остановился на Вашем варианте. Спасибо.  
Влад 08.11.2022
Привет, у меня такой вопрос. Создал на страничке поиска компонент catalog.search по вашим видео урокам. Как сделать чтобы умный фильтр работал на страничке поиска? Желательно с примером кода я новичок)  
Гость 09.11.2022
Цитата
Влад написал:
Привет, у меня такой вопрос. Создал на страничке поиска компонент catalog.search по вашим видео урокам. Как сделать чтобы умный фильтр работал на страничке поиска? Желательно с примером кода я новичок)  
В общем то со всем справился)
Андрей 12.11.2022
Михаил, спасибо за фильтр!  

Записная книжка разработчика

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

Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 10610 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Информация о заказах и содержимое корзины текущего пользователя. Просмотров: 11731 В процессе разработки сайта могут понадобиться рецепты приведенные ниже. Использовать можн... Вывод даты создания элемента в правильном формате в Битрикс Просмотров: 21619 Если нужно вывести дату создания новости, статьи или товара в каталоге, в принципе любого ... Memcached на сайте под управлением битрикс, при использовании Веб Окр... Просмотров: 6908 Если вам важна скорость отдачи сайта, а у вашего сервера медленный диск для использования ... Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружени... Просмотров: 25829 WebP это современный формат сжатия изображений, который позволяет, при правильных настройк... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 744 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Фотогалерея на базе компонента новостей, с fancybox. Просмотров: 1512 Это заметка обновление к очень старой, уже имеющейся на сайте. Сделаем что-то типа фотогал... Менять большую картинку, при клике на маленькую, в детальной карточке Просмотров: 1749 Мини скриптик, может кому пригодится для каталога товаров или новостей при использовании д... Вывод элементов с помощью API битрикс Просмотров: 22370 Иногда, выводить элементы инфоблока с помощью компонентов, может оказаться избыточным. Нап... Малая корзина Битрикс, упрощенный шаблон Просмотров: 12513 Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке ... Помечаем новинки лейблом в каталоге битрикс Просмотров: 20008 Достаточно часто, при разработке каталога товаров или интернет магазина на системе управле... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 19696 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Следующая/предыдущая новость/статья при просмотре подробной в Битрикс Просмотров: 17519 Дизайн создается только для наглядного и удобного предоставления содержимого сайта, пользо... Отключить поиск по описаниям товаров в Битрикс Просмотров: 10581 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр... Как вывести картинки к разделам на базе _ext меню Просмотров: 7068 Просто для эстетической красоты, нужно вывести в меню разделов сайта картинки или иконки. ... Вывести свойство отдельно ото всех или исключить из всех Просмотров: 6987 Иногда, на сайте, под управлением 1С-Битрикс, нужно вывести какое-то конкретное свойство о... Валидация пароля и подтверждения при регистрации в битрикс Просмотров: 14234 Встала задачка сделать валидацию пароля и его подтверждения в стандартной форме регистраци... Получение доступа к железу устройства из Битрикс мобильное приложение Просмотров: 5573 Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функцион... Заполнить коэффициент единицы измерения (MEASURE_RATIO) из свойства э... Просмотров: 5694 Задачка: Каталог наполняется из 1С, но 1С не передает коэффициент единицы измерения (особе... Объединить отдельные поля ФИО в одно свойство при оформлении заказа. Просмотров: 855 Пользователь, при оформлении заказа, заполняет три отдельных поля с фамилией, именем и отч...