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

Каталог — самая нагруженная часть интернет-магазина: фильтрация, сортировка, пагинация, быстрый просмотр, добавление в корзину. Стандартный компонент bitrix:catalog при каждом изменении фильтра делает полный перезапрос страницы с серверным рендерингом, что занимает 1.5–3 секунды. Представьте каталог с 50 000 товаров — каждый клик фильтра означает потерю времени и нервов покупателя. Мы разрабатываем React-каталог, который даёт мгновенную реакцию на действия пользователя: страница загружается за 200–400 мс, смена фильтра занимает до 300 мс. Разница в UX ощутима сразу: конверсия в корзину растёт на 15–30%. Наш опыт — более 5 лет и 50+ проектов на стыке Битрикса и React.

Почему React вместо стандартного каталога?

Браузерный рендеринг избавляет от полных перезапросов. Каждое изменение фильтра — это асинхронный запрос к REST API, а не перезагрузка страницы. Бэкенд использует тегированное кэширование: при изменении товара сбрасывается только кэш, связанный с этим товаром, а не весь каталог. Результат: плавные анимации, сохранение состояния фильтров в URL, возможность поделиться ссылкой на конкретную выдачу. Пользователи проводят больше времени в каталоге, конверсия увеличивается.

Как работает API для каталога?

Бэкенд на PHP отдаёт данные каталога в JSON. Базовый контроллер обрабатывает запросы с фильтрами, сортировкой и пагинацией:

// /local/ajax/api.php — обработчик catalog.list case 'catalog.list': CModule::IncludeModule('iblock'); CModule::IncludeModule('catalog'); $filter = [ 'IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y', 'SECTION_ID'=> (int)$_GET['section_id'], ]; // Ценовые фильтры if (!empty($_GET['price_from'])) { $filter['>=CATALOG_PRICE_1'] = (float)$_GET['price_from']; } if (!empty($_GET['price_to'])) { $filter['<=CATALOG_PRICE_1'] = (float)$_GET['price_to']; } // Фильтр по свойствам if (!empty($_GET['props'])) { $props = json_decode($_GET['props'], true); foreach ($props as $propCode => $values) { $filter['PROPERTY_' . $propCode] = $values; } } $sort = match($_GET['sort'] ?? 'default') { 'price_asc' => ['CATALOG_PRICE_1' => 'ASC'], 'price_desc' => ['CATALOG_PRICE_1' => 'DESC'], 'new' => ['DATE_CREATE' => 'DESC'], default => ['SORT' => 'ASC'], }; $page = max(1, (int)($_GET['page'] ?? 1)); $limit = 24; $res = CIBlockElement::GetList( $sort, $filter, false, ['iNumPage' => $page, 'nPageSize' => $limit], ['ID', 'NAME', 'PREVIEW_PICTURE', 'DETAIL_PAGE_URL', 'PROPERTY_ARTICLE', 'CATALOG_PRICE_1'] ); $items = []; while ($el = $res->GetNext()) { $items[] = [ 'id' => $el['ID'], 'name' => $el['NAME'], 'slug' => $el['CODE'], 'price' => (float)$el['CATALOG_PRICE_1'], 'image' => CFile::GetPath($el['PREVIEW_PICTURE']), 'url' => $el['DETAIL_PAGE_URL'], ]; } echo json_encode([ 'result' => $items, 'total' => $res->SelectedRowsCount(), 'pages' => ceil($res->SelectedRowsCount() / $limit), ]); break; 

React-компонент каталога с фильтрами

На фронтенде используем хук useSearchParams для синхронизации фильтров с URL. Каждый фильтр — это параметр строки запроса, поэтому ссылку на конкретную выдачу можно скопировать и отправить коллеге.

// CatalogPage.tsx import { useState, useCallback } from 'react'; import { useQuery } from '@tanstack/react-query'; import { useSearchParams } from 'react-router-dom'; interface CatalogFilters { priceFrom?: number; priceTo?: number; props: Record<string, string[]>; sort: string; page: number; } export function CatalogPage({ sectionId }: { sectionId: number }) { const [searchParams, setSearchParams] = useSearchParams(); const filters: CatalogFilters = { priceFrom: searchParams.get('price_from') ? Number(searchParams.get('price_from')) : undefined, priceTo: searchParams.get('price_to') ? Number(searchParams.get('price_to')) : undefined, props: JSON.parse(searchParams.get('props') || '{}'), sort: searchParams.get('sort') || 'default', page: Number(searchParams.get('page') || 1), }; const { data, isLoading } = useQuery({ queryKey: ['catalog', sectionId, filters], queryFn: () => fetchCatalog(sectionId, filters), keepPreviousData: true, }); const updateFilter = useCallback((key: string, value: string | null) => { setSearchParams(prev => { if (value) prev.set(key, value); else prev.delete(key); prev.delete('page'); return prev; }); }, [setSearchParams]); return ( <div className="catalog-layout"> <CatalogFilters filters={filters} onFilterChange={updateFilter} /> <div className="catalog-main"> <CatalogToolbar total={data?.total} sort={filters.sort} onSortChange={v => updateFilter('sort', v)} /> {isLoading ? ( <ProductGrid items={Array(24).fill(null)} skeleton /> ) : ( <ProductGrid items={data?.items || []} /> )} <Pagination current={filters.page} total={data?.pages || 1} onChange={p => updateFilter('page', String(p))} /> </div> </div> ); } 

