Форма поиска и фильтры в разделе

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

Что из себя представляет такой поиск? Предположим, что на нашем сайте есть раздел с доской объявлений. Нам нужно предоставить посетителю возможность быстрой сортировки/фильтрации предоставляемой ему информации. Для этого на страницу со списком объектов (в данном случае - объявлений) помещается форма, в которой посетитель может задать какие-либо параметры. К примеру, у вас на сайте есть раздел, который продаёт, покупает и меняет автомобили (квартиры, какие-либо вещи и т. п.), в таком случае можно посетителю вывести примерно такую форму:

Рис.1 - Форма поиска по разделу

Можно вывести просто заголовок, можно стоимость - от и до, можно марку и т. д. 

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

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

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

Рис.2 - Список полей компонента

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

Сейчас вам необходимо выбрать те поля, которые будут участвовать в поиске. В данном компоненте, я предлагаю выбрать следующие поля:

Рис.3 - Выбор полей для поиска

• Название товара
• Описание товара
• Стоимость. Здесь укажем диапазон "от - до"
• Производитель. Выбор страны-производителя

В настройке каждого поля существует такой опциональный пункт как "возможен поиск по данному полю".

Рис.4 - Включение поля в поиск

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

Рис.5 - Список полей компонента

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

Уже сейчас мы можем попробовать фильтр в действии. Для этого нужно в настройку компонента, в префикс списка объектов, добавить переменную $searchForm, примерно так:

Рис.6 - Переменная в префиксе

Сохраняем и смотрим на сайте, что получилось:

Рис.7 - Форма поиска на сайте

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

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

Рис.8 - Вкладка "Шаблоны действий: Поиск"

и сгенерировать код формы, нажав на соответствующую ссылку:

Рис.9 - Генерация поля формы

После генерации вы увидите html-код формы, содержащий необходимые вставки NetCat. С этой формой вы уже можете работать дальше.

При необходимости поисковую форму можно открывать на отдельной странице. Для этого нужно всего-лишь поставить ссылку на такую страницу в виде:
/ключевое_слово_раздела/search_ключевое_слово_компонента.html

Рис.10 - Ссылка на страницу с поисковой формой

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

Рис.11 - Выставление действия по-умолчанию