AJAX-фильтрация превращает умный фильтр Битрикса в отзывчивый инструмент: пользователь отмечает свойства, и список товаров обновляется без перезагрузки страницы. Разберём, как это работает в связке компонентов «Умный фильтр» и «Каталог», как включить режим и не сломать SEO.
Как устроена AJAX-фильтрация в Битрикс
Умный фильтр в Битрикс — это два связанных компонента из комплекса bitrix:catalog: bitrix:catalog.smart.filter формирует форму с чекбоксами и слайдерами, а bitrix:catalog.section (внутри «большого» комплексного компонента) выводит сам список товаров. Связывает их параметр FILTER_NAME — общее имя массива фильтра, по умолчанию arrFilter.
В классическом (не-AJAX) режиме отметка свойства и клик по кнопке «Показать» отправляют GET-запрос, страница перезагружается целиком, и catalog.section строит выборку с учётом фасетного индекса. При включённом AJAX смена галочки инициирует фоновый запрос: сервер отдаёт только обновлённый HTML списка и счётчики доступных значений, а JavaScript подменяет содержимое контейнера каталога. Пользователь остаётся на месте, не теряет позицию скролла и видит результат за доли секунды.
Где включается режим AJAX
Настройка живёт в параметрах комплексного компонента каталога (bitrix:catalog), а не в самом фильтре. Откройте страницу раздела в режиме правки, зайдите в настройки компонента и найдите группу «Настройки постраничной навигации» / «AJAX»:
AJAX_MODE = Y— включает подгрузку через AJAX;AJAX_OPTION_HISTORY = Y— пишет изменения в историю браузера, чтобы работали кнопки «Назад/Вперёд» и корректно копировалась ссылка;AJAX_OPTION_JUMP = N— обычно отключают автопрокрутку к началу списка, чтобы не «дёргать» страницу;AJAX_OPTION_ADDITIONAL— уникальный идентификатор области, если на странице несколько AJAX-компонентов.
Сам компонент catalog.smart.filter отдельного флага AJAX не имеет — он подхватывает поведение через параметр INSTANT_RELOAD. Если INSTANT_RELOAD = Y, товары пересчитываются сразу при клике по чекбоксу, без нажатия «Показать».
Мгновенный пересчёт против кнопки «Показать»
Есть два сценария поведения фильтра, и их важно не путать:
| Параметр | Поведение | Когда уместно |
|---|---|---|
INSTANT_RELOAD = N | Пользователь отмечает несколько свойств и жмёт «Показать» — один запрос | Большой каталог, много свойств, экономия запросов к серверу |
INSTANT_RELOAD = Y | Каждая галочка сразу перестраивает список и счётчики | Небольшие подборки, где важна интерактивность |
Режим INSTANT_RELOAD = Y красив демонстрационно, но на широком каталоге генерирует шквал запросов: каждая галочка — отдельный пересчёт фасетов. Для магазинов с сотнями тысяч товаров практичнее оставить кнопку «Показать» и включить AJAX только для финального применения фильтра. Компромисс — дебаунс на клиенте, чтобы серия быстрых кликов схлопывалась в один запрос.
История браузера и корректные ссылки
Главная претензия к AJAX-фильтрам — «сломанные» ссылки: пользователь настроил выборку, но URL остался прежним, и поделиться ей нельзя. В Битрикс за это отвечает связка AJAX_OPTION_HISTORY = Y и режим ЧПУ фильтра. При включённой истории компонент через window.history.pushState обновляет адрес — например, /catalog/smartfony/apple/nedorogie/ — и такую ссылку можно скопировать, добавить в закладки или проиндексировать.
Чтобы адреса были человекочитаемыми, а не набором ?arrFilter_...=Y, включают SEO-режим фильтра: параметр SEF_MODE = Y и заданный SEF_RULE с шаблоном пути. Это отдельная большая тема — детали в статье «Красивые ЧПУ-адреса для фильтра».
AJAX_OPTION_HISTORY = Y поисковые роботы и пользователи будут видеть один и тот же URL для всех состояний фильтра — это убивает индексацию SEO-страниц и ломает аналитику.Шаблоны компонента и вёрстка
AJAX подменяет содержимое контейнера, который Битрикс оборачивает служебными комментариями вида <!--'start_frame:...'-->. Если кастомный шаблон каталога рвёт эту обёртку или выводит список товаров вне неё, подмена не сработает — страница либо перезагрузится целиком, либо список «застынет».
- Список товаров и постраничная навигация должны находиться внутри области, обёрнутой компонентом
catalog.section. - Инициализацию слайдеров, тултипов и ленивой подгрузки картинок нужно вешать на событие
BX.addCustomEvent('onFrameDataReceived', ...)или наonCatalogSmartFilterUpdated, иначе после AJAX-подмены скрипты не переинициализируются. - Кнопки корзины и «в избранное» в обновлённом списке тоже теряют обработчики, если они навешаны напрямую, а не через делегирование.
При копировании шаблона .default в свой не удаляйте вызовы $APPLICATION->IncludeComponent с параметрами AJAX — именно они прокидывают режим внутрь дочернего компонента.
Производительность и фасетный индекс
AJAX ускоряет отклик интерфейса, но не саму выборку. Скорость запроса определяет фасетный индекс — предрассчитанная таблица связей «свойство → товары». Проверьте, что для инфоблока каталога включён индекс: в настройках инфоблока каталога есть флаг фасетного индекса, а пересчёт запускается кнопкой в разделе умного фильтра или на регулярной основе.
- После массовой загрузки или обмена с 1С индекс надо переиндексировать, иначе фильтр покажет неверные счётчики или пустые результаты.
- Свойства, участвующие в фильтре, должны быть помечены как фильтруемые в настройках инфоблока — иначе они не попадут в индекс.
- На больших каталогах помогает композитный кэш и включённый
CACHE_TYPE = Aу компонентов, чтобы AJAX-ответы отдавались из кэша.
Типовые ошибки при внедрении
Что чаще всего идёт не так при переводе фильтра на AJAX:
- Двойной вывод фильтра. Умный фильтр подключён и в компоненте, и во включаемой области с другим
FILTER_NAME— состояния расходятся. Имя массива фильтра должно совпадать у формы и у списка. - Скрипты не переинициализируются после подмены DOM — слайдеры цен и галерея перестают работать на второй выборке.
- Кэш отдаёт старые счётчики — забыли сбросить кэш компонентов после смены набора свойств.
- Конфликт нескольких AJAX-областей без уникального
AJAX_OPTION_ADDITIONAL— запросы «перехватывают» чужой контейнер. - Отключённая история — фильтр работает, но ссылками поделиться нельзя и SEO-страницы не индексируются.
Итог
Мгновенная AJAX-фильтрация в Битрикс включается парой параметров комплексного компонента (AJAX_MODE, AJAX_OPTION_HISTORY) и настройкой INSTANT_RELOAD в умном фильтре, но по-настоящему «летает» только на актуальном фасетном индексе и аккуратном шаблоне с переинициализацией скриптов. Отдельно стоит продумать ЧПУ и историю браузера, чтобы не потерять индексацию и удобные ссылки.
Если каталог большой, а фильтр тормозит или ломает вёрстку после подмены, мы настраиваем AJAX-фильтрацию, фасетный индекс и кэширование под конкретный проект — от разработки на 1С-Битрикс до ускорения уже работающего магазина.
Частые вопросы
Где именно включается AJAX для умного фильтра?
В параметрах комплексного компонента каталога, а не в самом фильтре. Нужно установить AJAX_MODE = Y и, как правило, AJAX_OPTION_HISTORY = Y, чтобы работали история браузера и копируемые ссылки.
Чем отличается INSTANT_RELOAD от кнопки «Показать»?
При INSTANT_RELOAD = Y список пересчитывается сразу после каждой галочки, а при значении N — только после клика по кнопке «Показать». Мгновенный режим удобнее в интерфейсе, но создаёт больше запросов на широком каталоге.
Почему после AJAX-обновления перестают работать слайдеры и корзина?
AJAX подменяет часть DOM, и скрипты, навешанные напрямую, теряют обработчики. Инициализацию нужно вешать на событие onFrameDataReceived или использовать делегирование событий.
Сохранится ли ссылка на настроенный фильтр?
Да, если включён AJAX_OPTION_HISTORY = Y — тогда адрес обновляется через history.pushState, и такой URL можно скопировать. Для человекочитаемых адресов дополнительно включают SEO-режим фильтра (SEF).
AJAX ускоряет саму выборку товаров?
Нет, AJAX ускоряет только отклик интерфейса, убирая перезагрузку страницы. Скорость самой выборки определяет фасетный индекс, поэтому его нужно держать актуальным.
Почему фильтр показывает неверные счётчики после загрузки товаров?
Скорее всего, не пересчитан фасетный индекс после обмена с 1С или массовой загрузки. Нужно переиндексировать фильтр в настройках умного фильтра инфоблока.
Можно ли вывести несколько AJAX-фильтров на одной странице?
Да, но каждому комплексному компоненту нужно задать уникальный AJAX_OPTION_ADDITIONAL, иначе запросы будут перехватывать чужие контейнеры и подменять не тот список.
Обязательно ли включать композитный кэш вместе с AJAX?
Не обязательно, но на нагруженном каталоге это заметно ускоряет отдачу. Компонентам стоит выставить CACHE_TYPE = A, а композит помогает быстрее показывать первый экран.
Поможем с настройкой и поддержкой 1С-Битрикс: Управление сайтом
Поможем с настройкой, доработкой и поддержкой 1С-Битрикс: Управление сайтом.