Содержание

Настройки модуля

Страница с настройками модуля выглядит следующим образом:

Настройки модуля

В настройках есть два параметра:

Страницы с ЧПУ фильтра - шаблоны страниц на которых будет включена обработка и генерация ЧПУ фильтра. В этом параметры следует указать url от корня сайта к тем разделам сайта, в которых фильтр будет работать в режиме ЧПУ (если таких разделов несколько, то следует их перечислить через точку с запятой).

Выберите инфоблоки, для свойств которых будут выводится дополнительные настройки для фильтра - в этом параметре следует указать инфоблоки, для свойств которых будут выводится дополнительные настройки фильтра (чтобы выбрать несколько инфоблоков, выделяйте их с зажатой клавишей Ctrl). Для свойств выбранных инфоблоков форма настроек будет выглядет вот так:

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

Чтобы открыть окно настроек свойства инфоблока, перейдите в настройки нужного вам инфоблока, откройте вкладку Свойства и кликнете по кнопке кнопка рядом с нужным вам свойством.

Описание компонента

Компонент подготавливает фильтр для выборки из инфоблока и выводит форму фильтра для фильтрации элементов. Компонент должен подключаться перед компонентом вывода элементов каталога, иначе список элементов фильтроваться не будет. Компонент содержит четыре шаблона: .default, horizontal, bitronic-vertical, bitronic-horizontal.

В визуальном редакторе компонент расположен по пути Контент > Каталог > Kombox: Умный фильтр.

Иконка компонента имеет вид: Иконка компонента .

Пример вызова
$APPLICATION->IncludeComponent(
	"kombox:filter", 
	"horizontal", 
	array(
		"IBLOCK_TYPE" => "catalog",
		"IBLOCK_ID" => "3",
		"FILTER_NAME" => "f",
		"SECTION_ID" => "19",
		"SECTION_CODE" => "",
		"HIDE_NOT_AVAILABLE" => "N",
		"CACHE_TYPE" => "A",
		"CACHE_TIME" => "36000000",
		"CACHE_GROUPS" => "Y",
		"SAVE_IN_SESSION" => "N",
        "PAGER_PARAMS_NAME" => "arrPager",
		"INCLUDE_JQUERY" => "N",
		"PAGE_URL" => "/tv/",
		"MESSAGE_ALIGN" => "LEFT",
		"MESSAGE_TIME" => "0",
		"IS_SEF" => "N",
		"CLOSED_PROPERTY_CODE" => array(
			0 => "HDD",
			1 => "MEMORY",
			2 => "PROCESSOR",
			3 => "PROCESSOR_FREQUANCE",
			4 => "BLUETOOTH",
			5 => "LED",
			6 => "WIFI",
			7 => "SMART_TV",
			8 => "USB",
			9 => "SUPPORT_3D",
			10 => "WEIGHT",
			11 => "TIME2",
			12 => "SUPPORT_3D",
			13 => "",
		),
		"CLOSED_OFFERS_PROPERTY_CODE" => array(
			0 => "",
			1 => "",
		),
		"SORT" => "N",
		"FIELDS" => array(
			0 => "SECTIONS",
			1 => "STORES",
			2 => "QUANTITY",
			3 => "AVAILABLE",
		),
		"TOP_DEPTH_LEVEL" => "0",
		"PRICE_CODE" => array(
			0 => "BASE",
		),
		"CONVERT_CURRENCY" => "Y",
		"CURRENCY_ID" => "RUB",
		"XML_EXPORT" => "Y",
		"SECTION_TITLE" => "NAME",
		"SECTION_DESCRIPTION" => "DESCRIPTION",
		"COLUMNS" => "4",
		"STORES_ID" => array(
		)
	),
	false
);

Пример подключения в шаблоне компонента bitrix:catalog

$APPLICATION->IncludeComponent(
	"kombox:filter", 
	"", //шаблон - .default (можно указать horizontal, bitronic_vertical или bitronic_horizontal)
	array(
		"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
		"IBLOCK_ID" => $arParams["IBLOCK_ID"],
		"FILTER_NAME" => $arParams["FILTER_NAME"],
		"SECTION_ID" => $arResult["VARIABLES"]["SECTION_ID"],
		"SECTION_CODE" => $arResult["VARIABLES"]["SECTION_CODE"],
		"HIDE_NOT_AVAILABLE" => $arParams["HIDE_NOT_AVAILABLE"],
		"CACHE_TYPE" => $arParams["CACHE_TYPE"],
		"CACHE_TIME" => $arParams["CACHE_TIME"],
		"CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
		"SAVE_IN_SESSION" => "N",
		"INCLUDE_JQUERY" => "Y",
		"MESSAGE_ALIGN" => "LEFT",
		"MESSAGE_TIME" => "0",
		"IS_SEF" => "N",
		"CLOSED_PROPERTY_CODE" => array(),
		"CLOSED_OFFERS_PROPERTY_CODE" => array(),
		"SORT" => "N",
		"FIELDS" => array(),
		"PRICE_CODE" => $arParams["PRICE_CODE"],
		"CONVERT_CURRENCY" => $arParams["CONVERT_CURRENCY"],
		"CURRENCY_ID" => $arParams["CURRENCY_ID"],
		"XML_EXPORT" => "Y",
		"SECTION_TITLE" => "NAME",
		"SECTION_DESCRIPTION" => "DESCRIPTION"
        "PAGER_PARAMS_NAME" => $arParams["PAGER_PARAMS_NAME"]
	),
	false
);

Описание параметров

Поле Параметр Описание
Источник данных

Тип инфоблока

IBLOCK_TYPE

Указывается один из созданных в системе типов информационных блоков.

Инфоблок

IBLOCK_ID

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

Имя выходящего массива для фильтрации

FILTER_NAME

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

ID раздела

SECTION_ID

Указывается ID раздела инфоблока.

Код раздела

SECTION_CODE

Указывается символьный код раздела, из которого будут выбраны элементы. Поле может быть оставлено пустым, если указан ID раздела.

Настройки кеширования

Тип кеширования

CACHE_TYPE

Тип кеширования:

· A - Авто + Управляемое: автоматически обновляет кеш компонентов в течение заданного времени или при изменении данных;

· Y - Кешировать: для кеширования необходимо определить время кеширования;

· N - Не кешировать: кеширования нет в любом случае.

Время кеширования (сек.)

CACHE_TIME

Время кеширования, указанное в секундах.

Учитывать права доступа

CACHE_GROUPS

[Y|N] При отмеченной опции будут учитываться права доступа при кешировании.

Дополнительные настройки

Сохранять установки фильтра в сессии пользователя

SAVE_IN_SESSION

[Y|N] При отмеченной опции установки фильтра будут сохраняться в сессии пользователя.

Имя массива с переменными для построения ссылок в постраничной навигации

PAGER_PARAMS_NAME

Задается имя переменной, в которой передается массив с переменными для построения ссылок компонентом постраничной навигации.

Подключить библиотеку jQuery

INCLUDE_JQUERY

[Y|N] При отмеченной опции компонент будет подключать библиотеку jquery.

Путь к разделу (если фильтр располагается на другой странице)

PAGE_URL

Путь к странице, на которую фильтр будет переходить при фильтрации (нужен если фильтр находится на одной странице, а результат фильтрации необходимо отобразить на другой)

