Фильтр по элементам

Бесплатно!
Фильтр по элементам

Битрикс модуль "Фильтр по элементам" – это простой, почти стандартный фильтр Битрикс по элементам раздела/каталога.
Компонент работает в паре cо стандартным компонентом каталога "Элементы раздела", сам компонент фильтра товары не выводит, он только передает в компонент каталога Элементы раздела (catalog.section) параметры, выбранные в форме фильтрации посетителем сайта.

Основные возможности

  • Фильтрация по Названию и по свойствам типа Строка с использованием словоформ (см. демо);
  • Поиск-автокомплит по Названию и по свойствам типа Строка;
  • Возможность фильтрации в комплексном компоненте каталога (требует технических знаний и программирования);
  • Возможность фильтрации по свойству "Привязка к элементам" в виде списка, работает и для множественных свойств привязки;
  • Возможность фильтрации элементов инфоблока по свойству "Привязка к разделам";
  • Возможность фильтрации элементов инфоблока по свойству "Дата/Время"
    (в значении свойства должна быть только дата, иначе работает непредсказуемо);
  • Возможность задать путь к каталогу/файлу, куда перенаправлять посетителя с данными для фильтрации;
  • Слайдер/ползунки для цен и для свойств типа Число;
  • Вывод полей и свойств элементов инфоблока;
  • Вывод полей и свойств торговых предложений;
  • Для числовых значений полей От и До есть возможность включить/отключить учет активности разделов;
  • Возможность указать ID раздела из $_REQUEST;
  • Возможность указать CODE раздела из $_REQUEST;
  • Возможность управлять внешним видом полей из настроек компонента, например, можно выпадающие списки сделать флажками (чекбоксами);
  • Возможность выводить заданные уровни разделов в селект, задавать название селекта c разделами и др.;
  • Возможность убрать точки из свойств и полей разделов;
  • Настройка и поддержка кеширования;
  • Возможность сохранять установки фильтра в сессии;
  • Фильтрация по "Типам цен";
  • В комплекте 4 резиновых шаблона (2 горизонтальных и 2 вертикальных) и 25 тем (стилей) для ползунков.
Обратите внимание!
Фильтр выводит все заданные в настройках свойства и все значения свойств независимо от раздела каталога (это не тот самый умный фильтр);

jQuery плагины

  • jQuery 1.8.3 ядра Битрикс;
  • jQuery UI 1.10.3 custom для ползунков;
  • HTML5 Placeholder jQuery Plugin - плагин для кроссбраузерных HTML5 плейсхолдеров полей формы;
  • Ajax AutoComplete for jQuery - плагин для поиска значений текстовых полей с автокомплитом;
  • jQuery Form Styler - плагин для оформления полей форм;
  • Chosen - плагин для оформления выпадающих списков. 

Примеры интеграций

http://tuning-soft.ru/news/

Встроенные шаблоны

Шаблон default
Шаблон gray-blue
Шаблон table Шаблон vertical-dark-red
1) Разместил компонент фильтра на странице с компонентом каталога но фильтрация не работает?
  1. Возможно компонент каталога переделан разработчиком сайта, т.к. фильтр работает только со СТАНДАРТНЫМИ КОМПОНЕНТАМИ КАТАЛОГА БИТРИКС.
    Стандартные компоненты каталога, с которыми работает фильтр, называются Каталог и Элементы раздела, в исходном коде страницы они называются bitrix:catalog и bitrix:catalog.section
    Но даже стандартные компоненты каталога часто переделываются разработчиками наживо в ядре, которые плохо знают Битрикс, тут тоже никаких гарантий работы фильтра нет.
    Т.е. если компонент каталога нестандартный, все проблемы решаются с Вашим разработчиком.

    Обратите внимание!

    Это самая распространенная проблема, примерно в 8 случаях из 10 будет именно так.

  2. Возможно, между компонентом фильтра и каталога переменная arrFilter перебивается другим компонентом.
    В этом случае необходимо у обоих компонентов переменную arrFilter переименовать, например в arrFilter1, чтобы ее не использовали другие компоненты сайта, т.к. все компоненты Битрикс по умолчанию используют имя переменной arrFilter и могут перезаписывать.

  3. Возможно в настройках компонентов заданы разные названия переменной arrFilter, у компонента фильтра и каталога они должны быть одинаковые.
    Компонент фильтра и компонент каталога взаимодействуют через переменную arrFilter, она у обоих компонентов задается в настройках, может называться всяко разно, но у обоих компонентов она должна быть с одинаковым названием. Если она в настройках компонентов не задана, то по умолчанию задается с именем arrFilter.
    Проверьте, задана ли эта переменная и с одинаковым ли она именем у обоих компонентов, если будут разные названия, то фильтрация работать не будет.

