Телеграм: @camouf_ru Почта: mihail@bazarow.ru
Лето Осень Зима Весна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vlad25.05.2022
"Параметры уже выбранные в фильтре при нажатии сбрасываются" создаются с помощью второго орезанного умного фильтра? Или есть метод попроще?  
Vlad25.05.2022
Я решал аналогичным методом такую задачу. Но есть проблемка, такая же и с применением вашего метода. При выборе параметра в фильтре с мобильным разрешением при включённом аяксе сразу происходит переход на отфильтрованный список. Т. е., не получается указать несколько параметров в фильтре. Что делать? Отключить аякс как то не современно :)  
Михаил Базаров26.05.2022
Цитата
Vlad написал:
"Параметры уже выбранные в фильтре при нажатии сбрасываются" создаются с помощью второго орезанного умного фильтра? Или есть метод попроще?  

В примере, который в видео, да- просто еще один раз выведен умный фильтр.
Но, думаю, лучше js-ом копировать параметры в невидимый блок и клики передавать в фильтр- по практичнее будет.
Михаил Базаров26.05.2022
Цитата
Vlad написал:
Я решал аналогичным методом такую задачу. Но есть проблемка, такая же и с применением вашего метода. При выборе параметра в фильтре с мобильным разрешением при включённом аяксе сразу происходит переход на отфильтрованный список. Т. е., не получается указать несколько параметров в фильтре. Что делать? Отключить аякс как то не современно :)  

Ну тут думаю ни как ) Либо одно- либо другое.
Гость26.05.2022
В таком случае не хочется отказываться от применения Ajax в фильтре, который расположен в боковой панели при использовании на ПК версии сайта, все красиво работает. Как и какое лучше применить условие для фильтра:
1. ПК версия - ajax включен

2. Мобильная версия - ajax отключен
Гость26.05.2022
Цитата
Гость написал:
В таком случае не хочется отказываться от применения Ajax в фильтре, который расположен в боковой панели при использовании на ПК версии сайта, все красиво работает. Как и какое лучше применить условие для фильтра:
1. ПК версия - ajax включен

2. Мобильная версия - ajax выключен
if (screen.width <= 768){
If  (screen.width <=768>){
Ajax выключен
}
else
{Ajax включен
}

или
аналогичное по методу PHP условие
[TABLE][TR][TH]Код[/TH][/TR][TR][TD]if(
   (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone')
    || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
    || strstr($_SERVER['HTTP_USER_AGENT'],'Android')
) {
  Аjax отключен
}
else
{
Ajax включен
} [/TD][/TR][/TABLE]
Михаил Базаров26.05.2022
Да, думаю, на php лучше всего проверять. Так, исключительно из соображений изящества)

PS кстати, ну мало ли полезно будет кому-то. В Бизнес версии можно из модуля конверсии это брать.
Тот же mobile detect просто в ядре.
Код
$isMobile = \Bitrix\Main\Loader::includeModule('conversion') && ($md = new \Bitrix\Conversion\Internals\MobileDetect) && $md->isMobile();
    if ($isMobile == 1) {
        Мобила
    } else {
        Не мобила
    }
Николай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 ( основной гимор был в понимании , как это в кнопку убрать - сворачивать , разворачивать) . Может это будет в следующих заметках))). Остановился на Вашем варианте. Спасибо.  

Цены и сроки на разработку проекта

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

Опросник на разработку:

Вы можете скачать развернутый опросник на разработку, заполнить и выслать на электронную почту.

Скачать опросник.doc

После ознакомления, я смогу задать уточняющие вопросы и оценить проект по стоимости и срокам разработки.

Заказать разработку