Выводить сообщение с количеством найденных элементов

MESSAGE_ALIGN

Задается с какой стороны выводить сообщение с количеством найденных элементов:

· LEFT - слева;

· RIGHT - справа;

Через сколько секунд скрывать сообщение (0 - не скрывать)

MESSAGE_TIME

Задается интервал в секундах в течении которого будет показываться сообщение с количеством найденных элементов (0 – сообщение не будет скрываться)

Режим самостоятельного определения текущего раздела

Включить

IS_SEF

[Y|N] Включает режим, в котором компонент сам будет определять ID текущего раздела, исходя из заданных шаблонов URL раздела и элемента. В этом режиме компоненту не нужно задавать параметры "ID раздела инфоблока" (SECTION_ID) и "Символьный код раздела инфоблока" (SECTION_CODE). В основном этот режим используется, если вы хотите отображать фильтр на всех страницах сайта, а не только в каталоге. Не путайте его с ЧПУ URL фильтра, который включается в настройках модуля.

Путь к каталогу ЧПУ (относительно корня сайта)

SEF_BASE_URL

Путь к разделу, в котором расположен компонент bitrix:catalog

Шаблон URL, ведущий на страницу с содержимым раздела

SECTION_PAGE_URL

Шаблон URL к разделу, совпадающий с параметром SEF_URL_TEMPLATES[section] компонента bitrix:catalog

Шаблон URL, ведущий на страницу с содержимым элемента раздела

DETAIL_PAGE_URL

Шаблон URL к детальной странице товара, совпадающий с параметром SEF_URL_TEMPLATES[element] компонента bitrix:catalog

Настройки полей

Свойства, которые будут свернуты

CLOSED_PROPERTY_CODE

Указываются свойства инфоблока, которые будут по умолчанию свернуты при показе фильтра. При выборе пункта (не выбрано)-> и без указания кодов свойств в строках ниже, свойства свернуты не будут.

Свойства предложений, которые будут свернуты

CLOSED_OFFERS_PROPERTY_CODE

Указываются свойства предложений, которые будут по умолчанию свернуты при показе фильтра. При выборе пункта (не выбрано)-> и без указания кодов свойств в строках ниже, свойства свернуты не будут.

Сортировать поля фильтра

SORT

[Y|N] Включает сортировку полей фильтра по индексу сортировки

Поля фильтра будут отсортированы по индексу сортировки. Для свойств индексы сортировки можно задать в форме настроек инфоблока, для цен - в настройках цены, для дополнительных полей (Склады, Подразделы и т.д.) в настроках компонента (см. ниже).

Порядок сортировки полей

SORT_ORDER

Указывает направление сортировки полей:

· ASC – по возрастанию;

· DESC – по убыванию;

Показывать поля в фильтре

FIELDS

Указываются поля, которые будут выведены в фильтре. Массив, который может содержать значения:

· SECTIONS - подразделы;

· STORES - склады;

· QUANTITY – количество на складе

· AVAILABLE – наличие на складе

Индекс сортировки поля "Подразделы"

SORT_SECTIONS

Индекс сортировки для поля «Подразделы» - число

Максимальная отображаемая глубина разделов

TOP_DEPTH_LEVEL

Число – указывает максимальную глубину вложенности подразделов для поля «Подразделы», относительно текущего раздела (0 – неограниченная глубина).

Индекс сортировки поля "Склады"

SORT_STORES

Индекс сортировки для поля «Склады» - число

Индекс сортировки поля "Количество"

SORT_QUANTITY

Индекс сортировки для поля «Количество» - число

Индекс сортировки поля "Наличие"

SORT_AVAILABLE

Индекс сортировки для поля «Наличие» - число

Цены

Тип цены

PRICE_CODE

Указывается тип цены для выводимых элементов.

Показывать цены в одной валюте

CONVERT_CURRENCY

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

Валюта, в которую будут сконвертированы цены

CURRENCY_ID

Выбор валюты в которой будут отображаться цены.

Складской учет

Не отображать товары, которых нет на складах

HIDE_NOT_AVAILABLE

[Y|N] При отмеченной опции будут скрыты товары, для которых общее количество на складах меньше либо равно нулю, включен количественный учет и не разрешена покупка при отсутствии товара.

Выводить товары со складов

STORES_ID

Указывает те склады, товары с которых будут отображаться и по которым будет осуществляться фильтрация. Чтобы в фильтрации участвовали все склады, оставьте список пустым.

Рекомендуемое значение - все склады.

Этот параметр может увеличить нагрузку на сервер

Поддержка Яндекс Островов (экспорт фильтра в XML)

Включить поддержку Яндекс Островов

XML_EXPORT

[Y|N] При отмеченной опции будет включена поддержка Яндекс Островов.

Заголовок

SECTION_TITLE

Указывается поле, которое будет использоваться в качестве заголовка раздела.

Описание

SECTION_DESCRIPTION

Задается поле, которое будет использоваться в качестве описания раздела.

Установка

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

Установка модуля осуществляется в соответствие с документацией по установке и настройке типовых решений из Битрикс Маркетплейс

  1. Авторизоваться в панели управления Вашего сайта под правами администратора.

  2. Зайти в раздел Marketplace > Обновление решений - вкладка «Активация купона» и ввести купон в специальном поле.

    Активация купона

  3. После ввода купона в списке решений для установки появится купленное решение. Нажмите «Установить» и следуйте дальнейшим инструкциям.

    Установка решения

После установки появиться компонент (Контент –> Каталог -> Kombox: Умный фильтр).

Для настройки компонента фильтра желательно ознакомиться с основными принципами работы компонентов 2.0: http://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=34&CHAPTER_ID=04457&LESSON_PATH=3905.4457

Настройка свойств

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

Свойства элементов

Если необходимо здесь же настраиваем свойства SKU.

Свойства предложений

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

Настройки свойста инфоблока.png

Теперь нам необходимо разместить компонент фильтра (kombox:filter).

Здесь возможны варианты:

Я хочу, чтобы фильтр работал только в каталоге

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

Откроется диалог настроек компонента

Диалог настроек компонента

В открывшемся диалоге вы сможете увидеть какой компонент используется на странице, если это bitrix:catalog.section или bitrix:catalog.detail, то значит на вашем сайте не используется комплексный компонент каталога, а если bitrix:catalog, то на сайте используется комплексный компонент.

Если на сайте используется комплексный компонент, то про установку читаем здесь, если не используется то здесь.

Комплексный компонент каталога

Сейчас мы рассмотрим установку умного фильтра в каталоге, на примере стандартного интернет-магазина 1С-Битрикс. Так как у нас используется комплексный компонент каталога bitrix:catalog, то нам нужно отредактировать его шаблон (Что делать, если у вас не используется комплексный компонент?). В стандартном демо-магазине используется системный шаблон компонента каталога и чтобы его отредактировать его нужно предварительно скопировать в шаблон сайта. На вашем сайте скорее всего шаблон уже скопирован. Как это проверить? Переходим в любой раздел каталога, в моем случае это будет http://site.ru/catalog/shoes/.

Интернет-магазин 1С-Битрикс

Переходим в режим правки.

Настройки компонента каталога

Наводим курсор мыши на компонент каталога (любой товар) и в появившейся панели управления выбираем в меню пункт «Редактировать шаблон компонента».

Копирование шаблона компонента

