Кастомный React-фильтр для каталога Битрикс
Представьте каталог из 50 000 SKU с 30+ характеристиками, где каждый клик на чекбокс фильтра вызывает полную перезагрузку страницы или AJAX-подмену HTML. Штатный bitrix:catalog.smart.filter именно так и работает: серверный рендеринг, HTTP-запрос, 800–2000 мс ожидания — и это без учёта времени рендеринга. Пользователь уже на втором клике уходит к конкурентам.
Мы разрабатываем кастомные React-фильтры для 1С-Битрикс, которые кардинально меняют UX. UI обновляется мгновенно, запрос к серверу отправляется только по debounce. Наш опыт — более 50 успешных внедрений на каталогах разного масштаба, от интернет-магазинов одежды до мультивендорных маркетплейсов. React-фильтр обрабатывает запрос в 5 раз быстрее штатного SmartFilter (280 мс против 1400 мс). При этом затраты на серверные ресурсы снижаются на 40%, а стоимость одного запроса — с $1–1. до $1–1. Оценим ваш проект за 1 день — свяжитесь с нами для предварительного анализа.
Как React-фильтр ускоряет поиск в каталоге?
Синхронизация с URL через useSearchParams — основа быстрого UI и SEO. Каждый параметр фильтра кодируется в query-строку с replace: true, не засоряя историю браузера.
function useFilterState(initialFilters: FilterState) { const [searchParams, setSearchParams] = useSearchParams(); const filters = useMemo(() => { return parseFiltersFromParams(searchParams, initialFilters); }, [searchParams]); const setFilters = useCallback((newFilters: Partial<FilterState>) => { const params = buildParamsFromFilters({ ...filters, ...newFilters }); setSearchParams(params, { replace: true }); }, [filters, setSearchParams]); return [filters, setFilters] as const; } API на стороне Битрикс
Серверный endpoint принимает параметры фильтра и возвращает товары + фасетные счётчики.
public function getProductsAction(array $filter = [], int $page = 1): array { $bxFilter = $this->buildBitrixFilter($filter); $result = \CIBlockElement::GetList( ['SORT' => 'ASC'], $bxFilter, false, ['nPageSize' => 24, 'iNumPage' => $page], ['ID', 'NAME', 'PREVIEW_PICTURE', 'DETAIL_PAGE_URL', 'CATALOG_PRICE_1', 'PROPERTY_BRAND', 'PROPERTY_COLOR'] ); $products = []; while ($product = $result->GetNextElement()) { $fields = $product->GetFields(); $props = $product->GetProperties(); $products[] = $this->formatProduct($fields, $props); } $facets = $this->getFacets($bxFilter, $filter); return [ 'products' => $products, 'total' => $result->SelectedRowsCount(), 'facets' => $facets, ]; } Для фасетных счётчиков используем \Bitrix\Iblock\Component\Tools или прямые запросы к таблицам b_iblock_element_property с GROUP BY — выбор зависит от нагрузки.
Почему стоит отказаться от штатного SmartFilter?
| Характеристика | SmartFilter | React-фильтр |
|---|---|---|
| Время отклика на чекбокс | 1400–2100 мс | 0 мс (UI), 280–400 мс (данные) |
| Обновление счётчиков | При каждом запросе | Из кеша, обновление фоном |
| Глубина линк-шаринга | Частичная | Полная (все параметры в URL) |
| Мобильный UX | Отдельная страница | Bottom sheet без перехода |
Кейс: фильтр для маркетплейса одежды
Мультивендорный каталог, ~180 000 SKU, 45 характеристик. Задача: фильтр должен работать мгновенно, поддерживать многоуровневые зависимости (выбор категории меняет доступные фильтры) и отражать состояние в URL для SEO. Штатный SmartFilter давал время ответа 1.4–2.1 сек, фасетные счётчики становились узким местом.
Решение:
- Фасеты вынесены в отдельный кэшируемый endpoint, пересчёт через очередь (
\Bitrix\Main\Application::getInstance()->addBackgroundJob()). - На фронте — optimistic UI: чекбокс отмечается мгновенно, счётчик обновляется с задержкой.
- Мобильная версия — bottom sheet, десктоп — сайдбар. Переключение через CSS media query + React context.
- Пустые результаты — блок с предложением расширить фильтр (React анализирует, какой параметр даёт 0, и предлагает его убрать).
Этапы разработки
| Этап | Длительность | Результат |
|---|---|---|
| Анализ структуры каталога | 1–2 дня | Спецификация характеристик, типов фильтров, нагрузки |
| Разработка API-контроллера | 3–5 дней | Endpoint фильтрации, пагинации, фасетов, кэширования |
| React-компоненты | 5–10 дней | Фильтр, каталог, синхронизация с URL, мобильный bottom sheet |
| SEO-стратегия | 2–3 дня | Гибридный рендеринг или prerendering |
| Нагрузочное тестирование | 1–2 дня | Симуляция 1000+ параллельных запросов |
| Документация | 1–2 дня | Инструкции по кастомизации и поддержке |
Чек-лист типичных ошибок при разработке React-фильтра
- Не синхронизировать состояние фильтра с URL — теряется возможность шаринга и индексации. - Использовать один запрос на каждый чекбокс — убивает сервер. Нужен debounce и агрегация. - Игнорировать виртуализацию списка товаров при >50 карточек — браузер зависнет. - Забывать про пограничные состояния: пустой результат, ошибка сети, медленное соединение.SEO и SSR
Гибридный подход (рекомендуемый): страницы с SEO-ценными фильтрами имеют статические PHP-URL, которые рендерит Битрикс. React-фильтр работает поверх, начальное состояние берёт из window.__INITIAL_STATE__, переданного из PHP-шаблона. Боты видят HTML, пользователи — интерактив. Для остальных страниц — prerendering через headless Chrome. Подробнее о штатном SmartFilter.
Что входит в работу
- Анализ структуры каталога: характеристики, типы фильтров, нагрузка.
- Разработка API-контроллера: фильтрация, пагинация, фасеты, кэширование.
- React-компоненты: фильтр, каталог, синхронизация с URL, мобильный bottom sheet.
- SEO-стратегия: гибридный рендеринг или prerendering.
- Нагрузочное тестирование: симуляция 1000+ параллельных запросов.
- Документация по кастомизации и поддержке.
- Гарантия 3 месяца на код, подтверждённая сертификатами Битрикс.
Ориентировочные сроки
Базовый фильтр (чекбоксы + диапазон цены) — 2–3 недели. Полнофункциональный с фасетами, мобильным UX и SEO — 5–8 недель. Стоимость рассчитывается индивидуально после анализа вашего каталога. Получите консультацию — мы оценим проект за 1 день.