Кастомний 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%. Зв'яжіться з нами для попереднього аналізу.
Як 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 тижнів. Вартість розраховується індивідуально після аналізу вашого каталогу. Отримайте консультацію — ми розглянемо ваш проект індивідуально.