Тут возможны два случая. Если шаблон еще не скопирован, то вы увидите диалог копирования шаблона. В нем необходимо ввести имя нового шаблона и выбрать шаблон сайта. Здесь конечно все на ваше усмотрение, но я рекомендую дать осмысленное название шаблона и выбрать текущий шаблон сайта. Галочки «Применить новый шаблон компонента» и «Перейти к редактированию шаблона» должны быть отмеченными.

Копирование шаблона компонента каталога

Нажимаем «Сохранить» и открывается окно редактирования шаблона.

Вы можете редактировать шаблон в нем, а можете перейти по ссылке Редактировать файл в панели управления и редактировать файл в панели управления, как вам удобно. Если у вас есть доступ к сайта через ftp/sftp то можете редактировать там.

Редактирование шаблона каталога

Тут нужно быть внимательным, открыться должен файл шаблона section.php. Если открылся другой файл (например sections.php или element.php), то перейдите по ссылке Редактировать файл в панели управления, в хлебных крошках кликаем по ссылке с названием шаблона, откроется список файлов и в этом списке выбираем файл section.php и открываем его на редактирование как PHP.

Хлебные крошки

Файл section.php

В файле section.php находим строчки где вызывается штатный умный фильтр (у меня это строки 80-101):

Если вы не нашли или в вашем шаблоне нет фильтра, что делать?

Если у вас другой шаблон компонента каталога, и вы не нашли, то просмотрите весь файл section.php внимательно, возможно вызов фильтра располагается в другом месте. Если все-таки фильтра вообще нет, то тоже ничего страшного, нам тогда нужно найти вызов компонента bitrix:catalog.section, у меня это строки 161-247, начинаются они так:

