Что такое умный фильтр в 1С-Битрикс

Довольно часто у пользователей на Вашем сайте возникает потребность моментально создать свою собственную выборку статей, товаров или других элементов. Чаще выборка создаётся не по ключевому слову, а по определенным значениям свойств элементов.

Так, например, если мы выбираем ноутбук, мы можем выбрать количество оперативной памяти, которое нам необходимо или производителя, как на рисунке:

Пример умного фильтра на сайте «Эльдорадо»

Средство, позволяющие отфильтровать элементы по определенным характеристиками (на рисунке подчёркнуто синим, а варианты -  фиолетовым), называют умным фильтром (на рисунке выделено красным). Зелёным подчеркнут список выбранных характеристик. Рассмотрим «Умный фильтр» подробнее дальше.

Особенности умного фильтра

Основной особенностью работы умного фильтре является использование фасетных индексов для фильтрации товаров. Фасетный индекс - это индекс товара по одному свойству. Если обратиться к примеру и к рисунку №1, марка ноутбука является одним из фасетных индексов. Фасетный индекс позволяет получить элементы, подходящие по указанному свойству, исключая полный перебор товаров. Такой подход увеличивает размер базы данных, но снижает нагрузку на неё и ускоряет работу фильтра.

В Drupal`е есть похожий инструмент Facet (фасет), который позволяет строить фасетный индексы для сущностей сайта. Несмотря на аналогичный функционал и использование общей терминологии, существует значимое различие в реализации инструментов. Drupal использует для своего инструмента внешнее решение «Apache Solr», применяемое для построения и обработки фасетов, а также поиска внутри таксономии, в том числе и полнотекстового. В Bitrix`е используется решение, включённое в ядро системы. Такой подход избавляет разработчиков и пользователей от необходимости установки дополнительных программ и настройки взаимодействия между ними и системой управления контентом.

В других распространённых CMS также присутствуют плагины, которые в той или иной степени реализуют функционал умного фильтра: YITH WooCommerce Ajax Navigation (для WordPress), Custom Filters (для Joomla!, магазин virtuemart), JoomShopping Smart Filter (для Joomla!, магазин JoomShopping), Advanced Filters (для Magento). Однако, все перечисленные решения имеют один существенный недостаток - отказ от использования индексов, что увеличивает нагрузку на базу данных и снижает скорость работы. Более того все плагины (кроме YITH WooCommerce Ajax Navigation) стоят денег.

ЧПУ в умном фильтре

Начиная с версии 15.5.0 в Bitrix появилась возможность использовать человеко-понятные адреса для страниц с умным фильтром. Раньше настройки фильтра просто добавлялись параметрами в адрес страницы:

http://mysite.ru/e-store/books/business/?FILTER_P1_MIN=&FILTER_P1_MAX= &FILTER_19_1218211285=Y&FILTER_23_964515751=Y&set_filter=Показать

Данный подход имеет право на существование, но отпугивает пользователя, так как он не понимает значения этих параметров.

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

http://mysite.ru/e-store/books/business/filter/year-is-2002/publisher-is-эксмо/apply/

Тут сразу понятно, какого года книги мы ищем и какой издатель нас интересует.

Использование AJAX

В умном фильтре Bitrix реализовано автоматическая фильтрация товара без перезагрузки страницы, то есть обновляется только часть страницы, которая отвечает за товары. Эта возможность реализуется на основе AJAX-технологии - асинхронного запроса к серверу со страницы с целью получения новых данных. Работает это так: пользователь меняет настройки в фильтре, одновременно с ним страница посылает новые данные на сервер, который в ответ присылает новые товары, соответствующие требованиям.

Настройка умного фильтра

Основные настройки умного фильтра:

1. Инфоблок с которым работает фильтр
2. Шаблоны адресов страниц секции, фильтра, при использовании ЧПУ или уникальный код раздела
3. Имя глобальной переменной с правилами фильтрации элементов раздела.

Остальные настройки умного фильтра изложены на страницах документации 1С-Битрикс (https://dev.1c-bitrix.ru/user_help/content/iblock/compo nents_2/catalog/smart_filter.php).

Пример подключения

Существует несколько способов подключения «Умного фильтра»:

1. в составе компонента «Каталог 2.0»;
2. используя «Визуальный редактор»;
3. вставка вызова компонента в исходный код.

При подключении в составе компонента «Каталог», в добавок к стандартным настройкам фильтра идёт возможность выбора ориентации фильтра (горизонтальный и вертикальный). Более того, следствием использования компонента более высокого уровня является то, что часть настроек для встроенных компонентов будет общей.

Также существует возможность вставить умный фильтр с помощью «Визуального редактора».

1. Для этого необходимо изменить страницу в визуальном редакторе:

2. Далее необходимо выбрать в списке компонентов «Контент», а далее - «Каталог»:

3. После чего в списке компонентов выбираем «Умный фильтр», и перенести в поле содержания страницы:

4. Теперь мы можем настроить наш «Умный фильтр»:

Особенности кастомизации

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

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

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

Не типовое решение: умный фильтр на главной странице (не на странице каталога).

Также существует возможность использовать разные фильтры в зависимости от адреса текущей страницы. Можно использовать фильтр на странице без каталога. Но тут существует несколько ограничений:

• на любой странице сайта не может быть больше одного фильтра;
• имя фильтра должно быть указано в каталоге;
• фильтр должен быть настроен на работу с каталогом.

Рассмотрим на примере, разместим первый фильтр на главной, второй будет включен в состав комплексного компонента «Каталог».

Итак у нас есть два фильтра и один каталог. Теперь остается их настроить. 

Для каталога нам понадобиться только два свойства:

• Название фильтра;
• Путь к фильтру при использовании ЧПУ.

В настройках фильтра все обстоит намного интереснее, нам нужно больше полей:

• Уникальный идентификатор информационного блока;
• Название фильтра;
• Использование ЧПУ;
• Типы цен;
• Валюта;
• Адрес фильтра ЧПУ;
• Адрес каталога.

Теперь отфильтровать товары в каталоге можно прямо с главной страницы сайта.