Технические данные

Опубликован:
05.11.2013
Обновлен:
26.11.2015
Версия:
1.4.0
Установок:
Более 1000
Битрикс:
Первый сайт, Старт, Стандарт, Малый бизнес, Эксперт, Бизнес
Адаптивность:
Да
Композит:
Нет

История версий

Версия 1.4.0
[+] Добавлен поиск по словоформам в поле "Название элемента" и в свойство типа "Строка"
[x] Исправлен поиск по свойству типа "Дата/Время"
Версия 1.3.2
[x] Исправлена фильтрация по свойству типа Дата/Время
Версия 1.3.1
[x] Исправлена фильтрация по свойству типа Дата/Время
Версия 1.3.0
[+] Поддержка типа свойства инфоблока "Дата/Время";
[х] Не выводились плейсхолдеры для полей инфоблока;
[х] Автокомплит значений строковых полей срабатывает теперь при клике или фокусе на поле;
Версия 1.2.0
[+] добавлены тултипы к ползункам, включаются опцией "Выводить тултип" [x] нельзя было вернуть ползунок после применения фильтра из максимального положения
Версия 1.1.7
[x] каждому span в фильтре добавлен атрибут class
[x] при заданной опции "Каталог для отправки данных" кнопка Сбросить перезагружает текущую страницу без перенаправления в указанный каталог
[x] не выводились значения свойств заданных в настройках инфоблока в нижнем регистре
[x] кириллица для автокомплита
Версия 1.1.6
- Исправлена фильтрация если выбрано "Все разделы", раздел 0 больше не учитывается, т.к. ищет элементы только в корне инфоблока, теперь будет искать элементы по всему инфоблоку. - Для свойства типа Число если прописать подсказку в настройках инфоблока, то она появится в плэйсхолдере фильтра вместо макс. и мин. значений, например: см, мм, г, кг и т.д.
Версия 1.1.5
Исправлены ошибки в ползунках/слайдере
Версия 1.1.4
- добавлен параметр компонента Выводить заданные уровни разделов.
Т.е. в селекте для фильтрации будут выводиться только заданные уровни разделов.
Версия 1.1.3
Добавлено: - параметр компонента Название селекта c разделами; - параметр компонента Название корневого раздела селекта Обновлено: - jQuery Chosen v1.2.0
Версия 1.1.2
- изменено подключение конфигов для JS плагинов;
- добавлены подсказки для JS плагинов;
- исправлен селект для разделов, теперь к нему подключается jQuery Chosen;
- добавлен параметр Порог включения поиска по значениям (дает возможность управлять включением поиска в селектах в зависимости от их количества).
По умолчанию поиск будет включаться если у селекта больше 30 значений .
- исправлена кодировка языковой фразы jQuery Chosen когда нет результатов поиска.
Версия 1.1.1
- исправлена одна ошибка
Версия 1.1.0
- в настройках компонента добавлено два параметра SECTION_ID и SECTION_CODE, пока они влияют только на значения свойств с автокомплитом, т.е. в автокомплит попадут значения свойств активного (текущего) раздела (отлично подходит для комплексного компонента каталога);
- в автокомплит попадают только уникальные значения свойств, дублей нет;
- теперь автокомплит может работать и по многострочным текстовым полям, но в них не должно быть html-разметки, только текст;
- добавлена опция - Убрать точки из свойств и полей разделов;
- опции для jQuery вынесены в отдельный раздел JS и jQuery;
- для цены и свойств типа число в placeholder передаются минимальное и максимальное значение, а не название свойства или типа цены;
- разделитель для свойств типа число заменил с по на до, если не согласны, сообщите;
Версия 1.0.9
- добавлен плагин jQuery-Autocomplete. Подключается для всех свойств инфоблока типа Строка и для поля Название элемента. В список автокомплита выбираются только заданные для элементов значения свойств одним запросом, а не все возможные свойства инфоблока. Задействовать модуль можно опцией "Включить поиск-автокомплит для текстовых полей" в настройках компонента
http://take.ms/GwfIj
Версия 1.0.8
1) Добавлена возможность фильтровать элементы по свойству Привязка к разделам;
2) Данный тип свойства добавлен в опцию для генерации флажков из не множественных свойств, т.е. если данное свойство привязки к разделам было не множественное, вы можете вывести его на странице в виде переключателей для множественной фильтрации.
Шаблоны не тронуты.
Версия 1.0.7
1) Свойства, которые выводились переключателями (не множ.), теперь выводятся флажками, спасибо Андрею Волкову
2) Файл библиотеки jquery-1.10.2.min.js удален, подключается библиотека из ядра Битрикс
3) Добавлен jQuery плагин jquery.formstyler.min.js для стилизации флажков фильтра, добавлена соответствующая опция включения в настройках компонента.
4) В список Выпадающие списки флажком в настройках компонента теперь выводятся и свойства с привязкой к элементам инфоблока, т.е. значения свойства привязки к элементам также можно выводить в виде флажков.
5) Удалена опция Убрать флажок - (все) в связи с ненадобностью.
Больше ничего не изменялось.
Версия 1.0.6
1) Добавлены два шаблона для jQuery UI: aristo, delta
Версия 1.0.5
Упс
Версия 1.0.4
1) Добавлена опция проверки активности разделов, при поиске минимальных и максимальных значений в полях типа "Число", "Цена";