$APPLICATION->IncludeComponent(
	"bitrix:catalog.section",
	"",
…

Код очень длинный и нам он не интересен, главное что нам нужно знать, что фильтр обязательно должен располагаться до этого компонента, иначе он не будет фильтровать. Поэтому если вы не нашли фильтр, то находим компонент bitrix:catalog.section и где-нибудь выше него (в зависимости от дизайна или ваших предпочтений) вставляем код Kombox-фильтра (см. ниже)

$APPLICATION->IncludeComponent(
	"bitrix:catalog.smart.filter",
	"visual_".($arParams["FILTER_VIEW_MODE"] == "HORIZONTAL" ? "horizontal" : "vertical"),
	Array(
		"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
		"IBLOCK_ID" => $arParams["IBLOCK_ID"],
		"SECTION_ID" => $arCurSection['ID'],
		"FILTER_NAME" => $arParams["FILTER_NAME"],
		"PRICE_CODE" => $arParams["PRICE_CODE"],
		"CACHE_TYPE" => $arParams["CACHE_TYPE"],
		"CACHE_TIME" => $arParams["CACHE_TIME"],
		"CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
		"SAVE_IN_SESSION" => "N",
		"XML_EXPORT" => "Y",
		"SECTION_TITLE" => "NAME",
		"SECTION_DESCRIPTION" => "DESCRIPTION",
		'HIDE_NOT_AVAILABLE' => $arParams["HIDE_NOT_AVAILABLE"],
		"TEMPLATE_THEME" => $arParams["TEMPLATE_THEME"]
	),
	$component,
	array('HIDE_ICONS' => 'Y')
);

Вместо этого кода вставляем наш код:

$APPLICATION->IncludeComponent(
	"kombox:filter", 
	"", //шаблон - .default (можно указать horizontal, bitronic-vertical или bitronic-horizontal)
	array(
		"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
		"IBLOCK_ID" => $arParams["IBLOCK_ID"],
		"FILTER_NAME" => $arParams["FILTER_NAME"],
		"SECTION_ID" => $arResult["VARIABLES"]["SECTION_ID"],
		"SECTION_CODE" => $arResult["VARIABLES"]["SECTION_CODE"],
		"HIDE_NOT_AVAILABLE" => $arParams["HIDE_NOT_AVAILABLE"],
		"CACHE_TYPE" => $arParams["CACHE_TYPE"],
		"CACHE_TIME" => $arParams["CACHE_TIME"],
		"CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
		"SAVE_IN_SESSION" => "N",
		"INCLUDE_JQUERY" => "Y",
		"MESSAGE_ALIGN" => "LEFT",
		"MESSAGE_TIME" => "0",
		"IS_SEF" => "N",
		"CLOSED_PROPERTY_CODE" => array(),
		"CLOSED_OFFERS_PROPERTY_CODE" => array(),
		"SORT" => "N",
		"FIELDS" => array(),
		"PRICE_CODE" => $arParams["PRICE_CODE"],
		"CONVERT_CURRENCY" => $arParams["CONVERT_CURRENCY"],
		"CURRENCY_ID" => $arParams["CURRENCY_ID"],
		"XML_EXPORT" => "Y",
		"SECTION_TITLE" => "NAME",
		"SECTION_DESCRIPTION" => "DESCRIPTION",
        "PAGER_PARAMS_NAME" => $arParams["PAGER_PARAMS_NAME"]
	),
	false
);

Более подробно прочитать про параметры фильтра можно тут. В стандартном демо-магазине библиотека jquery не поключена, поэтому я указал параметр INCLUDE_JQUERY = Y, чтобы фильтр сам подключил jquery, если на вашем сайте она подключена, то следует указать INCLUDE_JQUERY = N иначе могут быть ошибки. Сохраняем файл и смотрим результат. Должно получиться следующее:

Интернет магазин 1С-Битрикс с фильтром

Все работает? Если что-то не работает, то пытаемся разобраться.

Если вы хотите, чтобы фильтр работал в корне каталога, то нужно отредактировать файл шаблона sections.php. В нем нет фильтра, поэтому добавляем вызов компонента Kombox-фильтр. Но добавить фильтр мало, на этой странице используется компонент bitrix:catalog.top и он не поддерживает фильтрацию, поэтому нам нужно его удалить и на его место вставить компонент bitrix:catalog.section, лучше скопировать код этого компонента из файла section.php с которым мы уже работали.

Есть несколько важных моментов. Так как это корень каталога, то у компонента Kombox-фильтра и bitrix:catalog.section удаляем параметры SECTION_ID и SECTION_CODE, они не нужны. Для компонента bitrix:catalog.section добавляем параметр SHOW_ALL_WO_SECTION = Y, чтобы он выводил товары из всех разделов.

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

Интернет магазин 1С-Битрикс с фильтром

Каталог на простых компонентах

В этом случае фильтр размещаем аналогично тому как мы это делаем на отдельной странице сайта, т.е. открываем страницу с товарами в визуальном редакторе и размещаем на ней компонент Kombox:Умный фильтр с ЧПУ. Опять же не забываем что компонент фильтра должен располагаться ДО вызова компонента bitrix:catalog.section. Приведу пример вызова компонента фильтра на такой странице:

IncludeComponent(
	"kombox:filter", 
	".default", 
	array(
		"IBLOCK_TYPE" => "catalog",
		"IBLOCK_ID" => "2",
		"FILTER_NAME" => "arrFilter",
		"SECTION_ID" => $_REQUEST["SECTION_ID"],
		"SECTION_CODE" => $_REQUEST["SECTION_CODE"],
		"HIDE_NOT_AVAILABLE" => "N",
		"CACHE_TYPE" => "A",
		"CACHE_TIME" => "36000000",
		"CACHE_GROUPS" => "Y",
		"SAVE_IN_SESSION" => "N",
		"INCLUDE_JQUERY" => "Y",
		"PAGE_URL" => "",
		"MESSAGE_ALIGN" => "LEFT",
		"MESSAGE_TIME" => "5",
		"IS_SEF" => "N",
		"CLOSED_PROPERTY_CODE" => array(
			0 => "",
			1 => "",
		),
		"CLOSED_OFFERS_PROPERTY_CODE" => array(
			0 => "",
			1 => "",
		),
		"SORT" => "N",
		"FIELDS" => array(
		),
		"PRICE_CODE" => array(
			0 => "BASE",
		),
		"CONVERT_CURRENCY" => "N",
		"XML_EXPORT" => "N",
		"THEME" => "ice",
		"SECTION_TITLE" => "-",
		"SECTION_DESCRIPTION" => "-",
		"STORES_ID" => array(
		),
        "PAGER_PARAMS_NAME" => "arrPager"
	),
	false
);?>

Как настроить ЧПУ для этого случая можно прочитать здесь.

Я хочу, чтобы фильтр работал только на отдельной странице (например, на главной)

Рассмотрим случай, если вам нужно чтобы фильтр работал на отдельной странице сайта, и при клике по кнопке показать переходил на другую страницу с результатами фильтрации. Например, пусть фильтр будет на главной странице сайта. Для этого просто открываем главную страницу в визуальном редакторе и добавляем компонент Kombox: Умный фильтр и настраиваем его.

Редактирование страницы index.php

Параметры компонента Kombox: Умный фильтр

В параметрах не нужно указывать параметры ID раздела инфоблока и Символьный код раздела инфоблока, и обязательно нужно указать параметр Путь к разделу, в этом параметре нужно указать путь к странице, на которую будет переходить фильтр. На этой странице должен быть расположен и настроен компонент bitrix:catalog.section. У меня это будет корень каталога /catalog/ (как его сделать и настроить). Сохраняем страницу. На главной странице должен отобразиться фильтр.

Главная страница интернет-магазина с фильтром по товарам 

Если что-то не работает, то пытаемся разобраться.

Я хочу, чтобы фильтр работал на всех страницах сайта

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

Для этого открываем файл шаблона header.php. Помним, что фильтр должен вызываться до компонента bitrix:catalog.section, поэтому размещать его следует в header.php, в footer.php он работать не будет.

Я для примера размещу горизонтальный шаблон фильтра сразу после заголовка. Строка файла 187, после кода:

<?if ($curPage != SITE_DIR."index.php"):?>
<h1><?=$APPLICATION->ShowTitle(false);?></h1>
<?endif?>

Помещаю код:

<?$APPLICATION->IncludeComponent(
	"kombox:filter",
	"bitronic-vertical",
	Array(
		"IBLOCK_TYPE" => "catalog",
		"IBLOCK_ID" => "2",
		"FILTER_NAME" => "arrFilter",
		"HIDE_NOT_AVAILABLE" => "N",
		"CACHE_TYPE" => "A",
		"CACHE_TIME" => "36000000",
		"CACHE_GROUPS" => "Y",
		"SAVE_IN_SESSION" => "N",
		"INCLUDE_JQUERY" => "Y",
		"MESSAGE_ALIGN" => "LEFT",
		"MESSAGE_TIME" => "5",
		"CLOSED_PROPERTY_CODE" => array("", ""),
		"CLOSED_OFFERS_PROPERTY_CODE" => array("", ""),
		"SORT" => "N",
		"FIELDS" => array(),
		"PRICE_CODE" => array("BASE"),
		"CONVERT_CURRENCY" => "N",
		"XML_EXPORT" => "N",
		"THEME" => "ice",
		"SECTION_TITLE" => "-",
		"SECTION_DESCRIPTION" => "-",
		"STORES_ID" => array(),
		"IS_SEF" => "Y",
		"SEF_BASE_URL" => "/catalog/",
		"SECTION_PAGE_URL" => "#SECTION_CODE#/",
		"DETAIL_PAGE_URL" => "#SECTION_CODE#/#CODE#/",
		"PAGE_URL" => ""
	)
);?>

Здесь выставляем любые нужные нам параметры, НО особенно выжны для нас последние 4 параметра. IS_SEF = Y – это мы включаем режим самостоятельного определения текущего раздела. Теперь компонент сам будет определять в каком разделе каталога он находится, но для этого нам так же нужно передать шаблоны url для страниц раздела каталога и детальной страницы. Параметр PAGE_URL следует оставить пустым. В итоге компонент фильтра будет отображаться на всех страницах сайта. Если мы применим фильтр вне каталога, то фильтр перебросит нас в корень каталога (/catalog/) и применит фильтр, если мы применим фильтр находясь в разделе каталога, то фильтр останется на текущей странице, если применим на детальной странице, то фильтр перебросит нас на страницу раздела.

Блок "Ваш выбор"

Блок "Ваш выбор" - это вывод выбранных значений свойств фильтра. Его можно вывести в любом месте, чтобы пользователь видел по каким параметрам отфильтрованы товары и быстро мог отменить какие-то значения. Актуально для фильтров с большим количеством свойств. Данный блок так же работает в режиме ajax.

Ваш выбор

Вывести этот блок можно в любом месте на странице с фильтром (в шапке, в подвале, в сайдбаре, даже до вывода самого фильтра). Для этого в нужном вам месте разместите код:

$APPLICATION->ShowViewContent('kombox-filter-choice');

Частые ошибки

Если вы сделали все по инструкции, а фильтр не работает, то вот вам перечень самых частых ошибок.

Не подключен jquery

Для работы фильтра необходима библиотека jquery, если у вас на сайте ее нет, то следует ее подключить в шаблоне сайта, лучше через функцию CJSCore::Init(array("jquery")); либо можете указать параметр компонента фильтра INCLUDE_JQUERY = Y

Подключено два jquery

Бывает так, что в шаблоне сайта подключено две (три, четыре) версии jquery, из-за этого js-код фильтра может не работать и может работать не правильно. Обычно ошибка в таком случае выглядит примерно так (смотрите в консоли Google Chrome):

js ошибка

В этом случае нужно избавится от лишнего подключения jquery. В идеале следует подключать системную jquery вот так:

CJSCore::Init(array("jquery"));

Ошибка javascript

Так же следует убедится что нет других js-ошибок, иногда какая-то ошибка прерывает выполнение javascript.

Не указан параметр FILTER_NAME у компонента catalog.section

У компонента catalog.section обязательно нужно указать параметр FILTER_NAME – имя фильтра (обычно arrFilter), если вы используете комплексный компонент каталога bitrix:catalog, то аналогичный параметр следует указать у него.

Имя фильтра FILTER_NAME

На странице оставлен старый умный фильтр

Как ни странно, но очень популярная ошибка. При установке вам обязательно нужно удалить или закомментировать старый умный фильтр (bitrix:catalog.smart.filter), если он есть на странице, вместе они не будут корректно работать.

Комментировать необходимо через php - комментарии:

<?
/*
код
*/
?>

Если вы закомментируете через html-комментарии:

<!--
код
-->

То хоть фильтр и не будет отображаться, он все равно будет вызываться и мешать Kombox-фильтру.

Ошибка Fatal error: Class 'DOMDocument' not found in /home/bitrix/www/bitrix/modules/kombox.filter/include.php на странице редактирования настроек свойства инфоблока.

В этом случае нужно на хостинге установить расширение php dom.so

SEO

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

Для этого в административном разделе переходим в Рабочий стол/Настройки/Настройки продукта/Настройки модулей/Kombox: Умный фильтр

Настройки модуля

После этого в разделе Маркетинг/Поисковая оптимизация/Kombox SEO-фильтр появятся выбранные инфоблоки и можно будет создавать правила.

SEO-правила

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

Пример правила:

Правило

Данное правило будет применяться, если в фильтре будет выбран производитель Samsung. Значение свойства указывать не обязательно, может быть любое значение. Можно указать несколько свойств, в том числе числовые. Например правило может быть таким:


Так же нужно указать раздел инфоблока, к которому будет применяться данное правило, либо это может быть весь инфоблок.

Далее нужно указать значения для мета-тегов. 

seo-данные

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

Т.е. H1 заданный как "Телевизоры #MANUFACTURER#", при выборе производителя Samsung будет выведен как "Телевизоры Samsung".

Отдельно стоит рассказать, про поле "Текст". Здесь можно указать любой произвольный текст, в том числе в html формате, который можно вывести в любом месте страницы. Для этого нужно разместить в нужном месте такой код:

<?
if(CModule::IncludeModule('kombox.filter')){
	echo Kombox\Filter\Seo::ShowText("");
}
?>

В демо таким образом выводится описание производителя - http://filter.kombox.ru/tv/filter/manufacturer-samsung/

Телевизоры Samsung

Фильтрация без перезагрузки страницы (AJAX)

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

Но это не все, к сожалению. Вам придется самостоятельно написать код обработчика для обновления списка товаров. Так как у списка товаров на каждом сайте свой дизайн, могут быть "навешаны" различные обработчики событий, ajax-добавление в корзину и т.д., то вам придется самостоятельно все это обновлять, фильтр только даст вам новый html-код страницы. Но если вы знаете javascript, то все это не так уж и сложно, даже на самых "навороченных" сайтах у меня это не занимало больше 1 часа. А для стандартного демо-магазина это вообще всего пара строк кода!

Рассмотрим как все это сделать на примере демо-сайта интернет магазина 1С-Битрикс. Будем считать что kombox-фильтр на сайте уже установлен и настроен. Для этого есть отдельная инструкция - http://filter.kombox.ru/docs/course/?COURSE_ID=1&amp;CHAPTER_ID=03

Наш фильтр работает, фильтрует товары, но для этого нам нужно каждый раз нажимать кнопку "Показать", а мы хотим чтобы все было сразу, выбрал свойство - получил результат. И так поехали!

Для начала меняем шаблон компонента фильтра на ajax. Так же, чтобы не отправлять весь html-код страницы будем обрезать его. Для этого в файле шаблона каталога section_vertical.php в верху файла, до подключения компонента фильтра добавляем такой код:

 $ajax = $_POST['filter_ajax'] == 'y';
 if($ajax)$APPLICATION->RestartBuffer();

А в самом низу добавляем:

if($ajax)die();

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

Для начала сделаем просто обновление html списка каталога. Размещаем код скрипта в конце файла section_vertical.php, после нашего кода кода с die():

 <script>
BX.ready(function(){
	BX.addCustomEvent("onKomboxFilterCatalogLoading", BX.delegate(function(data){
		var $data = $('<div>' + data + '</div>');
		var content = $data.find('.catalog-section[data-entity="container-1"]');
		var cur_content = $('.catalog-section[data-entity="container-1"]');
		cur_content.replaceWith(content);
		
		//учтем постраничку
		var pager = $('div[data-pagination-num]', $data);
		var cur_pager = $('div[data-pagination-num]');
		
		if(pager.length){
			if(cur_pager.length)
			{
				cur_pager.replaceWith(pager).show();
			}
			else
			{
				content.after(pager);
			}
		}
		else if(cur_pager.length){
			cur_pager.hide();
		}
	}, this));
});
 </script>

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

Уникальные Платья от магазина Одежда.png

Теперь нам нужно доработать наш обработчик, чтобы применить все необходимые скрипты. В стандартных шаблонах js-код вызывается сразу в шаблонах, поэтому в данном случае наша задача сильно упрощается, нам всего лишь нужно найти эти скрипты и выполнить их. Теперь наш обработчик будет таким:

 <script>
 BX.ready(function(){
	BX.addCustomEvent("onKomboxFilterCatalogLoading", BX.delegate(function(data){
		var $data = $('<div>' + data + '</div>');
		var content = $data.find('.catalog-section[data-entity="container-1"]');
		var cur_content = $('.catalog-section[data-entity="container-1"]');
		cur_content.replaceWith(content);
		
		//учтем постраничку
		var pager = $('div[data-pagination-num]', $data);
		var cur_pager = $('div[data-pagination-num]');
		
		if(pager.length){
			if(cur_pager.length)
			{
				cur_pager.replaceWith(pager).show();
			}
			else
			{
				content.after(pager);
			}
		}
		else if(cur_pager.length){
			cur_pager.hide();
		}
		
		//выполним скрипты
		var ob = BX.processHTML(data);
		BX.ajax.processScripts(ob.SCRIPT);
	}, this));
});
 </script>

И список товаров теперь отображается после фильтрации правильно:

Уникальные Платья от магазина Одежда+

На этом переход на ajax можно считать оконченным!

Если у вас не получается написать обработчик, то я могу написать его вам за дополнительную плату. Пишите мне на support@kombox.ru

Вопрос-ответ

Как разместить фильтр слева (в подвале, шапке и т.д.)?

Что делать если нам нужно разместить фильтр в подвале сайта или слева/справа в сайдбаре? Но при этом фильтр должен вызываться ДО компонента bitrix:catalog.section. Есть замечательный метод CMain::ShowViewContent. Метод позволяет установить выводимый контент для функции AddViewContent. С помощью этого метода можно вывести фильтр где угодно. Допустим мы используем комплексный компонент каталога и фильтр у нас вызывается (или будет вызываться) в файле шаблона section.php (sections.php). Тогда вызов фильтра должен быть таким:

<?
if(!isset($_REQUEST["ajax"])) $this->SetViewTarget("sidebar");

$APPLICATION->IncludeComponent(
	"kombox:filter", 
	"", 
	array(
		"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
		"IBLOCK_ID" => $arParams["IBLOCK_ID"],
		"FILTER_NAME" => $arParams["FILTER_NAME"],
		"SECTION_ID" => $arResult["VARIABLES"]["SECTION_ID"],
		"SECTION_CODE" => $arResult["VARIABLES"]["SECTION_CODE"],
		"HIDE_NOT_AVAILABLE" => $arParams["HIDE_NOT_AVAILABLE"],
		"CACHE_TYPE" => $arParams["CACHE_TYPE"],
		"CACHE_TIME" => $arParams["CACHE_TIME"],
		"CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
		"SAVE_IN_SESSION" => "N",
		"INCLUDE_JQUERY" => "Y",
		"MESSAGE_ALIGN" => "LEFT",
		"MESSAGE_TIME" => "0",
		"IS_SEF" => "N",
		"CLOSED_PROPERTY_CODE" => array(),
		"CLOSED_OFFERS_PROPERTY_CODE" => array(),
		"SORT" => "N",
		"FIELDS" => array(),
		"PRICE_CODE" => $arParams["PRICE_CODE"],
		"CONVERT_CURRENCY" => $arParams["CONVERT_CURRENCY"],
		"CURRENCY_ID" => $arParams["CURRENCY_ID"],
		"XML_EXPORT" => "Y",
		"SECTION_TITLE" => "NAME",
		"SECTION_DESCRIPTION" => "DESCRIPTION"
	),
	false
);

if(!isset($_REQUEST["ajax"])) $this->EndViewTarget("sidebar");
?>

Т.е. перед фильтром мы вызываем метод SetViewTarget, после EndViewTarget. В результате фильтр отработает ДО компонент bitrix:catalog.section, но показан он не будет. Затем в том месте где мы хотим отобразить фильтр необходимо вызвать метод <?$APPLICATION->ShowViewContent('sidebar');?>. Это может быть любым местом – шаблон сайта, шаблон другого компонента, включаемая область.

Видео от Дмитрия Акифьева в котором этот момент очень доходчиво раскрывается - https://www.youtube.com/watch?v=Rbez1ep9TUE

Как выбирать свойства которые будут выводиться в фильтре?

Все очень подробно описано в этом посте Отображение необходимых свойств в умном фильтре.

Как и куда вводить подсказки?

Подсказки вводятся в настройках свойств инфоблока. Можно вводить в стандартное поле Подсказка (максимальная длина подсказки 200 символов), либая в поле Подсказка (любая длина подсказки) в блоке Дополнительные параметры для Kombox: Умный фильтр.

Подсказка для фильтра

Как и где менять параметры компонент?

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

Параметры компонента фильтра

Диалоговое окно параметров компонента фильтра

Если же компонент фильтра подключен у вас в шаблоне комплексного компонента bitrix:catalog, то нельзя будет изменять параметры фильтра через визуальный редактор или диалог параметров компонента. К сожалению, такая особенность архитектуры компонентов в 1С: Битрикс. Вам придется править параметры в коде шаблона (обычно это файлы section.php и sections.php шаблона компонента каталога). 

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

Редактирование параметров фильтра

Найдите в коде шаблона вызов компонента Kombox-фильтра и отредактируйте его параметры.

Редактирование параметров фильтра в шаблоне

Как включить полноценное ЧПУ?

Полноценное ЧПУ (ссылки фильтра вида /filter/price-from-9629-to-27728/manufacturer-acer-or-asus/) включается в настройках модуля Kombox: Умный фильтр (/bitrix/admin/settings.php?lang=ru&mid=kombox.filter&mid_menu=1)

Параметры модуля

В поле Страницы с ЧПУ фильтра укажите раздел каталога (обычно это catalog), если таких разделов несколько то перечислите их через точку с запятой.

Если у вас комплексный компонент каталога (bitrix:catalog), то на этом настройка закончена. Если вы не используете комплексный компонент, то вам нужно в файл urlrewrite.php добавить правила обработки адресов. Я бы рекомендовал вам все-таки использовать комплексный компонент каталога, но если это невозможно, то вам придется самостоятельно написать правила обработки адресов, чтобы при переходе по ссылкам вида /filter/price-from-9629-to-27728/manufacturer-acer-or-asus/ открывался каталог и не было 404 ошибки. Я приведу пример таких правил для url вида:

Раздел: /catalog/#SECTION_CODE#/

Детальная страница: /catalog/#SECTION_CODE#/#ELEMENT_CODE#/

Для этого случая правила будут такими (именно в таком порядке):

$arUrlRewrite = array(
    array(
        "CONDITION" => "#^/catalog/filter/[A-Za-z0-9_-]+/\\??.*\$#",
        "RULE" => "",
        "ID" => "",
        "PATH" => "/catalog/index.php",
    ),
	array(
        "CONDITION" => "#^/catalog/([A-Za-z0-9_-]+)/filter/[A-Za-z0-9_-]+/\\??.*\$#",
        "RULE" =>  "SECTION_CODE=\$1",
        "ID" => "",
        "PATH" => "/catalog/section.php",
    ),
	array(
        "CONDITION" => "#^/catalog/([A-Za-z0-9_-]+)/([A-Za-z0-9_-]+)/\\??.*\$#",
        "RULE" => "SECTION_CODE=\$1&ELEMENT_CODE=\$2",
        "ID" => "",
        "PATH" => "/catalog/detail.php",
    ),
	array(
        "CONDITION" => "#^/catalog/([A-Za-z0-9_-]+)/\\??.*\$#",
        "RULE" => "SECTION_CODE=\$1",
        "ID" => "",
        "PATH" => "/catalog/section.php",
    ),
);

Как отсортировать поля фильтра?

Для этого у свойств нужно задать индекс сортировки.

Индекс сортировки свойств

А у компонента фильтра задать параметр SORT = Y и указать направление сортировки через параметр SORT_ORDER (ASC – по возрастанию индекса сортировки, DESC – по убыванию).

Сортировка полей фильтра

Индексы сортировки для полей фильтра (Подразделы, Склады, Количество, Наличие) задаются в настройках компонента.

Индексы сортировки полей фильтра

Индекс сортировки для цен задается в настройках типа цены (/bitrix/admin/cat_group_admin.php?lang=ru).

Индекс сортировки для цен

Включил ЧПУ, теперь при сортировке фильтр сбивается, как исправить?

ЧПУ работает таким образом, что модуль подменяет текущий url и метод CMain::GetCurPageParam начинает работать не правильно. В итоге если у вас в каталоге какие-то ссылки (например сортировка, вид списка товаров и т.д.) были организованы через этот метод, то теперь при переходе по таким ссылкам, фильтр будет сбрасываться. Чтобы этого избежать, следует использовать аналогичную функцию CKomboxFilter::GetCurPageParam. Пример вызова функции:

CModule::IncludeModule('kombox.filter');
<a href="<?=CKomboxFilter::GetCurPageParam('sort='.$key, array('sort'))?>">Сортировать</a>

Как сделать, чтобы при несуществующих параметрах в url выводилась 404 ошибка?

Если вы хотите чтобы в режиме ЧПУ фильтра, если в url есть лишние/несуществующие/неправильные параметры, то сайт не игнорировал их, а выводил 404 ошибку, то это инструкция для вас.

Дело в том что фильтр не может знать обо всех возможных параметрах, которые могут быть в url, чтобы однозначно определить лишние они или нет. Например в интернет-магазине Битроник сортировка реализована через ЧПУ. У других сайтов могут быть свои особенности. Поэтому фильтр, если встречает неправильные параметры в url он устанавливает константу KOMBOX_FILTER_ERROR_404 = Y. И уже по этой константе вы можете на конкретном сайте принимать решение выводить ошибку 404 или нет, делая если потребуется дополнительные проверки. Начиная с версии 2.5.6 можно получить массив параметров, который фильтр посчитал недействительными. Массив возвращает функция CKomboxFilter::GetUnavailableParams().

Вот пример обычного обработчика без проверок, который в случае если константа KOMBOX_FILTER_ERROR_404 = Y выводит страницу с 404 ошибкой:

<?
AddEventHandler('main', 'OnEpilog', 'Redirect404');

function Redirect404() {
    
    define('PATH_TO_404', '/404.php');
    if( 
	!defined('ADMIN_SECTION') &&  
	defined('KOMBOX_FILTER_ERROR_404') &&  
	file_exists($_SERVER['DOCUMENT_ROOT'].PATH_TO_404) 
    ) 
    {

        global $APPLICATION;
        $APPLICATION->RestartBuffer();
        
        include($_SERVER['DOCUMENT_ROOT'].SITE_TEMPLATE_PATH.'/header.php');
        include($_SERVER['DOCUMENT_ROOT'].PATH_TO_404);
        include($_SERVER['DOCUMENT_ROOT'].SITE_TEMPLATE_PATH.'/footer.php');
    }
}
?>

И пример с проверкой, в котором мы будем учитывать, что url могут быть параметры сортировки по цене:

<?
AddEventHandler('main', 'OnEpilog', 'Redirect404');

function Redirect404() {
    
    define('PATH_TO_404', '/404.php');
    if( 
	!defined('ADMIN_SECTION') &&  
	defined('KOMBOX_FILTER_ERROR_404') &&  
	file_exists($_SERVER['DOCUMENT_ROOT'].PATH_TO_404) 
    ) 
    {
	$params = array();
	if(CModule::IncludeModule('kombox.filter')){
		$params = CKomboxFilter::GetUnavailableParams(); //недейсвительные параметры 
	}
		
	//проверка каких-то специальных параметров
	if(!empty($params)){
		foreach($params as $key => $param){
			if(in_array($param, array('sort_price_asc', 'sort_price_desc')))
				unset($params[$key]); //удаляем из массива недейсвительных параметров сортировку по цене
		}
	}
		
		
	if(!empty($params)){
		global $APPLICATION;
		$APPLICATION->RestartBuffer();
			
		include($_SERVER['DOCUMENT_ROOT'].SITE_TEMPLATE_PATH.'/header.php');
		include($_SERVER['DOCUMENT_ROOT'].PATH_TO_404);
		include($_SERVER['DOCUMENT_ROOT'].SITE_TEMPLATE_PATH.'/footer.php');
	}
    }
}
?>
Данный код следует поместить в файл /bitrix/php_interface/init.php (если на сайте такого файла нет, то его нужно создать).

Как убрать промежуточные значения в слайдере?

Иногда требуется убрать промежуточные значения в слайдерах, т.е. чтобы выводилось только максимальное и минимальное значение. Для этого поместите в стилях сайта такие правила:
#kombox-filter .irs-grid-text ~ .irs-grid-text{
display: none;
}
 
