Умный фильтр в правом блоке компонента «Каталог»

Умный фильтр в 1С-Битрикс — самостоятельный компонент bitrix:catalog.smart.filter, а не часть каталога. Поэтому «переместить его в правый блок» — это задача вёрстки и настройки шаблона комплексного компонента «Каталог», а не галочка в его параметрах. Разберём, как это делается правильно, чтобы связка «фильтр — список товаров» продолжала работать.

Как связаны каталог и фильтр

Комплексный компонент bitrix:catalog (шаблон интернет-магазина, страница catalog/index.php) сам по себе не рисует фильтр. Внутри его шаблона отдельно подключается компонент bitrix:catalog.smart.filter, а список товаров выводит вложенный bitrix:catalog.section. Связывает их общий инфоблок и параметр SEF_MODE с ЧПУ-адресами.

Ключевой момент: фильтр и список должны работать с одним и тем же инфоблоком и одним ID раздела. Фильтр формирует GET-параметры (или ЧПУ вида /catalog/obuv/filter/tsvet-is-chernyy/apply/), а catalog.section читает их и отдаёт отфильтрованную выборку. Пока это условие соблюдается, физическое расположение блока фильтра на странице значения не имеет — его можно ставить и слева, и справа, и сверху.

Где именно менять расположение

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

• стандартный шаблон лежит в /bitrix/components/bitrix/catalog/templates/.default/;
• для правок его копируют в /local/templates/ВАШ_ШАБЛОН/components/bitrix/catalog/.default/;
• основной файл вёрстки — template.php, а подключение фильтра часто вынесено во bitrix:main.include или прямо в этот файл.

Именно здесь описана двухколоночная сетка. В типовых решениях (в том числе в «Аспро», «Крайт» и подобных) блок фильтра и блок товаров обёрнуты в <div> с bootstrap-классами вроде col-md-3 и col-md-9. Чтобы фильтр оказался справа, меняют порядок этих колонок в разметке.

Перенос фильтра в правую колонку

Разберём самый частый случай — двухколоночный каталог, где фильтр стоит слева. Задача: поменять колонки местами. Есть два корректных подхода.

1. Переставить блоки в HTML. В template.php найдите обёртки колонок и поменяйте их порядок так, чтобы блок catalog.smart.filter шёл после блока списка товаров, но внутри той же строки (row). Это самый надёжный вариант — он корректен и для мобильной вёрстки.
2. Оставить порядок в коде, но развернуть визуально через CSS. Например, у row задать flex-direction: row-reverse либо переопределить order у колонок. Быстро, но легко забыть про адаптив и SEO-порядок контента.

Первый способ предпочтительнее: поисковые системы и скринридеры видят DOM-порядок, а не CSS-перестановку. Если фильтр не был вынесен в отдельный файл, аккуратно перенесите весь вызов $APPLICATION->IncludeComponent("bitrix:catalog.smart.filter", ...) в правую колонку целиком, вместе с его параметрами.

Параметры вызова, которые нельзя терять

При переносе легко «уронить» связку фильтра с каталогом, если потерять переменные, которыми обменивались компоненты. Проверьте, что в вызове фильтра остались:

Значение FILTER_NAME должно совпадать с тем, что каталог передаёт в catalog.section. Если после переноса товары перестали фильтроваться — почти всегда рассинхронизировался именно этот параметр или SECTION_ID.

AJAX, «прилипание» и мобильная версия

Умный фильтр умеет работать в режиме мгновенной фильтрации: пересчитывать количество товаров и подгружать список без перезагрузки. За это отвечает шаблон фильтра и его JS (result.js, метод smartFilter). При переносе блока класс-контейнер, к которому привязан скрипт, должен сохраниться — иначе счётчики и AJAX перестанут срабатывать.

Практические нюансы правой колонки:

• Ширина. Боковой фильтр обычно уже левого центрального блока — проверьте, что подписи свойств и range-слайдеры цены не ломают вёрстку при col-md-3.
• Sticky. Длинный фильтр в боковой колонке удобно «прилеплять» через position: sticky; top: …, чтобы он оставался в поле зрения при скролле каталога.
• Мобильные. На узких экранах правая колонка падает под список товаров. Обычно фильтр прячут в кнопку «Фильтр» и открывают модальным окном или выезжающей панелью — не оставляйте его простыней над карточками.

Проверка после переноса

Пройдитесь по короткому чек-листу — он ловит 90% проблем после перемещения фильтра:

1. Фильтр отображается справа и на десктопе, и в мобильной версии (кнопкой).
2. Выбор значения реально сужает список товаров, а не просто меняет URL.
3. Счётчики количества у свойств пересчитываются (если включён AJAX).
4. ЧПУ-адрес фильтра формируется корректно: /catalog/RAZDEL/filter/.../apply/.
5. Кнопки «Показать» и «Сбросить» работают, выбранные значения сохраняются при переходе по страницам пагинации.
6. В консоли браузера нет ошибок JS, связанных с smartFilter.

Отдельно проверьте скорость: сам по себе перенос вёрстки не влияет на производительность, но если фильтр тормозит — причина в другом, в фасетном индексе, а не в расположении блока.

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

Что обычно идёт не так:

• Правка системного шаблона. Изменения делают в /bitrix/components/ и теряют их при обновлении. Всегда — только копия в /local/.
• Разные FILTER_NAME. Фильтр пишет в один массив, а каталог читает другой — фильтрация «молчит».
• Потерянный SECTION_ID. После переноса фильтр начинает показывать свойства всего инфоблока, а не текущего раздела.
• Сломанный AJAX. При копировании блока изменили класс контейнера, к которому привязан JS — счётчики застыли.
• Забытый кэш. Правки не видны, потому что отдаётся композитная копия старой страницы.

Итог

Вывод умного фильтра в правую колонку — это работа с шаблоном комплексного компонента «Каталог», а не настройка самого фильтра. Скопируйте шаблон в /local/templates/, переставьте блоки колонок в template.php, сохраните все параметры связки (IBLOCK_ID, SECTION_ID, FILTER_NAME, ЧПУ и AJAX), затем прогоните чек-лист на десктопе и мобильных. Тогда фильтр останется рабочим, а каталог — быстрым.

Если типовой шаблон сильно переопределён кастомным решением или после переноса едет вёрстка и рвётся AJAX, мы в B2Bsite приведём каталог в порядок: аккуратно переработаем шаблон, сохраним фасетный индекс и производительность и настроим адаптив под ваш дизайн.