Обратите внимание!
Если опция включена и в указанном инфоблоке нет разделов, то поля интервалы будут пустые.
Версия 1.0.3
1) Добавлены ползунки jQuery UI для полей интервалов От и До, и Цены;
2) Добавлены параметры для jQuery UI;
3) Добавлено 25 тем jQuery UI.
Список тем по ссылке, чтобы визуально увидеть: http://jqueryui.com/themeroller/
4) Добавлены кроссбраузерные placeholder'ы
5) Небольшие изменения в стилях тем по умолчанию;
Обратите внимание! 1. Если на вашем сайте выключено кеширование, то каждое поле интервал с ползунком + 2 запроса к базе данных.
Если включено кеширование - запросов к базе данных 0;
2) Если включаете библиотеку jQuery UI, то библиотеку jQuery лучше отключить, это чуть увеличит скорость загрузки скриптов, т.к. jQuery уже есть в jQuery UI
Версия 1.0.2
1) Добавлен шаблон vertical-dark-red. Теперь их в комплекте 4шт.;
2) Добавлена возможность подключать jQuery и плагин обработчик выпадающих списков, к нему можно применять свои стили;
3) Добавлена опция "Заменить (все) на название поля фильтра" - работает только в комплекте с включенным плагином для списков, заменяет первое поле (все) на название поля;
4) Частично добавлены оформления ко всем шаблонам;
5) В следующих обновлениях подключим ползунки для полей интервалов.
Версия 1.0.1
Добавлено три опции: 1) Выпадающие списки флажком - если в админке свойство Выпадающий список, то в фильтре можно преобразовать во флажки и переключатели; 2) Флажки с новой строки - стилевое свойство, можно переопределить в стилях; 3) Убрать флажок - (все) - только для указанных флажков и переключателей.

Содержание

Установка модуля "Фильтр по элементам"

Заходим в Администрирование > Marketplace > Каталог решений > Работа с контентом > Фильтр по элементам и нажимаем Установить
Установка модуля "Фильтр по элементам"

Далее нажимайте кнопку Загрузить, в появившемся окне ознакомьтесь с лицензионным соглашением по модулю, если принимаете соглашение, ставьте галочку и нажимайте Применить, система загрузит модуль на Ваш сайт.
Установка модуля "Фильтр по элементам"

Теперь необходимо установить загруженный модуль в систему, нажимайте Установить
Установка модуля "Фильтр по элементам"

В открывшемся новом окне должно быть сообщение об успешной установке модуля.
Установка модуля "Фильтр по элементам"

Все, на этом шаге модуль считается установленным!

Настройка компонента "Фильтр по элементам" для работы с компонентом "Элементы раздела (catalog.section)"

Открываем публичную часть сайта и при необходимости либо "создаем новый раздел", либо "открываем существующую страницу" для редактирования в визуальном редакторе.
Настройка модуля "Фильтр по элементам" для работы с компонентом "Элементы раздела (catalog.section)"