#kombox-filter .irs-grid-text:last-of-type {
display: inline-block;
}

Можно ли разместить 2 фильтра на одной странице?

К сожалению нельзя, фильтры будут мешать друг-другу.

Как задать сортировку значений свойства

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

Настройки модуля

После этого, нужно зайти в настройки свойства инфоблока и задать сортировку:

Как настроить постраничную навигацию?

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

Для этого заходим в настройки компонента каталога, и идем в блок настроек "Настройки постраничной навигации". Здесь отмечаем галочку "Включить обработку ссылок", параметр "Url для построения ссылок (по умолчанию - автоматически)" оставляем пустым, в параметре "Имя массива с переменными для построения ссылок" задаем значение "arrPager". В конечном итоге должно быть вот так:


После этого следует проконтролировать, что данные параметры передаются компоненту фильтра и компоненту catalog.section (Элементы раздела). Т.е. подключение компонента фильтра, должно выглядеть примерно так:

<?
$APPLICATION->IncludeComponent(
	"kombox:filter", 
	"", 
	array(
		"IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"],
		"IBLOCK_ID" => $arParams["IBLOCK_ID"],
		"FILTER_NAME" => $arParams["FILTER_NAME"],
		"SECTION_ID" => $arResult["VARIABLES"]["SECTION_ID"],
		"SECTION_CODE" => $arResult["VARIABLES"]["SECTION_CODE"],
		"HIDE_NOT_AVAILABLE" => $arParams["HIDE_NOT_AVAILABLE"],
		"CACHE_TYPE" => $arParams["CACHE_TYPE"],
		"CACHE_TIME" => $arParams["CACHE_TIME"],
		"CACHE_GROUPS" => $arParams["CACHE_GROUPS"],
		"SAVE_IN_SESSION" => "N",
		"INCLUDE_JQUERY" => "Y",
		"MESSAGE_ALIGN" => "LEFT",
		"MESSAGE_TIME" => "0",
		"IS_SEF" => "N",
		"CLOSED_PROPERTY_CODE" => array(),
		"CLOSED_OFFERS_PROPERTY_CODE" => array(),
		"SORT" => "N",
		"FIELDS" => array(),
		"PRICE_CODE" => $arParams["PRICE_CODE"],
		"CONVERT_CURRENCY" => $arParams["CONVERT_CURRENCY"],
		"CURRENCY_ID" => $arParams["CURRENCY_ID"],
		"XML_EXPORT" => "Y",
		"SECTION_TITLE" => "NAME",
		"SECTION_DESCRIPTION" => "DESCRIPTION",
        "PAGER_PARAMS_NAME" => $arParams["PAGER_PARAMS_NAME"]
	),
	false
);
?>

