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

Внимание! Все сообщения на форуме проходят модерацию. Ваше сообщение появится после проверки.

RSS

Михаил Базаров

Администратор

Сообщений: 1773 Баллов: 999999 Рейтинг: 2 Регистрация: 07.11.2013

Это нравится:0 Да/0 Нет

22.05.2022 11:01:40

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

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

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

Цитировать Имя

Vlad Гость	#2 Это нравится:0 Да/0 Нет 25.05.2022 23:21:30 "Параметры уже выбранные в фильтре при нажатии сбрасываются" создаются с помощью второго орезанного умного фильтра? Или есть метод попроще?
	Цитировать Имя

Vlad

Гость

Это нравится:0 Да/0 Нет

25.05.2022 23:34:01

Я решал аналогичным методом такую задачу. Но есть проблемка, такая же и с применением вашего метода. При выборе параметра в фильтре с мобильным разрешением при включённом аяксе сразу происходит переход на отфильтрованный список. Т. е., не получается указать несколько параметров в фильтре. Что делать? Отключить аякс как то не современно

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1773 Баллов: 999999 Рейтинг: 2 Регистрация: 07.11.2013

Это нравится:0 Да/0 Нет

26.05.2022 09:54:19

Цитата
Vlad написал: "Параметры уже выбранные в фильтре при нажатии сбрасываются" создаются с помощью второго орезанного умного фильтра? Или есть метод попроще?

В примере, который в видео, да- просто еще один раз выведен умный фильтр.
Но, думаю, лучше js-ом копировать параметры в невидимый блок и клики передавать в фильтр- по практичнее будет.

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1773 Баллов: 999999 Рейтинг: 2 Регистрация: 07.11.2013

Это нравится:0 Да/0 Нет

26.05.2022 09:55:06

Цитата

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

Ну тут думаю ни как ) Либо одно- либо другое.

Цитировать Имя

Гость

Это нравится:0 Да/0 Нет

26.05.2022 15:58:54

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

2. Мобильная версия - ajax отключен

Цитировать Имя

Гость

Это нравится:0 Да/0 Нет

26.05.2022 16:31:02

Цитата

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

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

If (screen.width <=768>){
Ajax выключен
}
else
{Ajax включен
}

или
аналогичное по методу PHP условие

Код
if( (strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') \|\| strstr($_SERVER['HTTP_USER_AGENT'],'iPod') \|\| strstr($_SERVER['HTTP_USER_AGENT'],'Android') ) { Аjax отключен } else { Ajax включен }

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1773 Баллов: 999999 Рейтинг: 2 Регистрация: 07.11.2013

Это нравится:0 Да/0 Нет

26.05.2022 18:55:24

Да, думаю, на php лучше всего проверять. Так, исключительно из соображений изящества)

PS кстати, ну мало ли полезно будет кому-то. В Бизнес версии можно из модуля конверсии это брать.
Тот же mobile detect просто в ядре.

Код

$isMobile = \Bitrix\Main\Loader::includeModule('conversion') && ($md = new \Bitrix\Conversion\Internals\MobileDetect) && $md->isMobile();
    if ($isMobile == 1) {
        Мобила
    } else {
        Не мобила
    }

Изменено: Михаил Базаров - 26.05.2022 18:56:45 (Опечатки)

Цитировать Имя

Николай Гость	#9 Это нравится:0 Да/0 Нет 03.06.2022 11:49:09 Сделал - работает, но не выводится количество напротив каждого свойства.
	Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1773 Баллов: 999999 Рейтинг: 2 Регистрация: 07.11.2013

#10

Это нравится:0 Да/0 Нет

03.06.2022 12:17:52

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

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

Код
<?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 16:46:41

Цитировать Имя

Николай

Гость

#11

Это нравится:0 Да/0 Нет

03.06.2022 12:31:40

Цитата
Дерните из штатного шаблона. В этом не стал оставлять, их чаще просят не показывать)

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

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1773 Баллов: 999999 Рейтинг: 2 Регистрация: 07.11.2013

#12

Это нравится:0 Да/0 Нет

03.06.2022 16:46:23

Цитата

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

Выше успел отредактировать свой же пост. Там ответ)

Цитировать Имя

Гость

#13

Это нравится:0 Да/0 Нет

03.06.2022 18:17:40

Цитата

написал:

Цитата

Выше успел отредактировать свой же пост. Там ответ)

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

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 1773 Баллов: 999999 Рейтинг: 2 Регистрация: 07.11.2013

#14

Это нравится:0 Да/0 Нет

04.06.2022 04:06:50

Цитата
Гость написал: Теперь разбираюсь с моментом: группа свойств свернута или развернута - в стандартном шаблоне стрелочка стоит вниз и при наведении подчеркивание, если свернуто.

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

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

Вместо > использовать картинку или стрелку из fontawesome
В стилях ее переворачивать если у блока есть селектор bx-active (оно уже есть в шаблоне) например так:

Код
.bx-active .smart-filter_title i { transform: rotate(90deg) }

Изменено: Михаил Базаров - 04.06.2022 04:08:45

Цитировать Имя

Гость

#15

Это нравится:0 Да/0 Нет

05.06.2022 19:17:46

Цитата

написал:

Цитата
Гость написал: Теперь разбираюсь с моментом: группа свойств свернута или развернута - в стандартном шаблоне стрелочка стоит вниз и при наведении подчеркивание, если свернуто.

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

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

Код
.bx-active .smart-filter_title i { transform: rotate(90deg) }

Спасибо большое за ответ - ещё вчера увидел и ушел на два дня в стилизацию фильтра - думаю не плохо получилось. Попутно были мысли просто установить второй фильтр для мобильных или установленный обернуть ob_start ();
или $this->SetViewTarget ( основной гимор был в понимании , как это в кнопку убрать - сворачивать , разворачивать) . Может это будет в следующих заметках))). Остановился на Вашем варианте. Спасибо.

Цитировать Имя

Влад

Гость

#16

Это нравится:0 Да/0 Нет

08.11.2022 14:39:53

Привет, у меня такой вопрос. Создал на страничке поиска компонент catalog.search по вашим видео урокам. Как сделать чтобы умный фильтр работал на страничке поиска? Желательно с примером кода я новичок)

Цитировать Имя

Гость

#17

Это нравится:0 Да/0 Нет

09.11.2022 14:12:25

Цитата
Влад написал: Привет, у меня такой вопрос. Создал на страничке поиска компонент catalog.search по вашим видео урокам. Как сделать чтобы умный фильтр работал на страничке поиска? Желательно с примером кода я новичок)

В общем то со всем справился)

Изменено: Михаил Базаров - 09.11.2022 15:14:46

Цитировать Имя

Андрей Гость	#18 Это нравится:0 Да/0 Нет 12.11.2022 05:11:20 Михаил, спасибо за фильтр!
	Цитировать Имя

BBCode Правила

Форма ответов

Ваше имя*

Ваш E-Mail

Текст сообщения*

Перетащите файлы

Ничего не найдено

Загрузить файлы

Показывать графические смайлы в этом сообщении

Поблагодарить и поддержать!

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

Юманей

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

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