После создания раздела на странице в визуальном редакторе Вам необходимо:
  1. Найти два компонента "Фильтр по элементам" и "Элементы раздела" и разместить их на странице;
    Тюнинг-Софт > Разное > Фильтр по элементам
    Контент > Каталог > Элементы раздела

  2. Разместить компонент фильтра нужно НАД компонентом каталога, а не ПОД (работать не будет в этом случае);
  3. Указать в настройках обоих компонентов одинаковый инфоблок каталога товаров.
  4. Задать в настройках фильтра поля и свойства, по которым нужна фильтрация товаров.
На этом все, все остальные настройки на вкус и цвет, минимальная настройка компонента фильтра на работу с компонентом каталога завершена.
Настройка модуля "Фильтр по элементам" для работы с компонентом "Элементы раздела (catalog.section)"

После сохранения страницы вот такая будет красота!
Фильтрация уже должна работать, если не будет работать фильтрация смотрите FAQ.
Тут сверху работает компонент фильтра, а ниже работает компонент каталога, который выводит товары, сам фильтр товары не выводит.


Настройка компонента "Фильтр по элементам" для работы с комплексным компонентом "Каталог (catalog)"

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

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

Копируем шаблон компонента "Каталог", будем работать с копией шаблона компонента.
Копируем шаблон компонента "Каталог"

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

Далее должно открыться окно с кодом шаблона, т.к. стояла галочка "Перейти к редактированию шаблона", если не открылось, тогда заходите в тоже меню и там уже нажимайте "Редактировать шаблон компонента".
Этот код хранится в файле section.php комплексного компонента каталога.
В окне с кодом нам нужно заменить код вызова "Умного фильтра" на код вызова "Фильтра по элементам".
Редактирование шаблона компонента Каталог

Код вызова  компонента "Фильтр по элементам" можно взять в визуальном редакторе, просто откройте для редактирования любую страницу на сайте в визуальном редакторе, положите там мой компонент, настройте под себя, шаблон подойдет "table" или "vertical-dark-red", переключите визуальный редактор в "режим редактирования исходного кода" и скопируйте полученный после настроек код вызова компонента.
Код вызова "Фильтра по элементам"

Вот этот скопированный код и надо вставить вместо кода умного фильтра, но не удаляйте код умного фильтра, выделите код как ниже от открывающей (<?) до закрывающей (?>) скобок? вырежьте Ctrl + V и сохраните его где-нибудь временно в текстовом файле, там есть два технических  момента, возможно пригодятся ключи умного фильтра.


Далее, вставляем на это место код вызова "Фильтра по элементам", вот так должно получиться:
Код вызова "Фильтра по элементам"

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

Про два технических момента:
1) Если оставить в таком виде настройки компонента "Фильтр по элементам",  как выше, то все его настройки вы должны делать в отдельном меню, настраиваться в этом случае он будет независимо от комплексного компонента каталога, вот так:
Настройка фильтра по элементам

2) Можно сделать централизованную настройку фильтра из комплексного компонента, но будут настраиваться не все настройки, а только те, которые прописаны в комплексном компоненте, иногда этого достаточно, например: Инфоблок, Имя фильтра,  Поля, Свойства, ID раздела, Тип цены, но если очень захочется, то можно все настройки там вывести, зависит от Вашего уровня знаний в Битрикс.
Настройка фильтра по элементам из комплексного компонента каталога

Для этого необходимо из сохраненного ранее кода вызова "Умного фильтра" взять подходящие значения для "Фильтра по элементам" и подставить их, а также необходимо заменить константу false  на переменную $component, тогда компонент "Фильтр по элементам" не будет настраиваться отдельным пунктом меню, а будет брать настройки из настроек комплексного компонента, но их нужно прописать ручками.

Открываем опять для редактирования шаблон компонента "Каталог" и заменяем код уже вот на этот, готовый для версии модуля "Фильтр по элементам v.1.2", если у Вас на момент чтения статьи версия другая, то ключи настроек будут отличаться, Вам нужно будет вручную в своем коде вызова подставить значения переменной $arParams["тут соответствующий ключ"]

