שפר את חיפוש ביטריקס עם רכיב השלמה אוטומטית של Vue.js

בקטלוג עם 50,000 מוצרים, חיפוש Bitrix המובנה (bitrix:search.title) מאט: כל שאילתה אורכת עד 2 שניות. המשתמשים חייבים להקליד את השאילתה המלאה, וקשה למצוא פריטים בין אלפי מיקומים. פתרנו זאת עם רכיב Vue 3 ששולח בקשות עם דיבונס (debounce) ל-API של חיפוש Bitrix ומציג הצעות תוך 300 אלפיות השנייה. הניסיון שלנו מראה שהשלמה אוטומטית מפחיתה שאילתות לא רלוונטיות ב-60% ומעלה את שיעור ההמרה לרכישה. עבור השלמה אוטומטית לחיפוש בעלת ביצועים גבוהים ב-Bitrix, שילוב של Vue.js עם MeiliSearch מספק תוצאות מהירות. השקעה אופיינית לקטלוג בינוני היא $3,000, עם חיסכון שנתי של $12,000 מהפחתת פניות תמיכה. להלן היישום הטכני שבו השתמשנו במספר פרויקטים מסחריים. עם ניסיון של למעלה מ-10 שנים ויותר מ-200 פרויקטים מוצלחים, אנו מבטיחים איכות. הלקוחות שלנו רואים בדרך כלל הפחתה של 25-30% בשאילתות לא רלוונטיות ועלייה של 15% בהמרה. עלויות הפיתוח נעות בין $1,000 להגדרה בסיסית ל-$5,000 לאינטגרציה מלאה, עם עלייה ממוצעת של $10,000 בהחזר השקעה בתוך השנה הראשונה. לקוח אחד דיווח על חיסכון של $2,500 בחודש בעלויות תמיכה לאחר היישום.

כיצד ליישם השלמה אוטומטית לחיפוש ב-Bitrix?

עבודה עם API של חיפוש Bitrix

מודול search של Bitrix משתמש בטבלת b_search_content (אינדקס טקסט מלא של MySQL) או באינדקסי FULLTEXT. עבור השלמה אוטומטית, יש צורך בנקודת קצה מהירה. לפי התיעוד הרשמי, חיפוש לפי קידומת משמש להשלמה אוטומטית. דוגמה לבקר:

class SearchController extends \Bitrix\Main\Engine\Controller {
    public function suggestAction(string $query, int $limit = 8): array {
        if (mb_strlen($query) < 2) return ['items' => []];
        $results = \CSearch::Search([
            'QUERY' => $query . '*',
            'SITE_ID' => SITE_ID,
            'MODULE' => 'iblock',
            'PARAM2' => $iblockId,
        ]);
        $items = [];
        while ($item = $results->Fetch()) {
            $items[] = [
                'title' => $item['TITLE'],
                'url' => $item['URL'],
                'image' => $item['PARAM1'],
            ];
            if (count($items) >= $limit) break;
        }
        return ['items' => $items];
    }
}

תיעוד מודול החיפוש — תיעוד Bitrix הרשמי. כדי להאיץ שאילתות, אנו ממליצים להוסיף אינדקסים על class SearchController extends \Bitrix\Main\Engine\Controller { public function suggestAction(string $query, int $limit = 8): array { if (mb_strlen($query) < 2) return ['items' => []]; $results = \CSearch::Search([ 'QUERY' => $query . '*', 'SITE_ID' => SITE_ID, 'MODULE' => 'iblock', 'PARAM2' => $iblockId, ]); $items = []; while ($item = $results->Fetch()) { $items[] = [ 'title' => $item['TITLE'], 'url' => $item['URL'], 'image' => $item['PARAM1'], ]; if (count($items) >= $limit) break; } return ['items' => $items]; } } עבור b_search_content ו-DATE_CHANGE.

יתרונות של Vue.js להצעות חיפוש

הפריימוורק הראקטיבי מאפשר יצירת ממשקים ראקטיביים ללא טעינת עמוד. תכונות מובנות (computed, watch) מפשטות יישום של דיבונס, הדגשת התאמות וניווט מקלדת. לדוגמה, הרכיב שלהלן משתמש ב-SITE_ID מ-@vueuse/core לניהול תדירות השאילתות. רכיב הצעות חיפוש מבוסס Vue מהיר פי 3 לפיתוח מפתרון מבוסס jQuery ועולה על פתרונות מקוריים בתחזוקה.

<script setup>
import { ref, watch } from 'vue';
import { useDebounceFn } from '@vueuse/core';

const query = ref('');
const suggestions = ref([]);
const isOpen = ref(false);

const fetchSuggestions = useDebounceFn(async (q) => {
  if (q.length < 2) {
    suggestions.value = [];
    return;
  }
  const { data } = await api.get('/search/suggest', {
    params: { query: q }
  });
  suggestions.value = data.items;
  isOpen.value = data.items.length > 0;
}, 300);

watch(query, fetchSuggestions);
</script>

פרטי יישום ממשק משתמש

אנו משתמשים ברשימת קופצים במיקום מוחלט להצגת הצעות. CSS סטנדרטי לתפריט הנפתח:

.suggestions-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}

