Ми часто стикаємося з ситуацією, коли штатний пошук Бітрікс перестає справлятися з навантаженням інтернет-магазину. Стандартний модуль search з морфологічним індексом у таблицях b_search_content і b_search_stem дає 800–1200 мс відповіді та не підтримує instant search. Це критично для каталогів з 50 000+ SKU: покупці йдуть, не дочекавшись результату. Ми розробляємо кастомний пошук на React під каталоги від 10 000 до 500 000 SKU. Наш досвід — понад 10 років у Бітрікс-розробці, десятки впроваджень, включаючи інтеграцію з 1С через CommerceML та торгові каталоги будь-якої складності. Для каталогів з 10 000 SKU витрати на інфраструктуру мінімальні, а приріст конверсії від швидкого пошуку сягає 15–20%.
Вибір пошукового двигуна
Elasticsearch / OpenSearch — виправдані при об'ємі >100 000 документів, необхідності full-text search з морфологією, буст-ранжуванні, синонімах. Вимагають окремого сервера. Typesense — більш проста альтернатива з хорошою продуктивністю, простіше в адмініструванні. Підходить для середнього каталогу. Meilisearch — швидкий старт, fuzzy search з коробки, хороша документація. Для каталогів до 500 000 товарів. Кастомний SQL (Бітрікс) — FULLTEXT INDEX в MySQL або tsvector в PostgreSQL. Працює без додаткової інфраструктури, достатньо для каталогів до 50 000 SKU.
Порівняння двигунів:
| Двигун | Об'єм | Продуктивність | Складність інфраструктури |
|---|---|---|---|
| Elasticsearch | >100 000 | Висока | Висока |
| Meilisearch | до 500 000 | Висока | Середня |
| Typesense | до 300 000 | Висока | Низька |
| SQL (MySQL/PostgreSQL) | до 50 000 | Середня | Нульова |
Meilisearch обробляє запити в 10 разів швидше штатного пошуку Бітрікс — це підтверджено нашими тестами для каталогів до 500 000 товарів.
Як вибрати двигун під свій каталог?
Для більшості середніх інтернет-магазинів (до 100 000 SKU) рекомендую Meilisearch або кастомний PostgreSQL full-text. Elasticsearch — тільки якщо вже є інфраструктура або потрібна складна аналітика пошуку.
Індексація товарів Бітрікс
Незалежно від обраного двигуна, потрібна синхронізація даних між Бітрікс і пошуковим індексом. Використовуємо подію OnProductUpdate (подія зміни товару в 1С-Бітрікс) для постановки задачі у фонову чергу.
Приклад коду індексатора
// Обробник події зміни товару \Bitrix\Main\EventManager::getInstance()->addEventHandler( 'catalog', 'OnProductUpdate', function(\Bitrix\Main\Event $event) { $productId = $event->getParameter('id'); \Local\Search\IndexQueue::add($productId, 'update'); } ); // Індексатор (виконується через cron) class ProductIndexer { public function indexProduct(int $productId): void { $product = \CIBlockElement::GetById($productId)->GetNext(); $prices = \CCatalogProduct::GetOptimalPrice($productId, 1, [], 'N', [], SITE_ID); $props = $this->getProductProperties($productId); $document = [ 'id' => $productId, 'name' => $product['NAME'], 'description' => strip_tags($product['DETAIL_TEXT']), 'brand' => $props['BRAND']['VALUE'], 'price' => $prices['RESULT_PRICE']['DISCOUNT_PRICE'], 'in_stock' => $props['QUANTITY']['VALUE'] > 0, 'category' => $this->getCategoryPath($product['IBLOCK_SECTION_ID']), ]; $this->searchEngine->upsertDocument($document); } } Синхронізація через чергу (\Bitrix\Main\Application::getInstance()->addBackgroundJob()) — зміни обробляються асинхронно, не сповільнюючи основний потік.
React-компонент пошуку
Instant search з debounce — основа UX. Мінімальний час затримки для відчуття живого відгуку: 200–300 мс.
function SearchBox() { const [query, setQuery] = useState(''); const debouncedQuery = useDebounce(query, 250); const { data, isLoading } = useQuery({ queryKey: ['search', debouncedQuery], queryFn: () => searchProducts(debouncedQuery), enabled: debouncedQuery.length >= 2, staleTime: 10_000, }); return ( <div className="search-wrapper"> <input value={query} onChange={e => setQuery(e.target.value)} placeholder="Пошук товарів..." /> {debouncedQuery.length >= 2 && ( <SearchDropdown results={data} isLoading={isLoading} /> )} </div> ); } Дропдаун пошуку розбивається за категоріями: «Товари», «Категорії», «Бренди», «Статті». Категоризація робиться на сервері або на фронті з єдиної відповіді.
Чому варто впроваджувати аналітику пошуку?
Пошукова аналітика — недооцінений інструмент. Запити з нульовими результатами прямо вказують на товари, яких немає, але які шукають. Запити з низьким CTR — на невідповідність очікуванням. Ми налаштовуємо click tracking в GA4 та власну таблицю local_search_analytics, що дозволяє точково правити ранжування.
Кейс з нашої практики: будівельний гіпермаркет
Магазин будматеріалів, 85 000 SKU, 12 000 унікальних пошукових запитів на добу. Проблема: штатний пошук Бітрікс не знаходив товари при помилках («шпатлёфка» замість «шпатлівка»), не підтримував пошук за артикулом, час відповіді — 800–1200 мс.
Вибрали Meilisearch (один сервер, синхронізація через чергу Бітрікс).
Реалізація: Індекс включає: назву, опис, бренд, артикул, синоніми (окрема таблиця в Бітрікс з парами «запит → правильний термін»). Fuzzy search з typoTolerance — Meilisearch автоматично обробляє помилки. В React-дропдауні — 4 секції: топ-4 товари, категорії (якщо запит збігається з назвою категорії), бренди, «Дивитися всі результати». Висота дропдауну фіксована (max 480px), всередині список з прокруткою.
| Метрика | До | Після |
|---|---|---|
| Час відповіді пошуку | 800–1200 мс | 35–80 мс |
| Zero-results rate | 18% | 4% |
| CTR з пошуку | 34% | 61% |
| Знаходження за артикулом | Ні | Так |
Повна сторінка результатів
Для повної сторінки результатів (/search/?q=шпатлівка) — React-застосунок з боковим фільтром (ті ж компоненти, що й у каталозі), сортуванням, пагінацією. URL синхронізується з усіма параметрами. Highlighting — підсвічування збігів у результатах пошуку. Meilisearch повертає поле _formatted з тегами <em>, які стилізуються в React.
Як проходить розробка пошуку на React?
- Аналіз каталогу: об'єм, структура інфоблоків, типові запити.
- Вибір двигуна та налаштування індексу з синонімами та стоп-словами.
- Синхронізація: написання індексатора, налаштування черг.
- Розробка React-компонентів: instant search, дропдаун, сторінка результатів.
- Інтеграція аналітики: click tracking, моніторинг zero-results.
- Тестування та оптимізація: A/B тести швидкості, коригування ранжування.
Що входить в роботу
- Вибір пошукового двигуна під об'єм і бюджет
- Налаштування індексу, синхронізація з каталогом Бітрікс
- Розробка React: instant search, дропдаун, повна сторінка результатів
- Налаштування синонімів, стоп-слів, boost-ранжування
- Аналітика: click tracking, zero-results моніторинг
- Документація, передача доступів, навчання команди
- Постпроектна підтримка: гарантія 3 місяці
Терміни та вартість
Вартість розраховується індивідуально після аудиту каталогу. Instant search з дропдауном — від 2 тижнів. Повна сторінка результатів + аналітика — ще від 2 тижнів. Пишіть — оцінимо ваш проект безкоштовно.
Гарантуємо: 10+ років досвіду з Бітрікс, сертифіковані спеціалісти, 15+ успішних впроваджень кастомного пошуку. Отримайте консультацію — напишіть нам.