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

Что такое умный фильтр в 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 появилась возможность использовать человеко-понятные адреса для страниц с умным фильтром. Раньше настройки фильтра просто добавлялись параметрами в адрес страницы:

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

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

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

Использование 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 год), версиях каталога появилась возможность выбрать форму фильтра, то есть горизонтальный или вертикальный.

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

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

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

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

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

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

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

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

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

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

Настройка адресов для инфоблока

В первую очередь нам необходимо перейти в настройки информационного блока каталога (или другого если речь не идёт о ЧПУ для каталога и фильтра) на вкладке «Инфоблок» есть 3 свойства, задающие своего рода шаблон на основе которого система построит URL адрес страницы:

• URL страницы информационного блока
• URL страницы раздела
• URL страницы детального просмотра

• #SITE_DIR# — корневая папка сайта, обычно она необходима когда мы имеем многоязычный сайт и английская версия лежит в папке /en/
• #SECTION_CODE# — символьный код текущего раздела
• #SECTION_CODE_PATH# — путь из символьных кодов разделов, обычно применяется когда на одном и том же уровне вложенности каталога есть разделы с одинаковым наименованием и как следствие кодом
• #ELEMENT_CODE# — символьный код текущего элемента

Например такой шаблон #SITE_DIR#/catalog/#SECTION_CODE#/ в процессе работы компонента каталога, может быть преобразован в /catalog/televizori/ , а #SITE_DIR#/catalog/#SECTION_CODE#/#ELEMENT_CODE#/ в /catalog/televizori/televizor_samsung_ue32m/.

Эти шаблоны — первая часть настройки ЧПУ, далее следует позаботиться о наличие читаемого кода для свойств инфоблока и их значений. Для этого перейдём на вкладку «Свойства» и рассмотрим несколько представленных в каталоге свойств, материал и цвет:

Каждое свойство инфоблока имеет параметр «Код», это мнемонический код свойства, тот самый который будет позже поставлен в URL адрес, когда мы захотим отфильтровать каталог по этому свойству. И чтобы получившийся в итоге ЧПУ отвечал критериям «понятности», код свойства должен быть читаемым и понятным для человека, в данном случае «материал» и «цвет».

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

В данном случае, в качестве кода значения свойства, выступает атрибут XML_ID именно его система подставит в URL адрес, когда мы захотим отфильтровать каталог одежды по свойству «цвет». Если, оставить эти поля пустыми, при сохранении настроек информационного блока, битрикс сгенерирует длинную хеш-строку и подставит её в качестве XML_ID

В данном примере вся строка XML_ID розового цвета выглядит так: 4ed329daf7a1bd6ec22074f850e50be1 — не очень читабельно, не так ли? К сожалению 1С Битрикс не имеет штатного функционала позволяющего автоматически транслитерировать значения свойств и читаемый XML_ID.

Ускорение работы фильтра

Умный фильтр 1.0 после нажатия кнопки «Подобрать» перебирал все товары и сравнивал их свойства с искомыми. С ростом количества товаров и свойств сильно возрастала нагрузка на сайт и увеличивалось время ответа сайта.

Для ускорения придумали технологию «фасетный индекс». Она напоминает кэширование. Все товары один раз индексируются в отдельную таблицу БД (в фасет) и фильтрация проводится по этому быстрому и легкому «кэшу». Эта технология в 3-4 раза ускорила работу умного фильтра и снизила нагрузку на сервер.

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

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

Когда происходит добавление или редактирование разделов каталога.

При добавлении или удаления свойства из умного фильтра.

При выгрузке из 1С, если происходит обновление и добавление товаров с новыми свойствами.

В остальных случаях фасетные индексы пересоздаются автоматически.

Если какой-то фасетный индекс устарел, Битрикс подскажет.

Если в каталоге большое количество товаров, то процесс переиндексации может занять много времени и сильно сказаться на производительности сайта. Лучше проводить эту операцию ночью.

Чтобы убедиться в эффективности фасетного индекса мы провели эксперимент в следующих суровых условиях: