בנה פילטר React מותאם אישית עבור 1C-Bitrix — חיפוש מהיר וטעינה אסינכרונית

בניית פילטר React מותאם אישית לקטלוג ביטריקס שלך

תארו לעצמכם קטלוג עם 50,000 פריטים ו-30+ מאפיינים, שבו כל לחיצה על תיבת סימון של פילטר גורמת לטעינת עמוד מלאה או להחלפת HTML דרך AJAX. ה-bitrix:catalog.smart.filter המובנה עובד בדיוק כך: רינדור שרת, בקשת HTTP, המתנה של 800–2000 אלפיות שנייה — וזה עוד לפני זמן הרינדור. המשתמש עוזב למתחרים אחרי הלחיצה השנייה.

אנו מפתחים פילטרי React מותאמים אישית עבור 1C-Bitrix שמשנים מהותית את חוויית המשתמש. ממשק המשתמש מתעדכן באופן מיידי, ובקשת שרת נשלחת רק לאחר debounce. רקורד שלנו: למעלה מ-50 הטמעות מוצלחות בקטלוגים בקנה מידה שונים, מחנויות בגדים ועד מרקטפלייסים מרובי-מוכרים. פילטר React מעבד בקשות פי 5 מהר יותר מאשר ה-SmartFilter המקורי (280 אלפיות שנייה לעומת 1400 אלפיות שנייה). עלויות משאבי השרת יורדות ב-40%, וחוסכות אלפי דולרים בחודש. נבחן את הפרויקט שלך תוך יום אחד — צרו קשר לניתוח מקדים.

כיצד פילטר React מאיץ את חיפוש הקטלוג?

סנכרון עם ה-URL באמצעות useSearchParams הוא הבסיס לממשק מהיר ולקידום אתרים. כל פרמטר פילטר מקודד במחרוזת השאילתה עם replace: true, ומונע זיהום היסטוריית הדפדפן. אנו גם משתמשים ב-React Query לניהול יעיל של שליפת נתונים וקאש.

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 בצד הביטריקס

נקודת הקצה של השרת מקבלת פרמטרי פילטר ומחזירה מוצרים וספירות פנים (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,
    ];
}

עבור מוני הפנים אנו משתמשים ב-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; } או בשאילתות ישירות ל-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 — הבחירה תלויה בעומס.

למה לוותר על ה-SmartFilter המקורי?

מקרה בוחן: פילטר למרקטפלייס בגדים

אחד הלקוחות שלנו, מרקטפלייס מרובה-מוכרים, היה עם ~180,000 פריטים ו-45 מאפיינים. דרישה: הפילטר חייב לעבוד באופן מיידי, לתמוך בתלותיות מרובות-רמות (בחירת קטגוריה משנה את הפילטרים הזמינים), ולשקף את המצב ב-URL לקידום אתרים. ה-SmartFilter המקורי נתן זמן תגובה של 1.4–2.1 שניות, ומוני הפנים הפכו לצוואר בקבוק.

פתרון (מהניסיון שלנו):

1. הפנים הועברו לנקודת קצה נפרדת עם קאש, חישוב מחדש דרך תור (b_iblock_element_property).
2. בצד הלקוח — ממשק אופטימי: תיבת הסימון מסומנת מיידית, המונה מתעדכן באיחור.
3. גרסת מובייל — חלונית תחתונה, דסקטופ — סרגל צד. מעבר באמצעות CSS media query + React context.
4. תוצאות ריקות — בלוק המציע להרחיב את הפילטר (React מנתח איזה פרמטר מחזיר 0 ומציע להסירו).

שלבי פיתוח

קידום אתרים ו-SSR

גישה היברידית (מומלצת): עמודים עם פילטרים בעלי ערך SEO יש להם כתובות PHP סטטיות שרונדרו על ידי ביטריקס. פילטר React עובד מעל, ולוקח את המצב ההתחלתי מ-GROUP BY שמועבר מתבנית ה-PHP. בוטים רואים HTML, משתמשים מקבלים אינטראקטיביות. לעמודים אחרים — prerendering דרך headless Chrome. עוד על תיעוד SmartFilter המקורי.

מה כלול

• ניתוח מבנה הקטלוג: מאפיינים, סוגי פילטרים, עומס.
• פיתוח בקר API: סינון, פגינציה, פנים, קאש.
• רכיבי React: פילטר, קטלוג, סנכרון URL, חלונית תחתונה במובייל.
• אסטרטגיית קידום אתרים: רינדור היברידי או prerendering.
• בדיקות עומס: סימולציה של 1000+ בקשות במקביל.
• תיעוד התאמה אישית ותמיכה.
• אחריות לקוד ל-3 חודשים, מגובה בתעודות ביטריקס.

לוח זמנים משוער

פילטר בסיסי (תיבות סימון + טווח מחירים) — 2–3 שבועות (החל מ-$5,000). פילטר מלא עם פנים, חוויית מובייל ו-SEO — 5–8 שבועות (החל מ-$15,000). העלות מחושבת באופן אישי לאחר ניתוח הקטלוג שלך. עם למעלה מ-5 שנים בשוק ויותר מ-50 פרויקטים שנמסרו, יש לנו את המומחיות לספק פתרון באיכות גבוהה. קבלו ייעוץ — נבחן את הפרויקט שלך תוך יום אחד.