Фильтры синхронизируются с URL через useSearchParams — это позволяет поделиться ссылкой на конкретную фильтрацию и корректно работать с кнопкой «назад» в браузере.

Что даёт умный фильтр?

Стандартный компонент bitrix:catalog.smart.filter генерирует HTML, непригодный для React. Для кастомного фильтра нужен API умного фильтра:

// catalog.filter.get — доступные значения фильтров для текущего раздела case 'catalog.filter.get': // Получаем доступные свойства и их значения // с учётом текущих выбранных фильтров (для зависимых фильтров) $availableProps = getSmartFilterProps( CATALOG_IBLOCK_ID, (int)$_GET['section_id'], json_decode($_GET['selected'] ?? '{}', true) ); echo json_encode(['result' => $availableProps]); break; 

Зависимые фильтры (когда выбор одного значения сужает доступные значения другого) — сложная задача. Реализуется через повторный запрос к API при изменении любого фильтра с передачей текущего выбора. Такой подход обеспечивает поведение, аналогичное стандартному умному фильтру, но в SPA-стиле. Дополнительно мы используем HL-блоки для хранения пользовательских предпочтений, что ускоряет повторные визиты.

Когда стоит переходить на React-каталог?

Если ваш каталог содержит более 10 000 товаров, имеет сложные фильтры с зависимостями или вы замечаете падение конверсии на мобильных устройствах — React-каталог решит эти проблемы. Скорость работы напрямую влияет на выручку: каждая секунда задержки снижает конверсию на 7%. Full-stack подход (PHP + React) даёт гибкость при интеграции с 1С через CommerceML.

Оптимизация производительности

Виртуализация списка. При показе 100+ товаров используйте @tanstack/react-virtual — рендерится только видимая область. Это снижает потребление памяти и ускоряет скролл.

import { useVirtual } from '@tanstack/react-virtual'; const rowVirtualizer = useVirtual({ count: items.length, parentRef: containerRef, estimateSize: () => 350, }); 

Prefetch следующей страницы. При скролле к последней видимой строке предзагружайте следующую страницу:

useEffect(() => { if (isNearEnd && data?.pages > filters.page) { queryClient.prefetchQuery( ['catalog', sectionId, { ...filters, page: filters.page + 1 }], () => fetchCatalog(sectionId, { ...filters, page: filters.page + 1 }) ); } }, [isNearEnd]); 

Изображения. Lazy loading через loading="lazy" + современные форматы (WebP через Битрикс \Bitrix\Main\Web\Uri + конвертер или внешний CDN). Для skeleton-заглушек при загрузке используйте CSS-анимацию — дешевле, чем JavaScript-анимации.

Этапы разработки React-каталога

Чек-лист внедрения:

• Анализ инфоблоков и свойств, проектирование API.
• Разработка API-контроллеров (список, фильтры, пагинация).
• Создание React-компонентов (фильтр, сетка, пагинация, скелетоны).
• Интеграция с торговым каталогом и обменом с 1С через CommerceML.
• Настройка тегированного кэширования и HTTP-кэша.
• Тестирование на реальных данных, замеры производительности.
• Подготовка документации и обучение команды заказчика.

Процесс включает аналитику, проектирование API, разработку фронтенда и бэкенда, интеграцию с 1С и тестирование. Каждый этап завершается демонстрацией заказчику.

Что входит в работу

• API-контроллеры для списка товаров, фильтров, пагинации.
• React-компоненты: фильтр, сетка товаров, пагинация, скелетоны.
• Интеграция с существующими инфоблоками, торговым каталогом, 1С.
• Настройка кэширования (тегированное кэширование, HTTP-кэш).
• Документация по API и архитектуре.
• Обучение ваших разработчиков (до 2 часов).

Получите бесплатную консультацию по вашему проекту — мы оценим объём работ и предложим оптимальное решение. Закажите разработку React-каталога и повысьте конверсию вашего магазина.