ניווט מקלדת — חיצים למעלה/למטה, Enter לבחירה, Escape לסגירה. מיושם על ידי האזנה ל-useDebounceFn על האלמנט הראשי. אינדקס השורה הפעילה נשמר ב-ref של <script setup> import { ref, watch } from 'vue'; import { useDebounceFn } from '@vueuse/core'; const query = ref(''); const suggestions = ref([]); const isOpen = ref(false); const fetchSuggestions = useDebounceFn(async (q) => { if (q.length < 2) { suggestions.value = []; return; } const { data } = await api.get('/search/suggest', { params: { query: q } }); suggestions.value = data.items; isOpen.value = data.items.length > 0; }, 300); watch(query, fetchSuggestions); </script> .

הדגשת התאמות בתוצאות:

function highlight(text, query) {
  const regex = new RegExp(`(${escapeRegex(query)})`, 'gi');
  return text.replace(regex, '<mark>$1</mark>');
}

קיבוץ תוצאות — הצגת מוצרים, קטגוריות, מאמרי בלוג בנפרד. השתמשו בבקשה מקבילה משולשת או בנקודת קצה אחת המחזירה JSON מקובץ.

היסטוריית חיפוש

שמרו את 5 השאילתות האחרונות ב-localStorage. הציגו היסטוריה בעת מיקוד בשדה ריק. מיושם באמצעות .suggestions-dropdown { position: absolute; top: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #ccc; max-height: 300px; overflow-y: auto; z-index: 1000; } על keydown וכתיבה ל-activeIndex בכל חיפוש ייחודי.

בעיות אופייניות שנפתרות על ידי הצעות חיפוש

בעיה נפוצה: משתמשים לא יודעים את השם המדויק של המוצר. חיפוש חיזוי עם מילים נרדפות ותיקון שגיאות הקלדה פותר זאת. אנו משלבים MeiliSearch עם מילים נרדפות מוגדרות (לדוגמה, "אספירין" → "חומצה אצטילסליצילית"). מקרה נוסף: חיפוש לפי מספרי קטלוג — לקוחות מזינים לעיתים קרובות קודים מספריים. בעיה שלישית: תגובת שרת איטית — דיבונס של 300 אלפיות השנייה וקאש עם תגיות בצד Bitrix מפחיתים עומס. מנוע חיפוש חיצוני כמו MeiliSearch או Elasticsearch מחובר ל-Bitrix עבור קטלוגים גדולים. מנוע חיצוני מהיר פי 5 מהחיפוש המובנה של Bitrix עבור קטלוגים גדולים, ומספק תוצאות תוך פחות מ-100 אלפיות השנייה.

מקרה בוחן מעשי: רשת בתי מרקחת

רשת בתי מרקחת עם 15,000 פריטים נתקלה בבעיה: החיפוש המובנה לא טיפל במילים נרדפות ושגיאות הקלדה. חיברנו את MeiliSearch עם מילים נרדפות מוגדרות. רכיב Vue עם דיבונס של 250 אלפיות השנייה. זמן תגובה להצעות: 30-80 אלפיות השנייה. החיפוש המובנה של Bitrix נשמר לעמוד התוצאות המלא. זמן שנחסך למשתמש: כ-2 שניות לשאילתה.

אילו מנועי חיפוש חיצוניים הם הטובים ביותר עבור Bitrix?

עבור קטלוגים גדולים: MeiliSearch או Elasticsearch

אם הקטלוג גדול (100,000+ פריטים) וחיפוש Bitrix איטי, חיפוש חיזוי שואל מנוע חיפוש חיצוני:

• MeiliSearch — הגדרה קלה, מהיר, קוד פתוח (מתאים לרוב הפרויקטים). קוד המקור במאגר MeiliSearch.
• Elasticsearch — חזק יותר, מורכב, מתאים לארגונים. מאגר: מאגר Elasticsearch.

אינדוקס מוצרי Bitrix ל-MeiliSearch — באמצעות סוכן שמסנכרן נתונים כאשר function highlight(text, query) { const regex = new RegExp(`(${escapeRegex(query)})`, 'gi'); return text.replace(regex, '<mark>$1</mark>'); } משתנה. הסוכן רץ כל דקה ובודק את דגל watch. בממוצע, אינדוקס של 100,000 מוצרים אורך 2-3 דקות. אנו משתמשים בפתרון עם רישיון וערבויות ביצועים. עם ניסיון של למעלה מ-10 שנים בפיתוח Bitrix ויותר מ-200 פרויקטים מוצלחים, אנו מבטיחים איכות. הצוות שלנו פותר אתגרי חיפוש Bitrix מאז 2012, עם 11 שנים בעסק ו-250+ פרויקטים שהושלמו.

מה כלול בעבודה

• ביקורת על פונקציונליות החיפוש הנוכחית ובחירת ארכיטקטורה (מנוע חיצוני או חיפוש Bitrix).
• פיתוח בקר PHP לבקשות הצעות.
• יצירת רכיב Vue 3 עם דיבונס, הדגשה, ניווט מקלדת והיסטוריה.
• אינטגרציה עם מנוע חיפוש חיצוני (MeiliSearch/Elasticsearch) אם נדרש.
• הגדרת אינדקסים וסוכנים לסנכרון.
• בדיקות על נתונים אמיתיים ובדיקות שמישות.
• תיעוד API והוראות התקנה.
• תמיכה טכנית למשך חודש לאחר ההשקה.

תהליך העבודה על חיפוש עם השלמה אוטומטית

לוחות זמנים

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