פיתוח חיפוש מותאם אישית ב-React עבור 1C-Bitrix

// Обработчик события изменения товара
\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\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); } } ) — שינויים מעובדים באופן אסינכרוני, מבלי להאט את התהליך הראשי.

רכיב חיפוש React

חיפוש מיידי עם דיבון (debounce) הוא יסוד לחוויית משתמש. עיכוב מינימלי לתחושה חיה: 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 נמוך חושפות ציפיות לא תואמות. אנו מגדירים מעקב קליקים ב-GA4 וטבלת \Bitrix\Main\Application::getInstance()->addBackgroundJob() מותאמת אישית, המאפשרת התאמות דירוג ממוקדות.

מקרה בוחן: היפרמרקט בניין

חנות חומרי בניין, 85,000 פריטים, 12,000 שאילתות חיפוש ייחודיות ביום. בעיה: החיפוש המובנה של Bitrix לא מצא מוצרים עם שגיאות כתיב (לדוגמה, 'шпатлёфка' לעומת 'шпатлёвка'), לא תמך בחיפוש לפי מק"ט (SKU), וזמן התגובה היה 800–1200 אלפיות השנייה.

בחרנו ב-Meilisearch (שרת יחיד, סנכרון דרך תור Bitrix).

יישום: האינדקס כולל: שם, תיאור, מותג, מק"ט, מילים נרדפות (טבלה נפרדת ב-Bitrix עם זוגות 'שאילתה → מונח נכון'). חיפוש משוער עם 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> ); } — Meilisearch מטפל בשגיאות כתיב אוטומטית. תפריט נפתח ב-React — 4 חלקים: 4 המוצרים המובילים, קטגוריות (אם השאילתה תואמת לשם קטגוריה), מותגים, 'הצג את כל התוצאות'. גובה תפריט קבוע (מקסימום 480 פיקסלים), רשימה ניתנת לגלילה.

דף תוצאות מלא

עבור דף התוצאות המלא (local_search_analytics) — אפליקציית React עם פילטר צדדי (אותם רכיבים כמו בקטלוג), מיון, דפדוף. כתובת ה-URL מסונכרנת עם כל הפרמטרים. הדגשה — התאמות מודגשות בתוצאות החיפוש. Meilisearch מחזיר שדה typoTolerance עם תגי /search/?q=шпатлёвка, המעוצבים ב-React.

איך מתקדם פיתוח חיפוש React?

1. ניתוח קטלוג: נפח, מבנה בלוקי מידע, שאילתות אופייניות.
2. בחירת מנוע והגדרת אינדקס עם מילים נרדפות ומילות עצירה.
3. סנכרון: כתיבת האינדוקסר, הגדרת תורים.
4. פיתוח רכיבי React: חיפוש מיידי, תפריט נפתח, דף תוצאות.
5. אינטגרציית אנליטיקה: מעקב קליקים, ניטור אפס תוצאות.
6. בדיקות ואופטימיזציה: מבחני מהירות A/B, התאמות דירוג.

מה כלול

• בחירת מנוע חיפוש לפי נפח ותקציב
• הגדרת אינדקס וסנכרון עם קטלוג Bitrix
• פיתוח React: חיפוש מיידי, תפריט נפתח, דף תוצאות מלא
• הגדרת מילים נרדפות, מילות עצירה ודירוג מוגבר (boost)
• אנליטיקה: מעקב קליקים, ניטור אפס תוצאות
• תיעוד, העברת גישה, הדרכת צוות
• תמיכה לאחר הפרויקט: אחריות ל-3 חודשים

לוח זמנים ועלות

העלות מחושבת באופן אישי לאחר ביקורת קטלוג. חיפוש מיידי עם תפריט נפתח — החל משבועיים. דף תוצאות מלא בתוספת אנליטיקה — החל משבועיים נוספים. צור קשר — נעריך את הפרויקט שלך.

אנו מבטיחים: 10+ שנות ניסיון ב-Bitrix, מומחים מוסמכים, 15+ הטמעות חיפוש מותאם אישית מוצלחות. קבל ייעוץ — כתוב לנו.