React-фильтр для 1С-Битрикс: быстрый поиск и асинхронная подгрузка

Кастомный 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?

Кейс: фильтр для маркетплейса одежды

Мультивендорный каталог, ~180 000 SKU, 45 характеристик. Задача: фильтр должен работать мгновенно, поддерживать многоуровневые зависимости (выбор категории меняет доступные фильтры) и отражать состояние в URL для SEO. Штатный SmartFilter давал время ответа 1.4–2.1 сек, фасетные счётчики становились узким местом.

Решение:

1. Фасеты вынесены в отдельный кэшируемый endpoint, пересчёт через очередь (\Bitrix\Main\Application::getInstance()->addBackgroundJob()).
2. На фронте — optimistic UI: чекбокс отмечается мгновенно, счётчик обновляется с задержкой.
3. Мобильная версия — bottom sheet, десктоп — сайдбар. Переключение через CSS media query + React context.
4. Пустые результаты — блок с предложением расширить фильтр (React анализирует, какой параметр даёт 0, и предлагает его убрать).

Этапы разработки

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 день.