Build a Custom React Filter for Your Bitrix Catalog
Imagine a catalog with 50,000 SKUs and 30+ properties, where every click on a filter checkbox triggers a full page reload or AJAX HTML replacement. The built-in bitrix:catalog.smart.filter works exactly like that: server rendering, HTTP request, 800–2000 ms wait — and that's without rendering time. The user leaves to competitors after the second click.
We develop custom React filters for 1C-Bitrix that radically change the UX. The UI updates instantly, and a server request is sent only after debounce. Our track record: over 50 successful implementations on catalogs of various scales, from clothing stores to multi-vendor marketplaces. A React filter processes requests 5 times faster than the native SmartFilter (280 ms vs 1400 ms). Server resource costs drop by 40%, saving thousands of dollars per month. We will evaluate your project in 1 day — contact us for a preliminary analysis.
How a React Filter Speeds Up Catalog Search?
Synchronization with the URL via useSearchParams is the foundation for fast UI and SEO. Each filter parameter is encoded in the query string with replace: true, avoiding browser history pollution. We also use React Query for efficient data fetching and caching.
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 on Bitrix Side
The server endpoint accepts filter parameters and returns products plus facet counts.
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, ]; } For facet counters we use \Bitrix\Iblock\Component\Tools or direct queries to b_iblock_element_property with GROUP BY — the choice depends on load.
Why Ditch the Native SmartFilter?
| Feature | SmartFilter | React Filter |
|---|---|---|
| Response time on checkbox | 1400–2100 ms | 0 ms (UI), 280–400 ms (data) |
| Counter updates | On every request | From cache, background update |
| Link sharing depth | Partial | Full (all params in URL) |
| Mobile UX | Separate page | Bottom sheet without navigation |
Case Study: Filter for a Clothing Marketplace
One of our clients, a multi-vendor marketplace, had ~180,000 SKUs and 45 properties. Requirement: the filter must work instantly, support multi-level dependencies (selecting a category changes available filters), and reflect state in the URL for SEO. The native SmartFilter gave a response time of 1.4–2.1 seconds, and facet counters became a bottleneck.
Solution (from our practice):
- Facets moved to a separate cached endpoint, recalculation via queue (
\Bitrix\Main\Application::getInstance()->addBackgroundJob()). - On the frontend — optimistic UI: the checkbox is checked instantly, the counter updates with a delay.
- Mobile version — bottom sheet, desktop — sidebar. Switching via CSS media query + React context.
- Empty results — a block suggesting to widen the filter (React analyzes which parameter yields 0 and offers to remove it).
Development Stages
| Stage | Duration | Result |
|---|---|---|
| Catalog structure analysis | 1–2 days | Specification of properties, filter types, load |
| API controller development | 3–5 days | Endpoint for filtering, pagination, facets, caching |
| React components | 5–10 days | Filter, catalog, URL sync, mobile bottom sheet |
| SEO strategy | 2–3 days | Hybrid rendering or prerendering |
| Load testing | 1–2 days | Simulation of 1000+ concurrent requests |
| Documentation | 1–2 days | Customization and support instructions |
Checklist of Common Mistakes in React Filter Development
- Not syncing filter state with URL — losing sharing and indexing capabilities. - Making one request per checkbox — kills the server. Debounce and aggregation are needed. - Ignoring list virtualization when >50 product cards — browser will hang. - Forgetting about edge cases: empty result, network error, slow connection.SEO and SSR
Hybrid approach (recommended): pages with SEO-valuable filters have static PHP URLs rendered by Bitrix. The React filter works on top, taking initial state from window.__INITIAL_STATE__ passed from the PHP template. Bots see HTML, users get interactivity. For other pages — prerendering via headless Chrome. More about native SmartFilter documentation.
What's Included
- Catalog structure analysis: properties, filter types, load.
- API controller development: filtering, pagination, facets, caching.
- React components: filter, catalog, URL sync, mobile bottom sheet.
- SEO strategy: hybrid rendering or prerendering.
- Load testing: simulation of 1000+ concurrent requests.
- Customization and support documentation.
- 3-month code warranty, backed by Bitrix certificates.
Estimated Timeline
Basic filter (checkboxes + price range) — 2–3 weeks (from $5,000). Full-featured with facets, mobile UX, and SEO — 5–8 weeks (from $15,000). Cost is calculated individually after analyzing your catalog. Over 5 years on the market and more than 50 delivered projects, we have the expertise to deliver a high-quality solution. Get a consultation — we will evaluate your project in 1 day.