А подключение компонента catalog.section, должно иметь такие параметры:

<?
$APPLICATION->IncludeComponent(
	"bitrix:catalog.section",
	"",
	array(
		...
		"PAGER_TITLE" => $arParams["PAGER_TITLE"],
		"PAGER_SHOW_ALWAYS" => $arParams["PAGER_SHOW_ALWAYS"],
		"PAGER_TEMPLATE" => $arParams["PAGER_TEMPLATE"],
		"PAGER_DESC_NUMBERING" => $arParams["PAGER_DESC_NUMBERING"],
		"PAGER_DESC_NUMBERING_CACHE_TIME" => $arParams["PAGER_DESC_NUMBERING_CACHE_TIME"],
		"PAGER_SHOW_ALL" => $arParams["PAGER_SHOW_ALL"],
		"PAGER_BASE_LINK_ENABLE" => $arParams["PAGER_BASE_LINK_ENABLE"],
		"PAGER_BASE_LINK" => $arParams["PAGER_BASE_LINK"],
		"PAGER_PARAMS_NAME" => $arParams["PAGER_PARAMS_NAME"],
		...
	),
	$component
);
?>

Если вы не используете комплексный компонент каталога, то данные параметры нужно задавать напрямую у компонентов фильтра и catalog.section (Элементы раздела)