<?$APPLICATION->IncludeComponent(
    "api:search.filter",
    "vertical-dark-red",
    Array(
        "IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
        "IBLOCK_ID" => $arParams["IBLOCK_ID"],
        "FILTER_NAME" => $arParams["FILTER_NAME"],
        "REDIRECT_FOLDER" => "",
        "FIELD_CODE" => $arParams["FILTER_FIELD_CODE"],
        "PROPERTY_CODE" => $arParams["FILTER_PROPERTY_CODE"],
        "CHECK_ACTIVE_SECTIONS" => "N",
        "SECTION_ID" => $arCurSection['ID'],
        "SECTION_CODE" => "",
        "LIST_HEIGHT" => "5",
        "TEXT_WIDTH" => "209",
        "NUMBER_WIDTH" => "85",
        "SELECT_WIDTH" => "220",
        "ELEMENT_IN_ROW" => "3",
        "NAME_WIDTH" => "130",
        "FILTER_TITLE" => "Фильтр по элементам",
        "BUTTON_ALIGN" => "center",
        "SELECT_IN_CHECKBOX" => array("", ""),
        "CHECKBOX_NEW_STRING" => "N",
        "REPLACE_ALL_LABEL" => "N",
        "REMOVE_POINTS" => "N",
        "SECTIONS_DEPTH_LEVEL" => "",
        "SECTIONS_FIELD_TITLE" => "Разделы",
        "SECTIONS_FIELD_VALUE_TITLE" => "Все разделы",
        "CACHE_TYPE" => $arParams["CACHE_TYPE"],
        "CACHE_TIME" => $arParams["CACHE_TIME"],
        "CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
        "SAVE_IN_SESSION" => "N",
        "PRICE_CODE" => $arParams["FILTER_PRICE_CODE"],
        "INCLUDE_JQUERY" => "Y",
        "INCLUDE_PLACEHOLDER" => "Y",
        "INCLUDE_CHOSEN_PLUGIN" => "Y",
        "CHOSEN_PLUGIN_PARAM__disable_search_threshold" => "30",
        "INCLUDE_FORMSTYLER_PLUGIN" => "Y",
        "INCLUDE_AUTOCOMPLETE_PLUGIN" => "N",
        "INCLUDE_JQUERY_UI" => "Y",
        "INCLUDE_JQUERY_UI_SLIDER" => "Y",
        "JQUERY_UI_SLIDER_BORDER_RADIUS" => "N",
        "INCLUDE_JQUERY_UI_SLIDER_TOOLTIP" => "N",
        "JQUERY_UI_THEME" => "ts-red",
        "JQUERY_UI_FONT_SIZE" => "10px",
        "OFFERS_FIELD_CODE" => $arParams["FILTER_OFFERS_FIELD_CODE"],
        "OFFERS_PROPERTY_CODE" => $arParams["FILTER_OFFERS_PROPERTY_CODE"]
    ),
    $component,
    array('HIDE_ICONS' => 'Y')
);?>

И вот так заработает "Фильтр по элементам", т.е. уже подцепил настройки из комплексного компонента каталога
Фильтр по элементам с настройками из комплексного компонента каталога

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

Если включено кеширование, то к БД запросов 0.

Если выключено кеширование, то:

  • каждое поле интервал с ползунком + 2 запроса к БД;
  • каждое строковое поле с автокомплитом значений + 1 запрос к БД.

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

Ползунки для числовых полей интервалов "От" и "До" работают только при включенном jQuery UI и jQuery.

Рейтинг покупателей
5 / 5
На основе 2 оценок покупателей
  • 2
  • 0
  • 0
  • 0
  • 0
Отзывы о модуле Фильтр по элементам
Отзыв для Фильтр по элементам
Оценка *
Заголовок *
Достоинства
Недостатки
Комментарий

Населенный пункт
Публиковать
Лучший модуль фильтра!
Комментарий:
Супер модуль, очень гибкий в настройке. А техподдержка - выше всяких похвал.
Рекомендую!
Интернет-магазин TUNING-SOFT.RU
Евген, спасибо большое за высокую оценку! Еще чуть-чуть доработаю модуль до умного и вообще цены ему не будет!)
Отличная разработка!
Комментарий:
Огромное спасибо разработчику за консультации и помощь при подключении компонента =)
Интернет-магазин TUNING-SOFT.RU
Рад был помочь Максим! Благодарю за теплые слова, всегда обращайтесь в случае чего.
×

Установка модуля

×

Вход в интернет-магазин