Совсем недавно довелось нам поработать над созданием сложного поиска на сайте под управлением Битрикс. По результату этой задачи получился интересный кейс, который может быть полезен вам, если необходимо сделать нечто подобное, а опыта еще не достаточно.
Прежде всего опишу, что в итоге получилось
Итак, у нас был в разработке интернет-магазин и в шапке сайта должен функционировать быстрый поиск на базе ajax. Кроме поиска по товарам, надо было искать так же по разделам каталога (причем на всех уровнях), а так же по двум дополнительным инфоблокам Акции и Новости.
Оформление нам уже дали готовое и все по задумке выглядело вот так:
В этом быстром поиске надо было ограничить результаты – по 2-3 в каждом сегменте. А при нажатии кнопки поиска, пользователь переходил на страницу с полным списком результатов.
Вот такую:
Начнем с шапки
Схема работы в целом классическая – нам необходимо вызывать событие js при вводе данных в строке и когда пользователь завершает ввод, отправляем ajax запрос в обработчик, где с помощью api мы находим нужные данные и возвращаем их в готовом виде.
Поставив на строку поиску идентификатор id="search_top" мы пишем такой скрипт:
Что интересно, так это использование встроенной в Битрикс функции BX.ajax.insertToNode – очень удобная, так как весь запрос умещается в одну строку. В этой функции две переменных – одна это url куда отправляем запрос (причем его можно отправить с любыми get параметрами), а вторая – это id контейнера куда будет вставлен возвращаемый результат.
Переходим к файлу обработчику. Мы все обработчики для удобства храним в папке /local/ajax/ - это место хранения у нас прописано в стандартах.
Здесь чуть больше работы :)
Для начала мы используя классы api битрикса находим через фильтр возможные совпадения. Вот как это выглядит на примере товара:
Используем тут простой фильтр по названию добавляя знак процента "%NAME"=>$search
По такому же примеру ищем возможные совпадения в разделах. Но тут у нас были усложнения. Если мы находим раздел на 3 уровне вложенности – надо было поднимать всю цепочку до первого уровня.
По итогу такого поиска получаем массивы данных по всем сегментам. И тут есть два варианта – мы можем запросить все необходимые данные и далее их оформить или же получить только id элементов и далее уже использовать стандартные компоненты в связке с фильтрацией по полученным id.
Мы выбрали второй вариант – в нашем случае он был целесообразнее, так как работая с чистым апи нам бы пришлось делать более емкие запросы, чтобы получить наборы свойств и цены товаров.
Вот что мы дальше делаем с полученным массивом id`шников элементов.
Добавляем компонент и фильтр к нему. Шаблон компонента для требуемого внешнего вида при этом редактируется стандартными средствами.
Важно отметить, что мы прописываем везде условия – выводить компоненты только при наличии результатов совпадений. А также в каждом указываем ограничение по количеству отображаемых элементов.
Подсчет количества результатов в этом примере идет простым подсчетом размера нужного массива через sizeof().
Страница поиска
Последним этапом было создание страницы поиска с полным списком результатов. По сути там мы повторяем аналогичную процедуру как в обработчике выше.
Исключением являются отсутствие ограничения результатов, а также более расширенные шаблоны отображения найденного и дополнительные опции по сортировке списка.