Телеграм: @bazarow_ru Почта: mihail@bazarow.ru
Внимание! Все сообщения на форуме проходят модерацию. Ваше сообщение появится после проверки.
RSS
Умный фильтр во всплывающей панели на мобильных.
 
Умный фильтр во всплывающей панели на мобильных.

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

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

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

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

2. Мобильная версия - ajax отключен
 
Цитата
Гость написал:
В таком случае не хочется отказываться от применения 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 включен
}
 
Да, думаю, на 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 (Опечатки)
 
Сделал - работает, но не выводится количество напротив каждого свойства.
 
Цитата
Николай написал:
Сделал - работает, но не выводится количество напротив каждого свойства.

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

Код
<?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
 
Цитата
Дерните из штатного шаблона. В этом не стал оставлять, их чаще просят не показывать)
Не ожидал столь быстрый ответ ))) Не могли бы Вы поподробней - Какой кусок кода  - из какого файла и куда вставить ( на основе этого видео- урока) . Для профи это конечно "скопировать и вставить" . А я буду целый день с этим разбираться ((( . Спасибо за Ваши уроки - очень познавательно. С Глубоким уважением за Ваши труды.
 
Цитата
Николай написал:
Не ожидал столь быстрый ответ ))) Не могли бы Вы поподробней - Какой кусок кода  - из какого файла и куда вставить ( на основе этого видео- урока) . Для профи это конечно "скопировать и вставить" . А я буду целый день с этим разбираться

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

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

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

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

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

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

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

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

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

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

Создание скидки на общую сумму покупки в Битрикс корзине Просмотров: 28299 Функционал интернет-магазина, работающего под управлением 1С Битрикс, позволяет задавать м... Оптимизация jpeg и png картинок на cron, с помощью jpegoptim и optipn... Просмотров: 2278 Задача: на сайт каждый день проходит выгрузка из 1С с обновлением картинок. Нужно оптимиз... Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 55237 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Cordova, ввод в input под диктовку. Голосовой поиск в мобильном прило... Просмотров: 1608 Итак, задачка: реализовать голосовой поиск в мобильном приложении на Cordova. По сути, нам... Ускорение работы сайта на 1С-Битрикс Просмотров: 17734 Данная статья написана специально под видеоролик (приложен в конце статьи), опубликованный... Умный фильтр на главной странице Битрикс Просмотров: 22295 Редкая но востребованная задачка- это вывести компонент "умный фильтр" на главную страницу... Показать пользователю накопительную скидку за все сделанные заказы, и... Просмотров: 2622 Задача: показать, текущему авторизованному, пользователю сумму всех выполненных заказов и ... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 21888 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... Создание блога с комментариями, оценками и просмотрами на сайте с 1С-... Просмотров: 24530 Если на вашем сайте требуется создание раздела с блогом или новостями, статьями. Записям в... Если папка то применяем...в Битрикс Просмотров: 30407 Бывает, стоит задача применить какой-либо стиль или вывести конкретный кусочек кода для ди... Установить остатки товара на складе из доступных остатков. Просмотров: 6229 Задача, заполнить остатки товаров, в 1С-Битрикс, из параметра "Доступное количество". Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 3430 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Изменить размер картинок на лету в битрикс Просмотров: 48826 Встала задачка: на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздел... Дополнительные параметры в меню Битрикс Просмотров: 20770 Иногда нужно присвоить какой-то функционал к конкретному пункту меню в битрикс. Например о... Время на БД и веб сервере отличается на 3600 секунд, тест Битрикс Просмотров: 16074 Достаточно часто, при проверке параметров системы, в Битрикс, можно увидеть одну из ошибок... Denwer c PHP 7.1.8 и MYSQL 5.7 оптимизированный для Битрикс Просмотров: 30793 В последнее время, все чаще приходиться работать на Windows, хотя и не люблю эту ОС- с точ... Определить местоположение пользователя и показать на карте Просмотров: 3957 Задача определить местоположение текущего пользователя и показать его на карте, с меткой. ... Отключить поиск по описаниям товаров в Битрикс Просмотров: 11844 Иногда, нужно отключить поиск по описаниям анонсов и детальному описанию товаров, при разр... Заполнить коэффициент единицы измерения (MEASURE_RATIO) из свойства э... Просмотров: 6467 Задачка: Каталог наполняется из 1С, но 1С не передает коэффициент единицы измерения (особе... Вывести разделы инфоблока по первым буквам не меняя структуру каталог... Просмотров: 2503 Например: у нас есть инфоблок с большим количеством разделов. И мы хотим, на сайте разбить...