Как менять представление, подсказку, сортировку, количество выводимых значений у свойств?

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

Настройки модуля фильтра

Задали инфоблок или несколько инфоблоков. После этого, переходим в настройки инфоблока, на вкладку "Свойства":

Свойства инфоблока 

Затем, рядом с нужным свойством нажимаем кнопку "Изменить". Открывается диалоговое окно, в котором можно задать представление свойства, подсказку, сортировку и т.д.:

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

Как задать свои критерии для отбора элементов?

По умолчанию фильтр работает либо со всеми товарами из инфоблока, либо с товарами из какого-то раздела. Иногда нужно фильтровать не по всем товарам, а по каким-то определенным, т.е. нужно задать свои критерии для отбора. Например:

  • Фильтр товаров на странице поиска
  • Фильтр товаров какого-то конкретного бренда. Т.е. если на сайте есть страницы брендов и там выводятся все товары этого бренда, то хорошо бы на такой странице сделать фильтр.
  • На любой странице где есть список товаров, отобранных по какому-то критерию: товары со скидкой, акции, популярные товары и т.д.

Реализуется это очень легко. У компонента фильтра есть параметр FILTER_NAME, в него нужно передать название переменной, обычно это arrFilter, в которую фильтр сохранит сгенерированный массив-фильтр для функции CIBlockElement::GetList. Обычно этот массив передается в компонент bitrix:catalog.section или bitrix:news.list, у которых тоже есть параметр FILTER_NAME. Но если мы перед вызовом компонента фильтра зададим какие-то критерии в переменной arrFilter, то фильтр их учтет, и будет фильтровать товары с учетом этих критерий. В общем случае это будет выглядеть так:

global $arrFilter;

$arrFilter = array(
	/*параметры*/
);

/*
	например, зададим отбор по строковому свойству с кодом BRAND
	$arrFilter = array(
		"PROPERTY_BRAND" => "samsung"
	);
	
	отбор по товарам с установленным чекбоксом "Распродажа"
	$arrFilter = array(
		"PROPERTY_SALES" => 1
	);
	
	отбор по товарам отобранным компонентом поиска
	$arrFilter = array(
		"=ID" => $arElements, //arElements - массив с ID найденных товаров
	);
*/

$APPLICATION->IncludeComponent(
	"kombox:filter",
	"",
	Array(
		...
		"FILTER_NAME" => 'arrFilter',
		...
	),
	false
);

$APPLICATION->IncludeComponent(
	"bitrix:catalog.section",
	".default",
	array(
		...
		"FILTER_NAME" => "arrFilter",
		...
	)
);


На странице поиска остановлюсь немного подробнее. Общий принцип тот же, но есть несколько моментов.

Для правильной работы, версия фильтра должна быть не меньше, чем 2.5.11.

Буду рассматривать на примере стандартного магазина. Шаблон каталога уже скопирован в шаблон сайта. Поиск по товарам происходит на странице http://site.ru/catalog/?q=футболка, шаблон этой странице находится в шаблоне каталога в файле search.php. В этом файле подключается компонент bitrix:catalog.search, который находится тут же, в папке bitrix, смотрим что там. А там если кратко, то такой код:

$arElements = $APPLICATION->IncludeComponent(
    "bitrix:search.page",
    ".default",
    Array(
        /*параметры*/
    ),
    $component,
    array('HIDE_ICONS' => 'Y')
);
if (!empty($arElements) && is_array($arElements))
{
        global $searchFilter;
        $searchFilter = array(
            "=ID" => $arElements,
        );
        $APPLICATION->IncludeComponent(
        "bitrix:catalog.section",
        ".default",
        array(
            /*параметры*/
        ),
        $arResult["THEME_COMPONENT"],
        array('HIDE_ICONS' => 'Y')
    );
}
elseif (is_array($arElements))
{
    echo GetMessage("CT_BCSE_NOT_FOUND");
}

Вот перед компонентом bitrix:catalog.section мы и будем вставлять фильтр.

$arElements = $APPLICATION->IncludeComponent( "bitrix:search.page", ".default", Array( /*параметры*/ ), $component, array('HIDE_ICONS' => 'Y') ); if (!empty($arElements) && is_array($arElements)) { global $searchFilter; $searchFilter = array( "=ID" => $arElements, ); $APPLICATION->IncludeComponent( "kombox:filter", 'horizontal', Array( "IBLOCK_TYPE" => $arParams["IBLOCK_TYPE"], "IBLOCK_ID" => $arParams["IBLOCK_ID"], "FILTER_NAME" => 'searchFilter', "PRICE_CODE" => $arParams["PRICE_CODE"], 'CONVERT_CURRENCY' => $arParams['CONVERT_CURRENCY'], 'CURRENCY_ID' => $arParams['CURRENCY_ID'], "CACHE_TYPE" => $arParams["CACHE_TYPE"], "CACHE_TIME" => $arParams["CACHE_TIME"], "CACHE_NOTES" => "", "CACHE_GROUPS" => $arParams["CACHE_GROUPS"], "SAVE_IN_SESSION" => "N", "IS_SEF" => "N", "INCLUDE_JQUERY" => "Y", "CLOSED_PROPERTY_CODE" => array(), "XML_EXPORT" => "Y", "SECTION_TITLE" => "NAME", "SECTION_DESCRIPTION" => "DESCRIPTION", "FIELDS" => $arFields, "COLUMNS" => "4", "MESSAGE_ALIGN" => "RIGHT", "PAGER_PARAMS_NAME" => $arParams["PAGER_PARAMS_NAME"], "PAGE_URL" => "/catalog/?q=".htmlspecialcharsex($_GET["q"])."&how=r" ) ); $APPLICATION->IncludeComponent( "bitrix:catalog.section", ".default", array( /*параметры*/ ), $arResult["THEME_COMPONENT"], array('HIDE_ICONS' => 'Y') ); } elseif (is_array($arElements)) { echo GetMessage("CT_BCSE_NOT_FOUND"); }

Все стандартно, но есть несколько моментов, параметры SECTION_ID и SECTION_CODE задавать не нужно, т.к. фильтр должен работать по всему каталогу. Нужно задать параметр PAGE_URL, чтобы фильтр работал именно со страницей поиска и не сбрасывал параметр q. Вот, что в итоге получилось:

Умный фильтр битрикс на странице поиска

Поиск футболки с фильтром по производителю и цвету.

Если фильтр работает в режиме ЧПУ, то для поиска, нужно будет еще внести правки в шаблон формы поиска. Дело в том, что по умолчанию форма поиска отправляет запрос на текущий url, и если фильтр установлен, то при новом поисковом запросе, он не будет сброшен. Поэтому идем в шаблон формы поиска, если нужно, то копируем ее в шаблон сайта, находим там тег формы. У меня он был таким:

<form action="" method="get">

Нужно прописать абсолютный url к странице поиска. В итоге код должен стать таким:

<form action="<?=SITE_DIR?>catalog/" method="get">
Все, теперь фильтр будет работать на странице поиска в ЧПУ режиме.

Фильтр на странице поиска

Kombox-фильтр может работать на странице поиска и не только - подробнее

Не работают формы в режиме AJAX

Речь идет о стандартных формах штатного модуля form. Часто их переводят в режим ajax (параметр компонента AJAX_MODE => Y). В режиме ЧПУ эти формы перестают работать в режиме ajax, происходит обновление всей страницы. Чтобы это исправить, вам нужно скопировать шаблон компонента form.result.new в шаблон сайта (как правило, он уже скопирован, так как стандартное отображение формы редко вписывается в дизайн сайта и в 99% его кастомизируют, поэтому вам нужно будет найти нужный шаблон). В шаблоне в файле result_modifier.php (если его нет, то нужно создать) вам нужно прописать такой код:

<?
if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

preg_match_all('/action=(["\']{1})(.*?)\1/i', $arResult["FORM_HEADER"], $arAction);
$url = $arAction[2][0];

$pos = strpos($url, '/filter/');
if($pos !== false){
	$newUrl = substr($url, 0, $pos + 1);
	$arResult["FORM_HEADER"] = str_replace($url, $newUrl, $arResult["FORM_HEADER"]);
}