קטלוג Vue.js עבור 1C-Bitrix: עיבוד היברידי

לעתים קרובות אנו נתקלים בפרויקטים שבהם רכיב ה-bitrix:catalog.section הסטנדרטי לא יכול לעמוד בעומס: סינון דינמי עם 20+ פרמטרים, גלילה אינסופית, מעבר מיידי בין תצוגת רשת לרשימה. עיבוד בצד השרת של כל בקשה גורם לעיכובים של 3–6 שניות. תרחיש טיפוסי: חנות מקוונת עם 50,000 מוצרים שבה כל לחיצה על פילטר גורמת לטעינה מלאה של הדף. המשתמש ממתין 5 שניות ועוזב. שכתבנו את הפרונטאנד ב-Vue.js: הסינון הפך למיידי, עומס השרת ירד ב-40%, וה-SEO נשאר intact—המסך הראשון מעובד בצד של Bitrix. קטלוג Vue פותר בעיות אלה באמצעות ראקטיביות בצד הלקוח תוך שמירה על עיבוד בצד השרת ל-SEO—גישה היברידית שמספקת מהירות SPA ואינדוקס של HTML סטטי. צרו קשר כדי לקבל הערכה לפרויקט שלכם.

אילו בעיות קטלוג Vue פותר ב-Bitrix?

• סינון איטי: כל בקשת AJAX לשרת מציירת מחדש את כל הסקשן. Vue.js מעבד סינון בצד הלקוח, ושולח רק נתונים דרך API. Debounce ב-300 אלפיות השנייה ו-UI אופטימי עם מסכי שלד הופכים את התגובה למיידית.
• סיכוני SEO של SPA: עיבוד מלא בצד הלקוח אינו מיונדקס היטב. הגישה ההיברידית מספקת את המסך הראשון בצד השרת (HTML עם מוצרים), ו-Vue.js מבצע הידרציה לאחר מכן—מנועי חיפוש רואים תוכן, משתמשים מקבלים מהירות.
• עומס גבוה על השרת: עם בקשות תכופות (פאג'ינציה, מיון), השרת מעבד רכיבים מחדש. קטלוג Vue מוריד עומס מהשרת: לאחר הטעינה הראשונית, כל הלוגיקה נמצאת בצד הלקוח; ה-API משרת רק JSON. הפחתת עומס על מסד הנתונים מגיעה ל-50%.

איך אנו מיישמים Vue.js בקטלוג Bitrix: מקרה מעשי

טכנולוגיות: PHP 8.1, Bitrix (D7 ORM, infoblocks v2.0), Vue 3 + Pinia, MySQL 8.0. לצורך אינטגרציה, אנו כותבים בקר API מותאם אישית באמצעות Bitrix\Main\Engine\Controller שמחזיר מוצרים, facets ופאג'ינציה דרך נקודת קצה אחת. דוגמה לבקר:

// local/components/vendor/catalog.api/ajax.php
use Bitrix\Main\Engine\Controller;
use Bitrix\Iblock\Elements\ElementProductTable;

class CatalogController extends Controller
{
    public function getProductsAction(array $filter = [], int $page = 1, int $pageSize = 24): array
    {
        $offset = ($page - 1) * $pageSize;
        // Получение через D7 ORM ElementProductTable
        // Возврат JSON: items, pagination, facets
    }
}

נקודת קצה: // local/components/vendor/catalog.api/ajax.php use Bitrix\Main\Engine\Controller; use Bitrix\Iblock\Elements\ElementProductTable; class CatalogController extends Controller { public function getProductsAction(array $filter = [], int $page = 1, int $pageSize = 24): array { $offset = ($page - 1) * $pageSize; // Получение через D7 ORM ElementProductTable // Возврат JSON: items, pagination, facets } } . בפרונטאנד, רכיבי Vue:

• /bitrix/services/main/ajax.php?action=catalog.getProducts — רכיב ראשי, מנהל מצב דרך Pinia store.
• CatalogApp.vue / ProductGrid.vue — מצבי תצוגה עם מעבר ללא טעינה מחדש.
• ProductList.vue — כרטיס עם תצוגה מהירה במודאל.
• ProductCard.vue / Pagination.vue — ניווט.
• InfiniteScroll.vue — מיון לפי מחיר, פופולריות, חדשנות.
• SortBar.vue — פילטר פקטורי עם בחירה מרובה וטווחים.

לפרטים נוספים על המסגרת, ראו את התיעוד של Vue.js.

למה עיבוד היברידי קריטי ל-SEO?

מנועי חיפוש (Yandex, Google) חייבים לראות HTML מלא של מוצרים בבקשה הראשונה. Vue.js ללא עיבוד בצד השרת מוציא FilterPanel.vue ריק, מה שמוביל לאובדן תנועה. אנו משתמשים בעיבוד בצד השרת עבור המסך הראשון: בתבנית רכיב Bitrix, אנו מציגים מוצרים בלולאה רגילה, ואז מעבירים אותם ל-Vue דרך #app:

// В шаблоне компонента
$initialProducts = json_encode($arResult['ITEMS']);
echo '<div id="catalog-app" data-initial-products="' . htmlspecialchars($initialProducts) . '" data-iblock-id="' . $arResult['IBLOCK_ID'] . '" ></div>';

Vue קורא את data-attribute בעת ההרכבה ומציג את הרשת ללא AJAX. כל הבקשות הבאות הן רק דרך API. גישה זו נותנת מהירות Vue ואינדוקס של HTML סטטי. בפועל, זה הגדיל את הנראות של הקטלוג ב-70% עבור לקוח אחד (חנות לחומרי בניין). התיעוד הרשמי של Bitrix D7 ORM מאשר את היעילות של גישה זו.

כמה זמן לוקח פיתוח קטלוג Vue?

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

טיפול במחיר ומלאי בזמן אמת

מחירים ב-Bitrix מאוחסנים ב-// В шаблоне компонента $initialProducts = json_encode($arResult['ITEMS']); echo '<div id="catalog-app" data-initial-products="' . htmlspecialchars($initialProducts) . '" data-iblock-id="' . $arResult['IBLOCK_ID'] . '" ></div>'; לפי סוג מחיר. מלאים נמצאים ב-data-initial-products. לזמינות עדכנית בזמן הצפייה, אנו מוסיפים נקודת קצה מהירה שאינה חוסמת את הטעינה הראשונית:

// Запрос наличия для массива товаров
async function getAvailability(productIds) {
    return await api.post('/catalog/availability', { ids: productIds });
}

אנו קוראים לה לאחר הצגת הכרטיסים—משתמשים רואים מחירים מיד, ותגיות "במלאי" מתעדכנות תוך שנייה. בשרת, אנו משתמשים ב-caching מתויג כדי לאפס כשהמלאים משתנים.

מקרה בוחן

חנות מקוונת לחומרי בניין: קטלוג עם 80,000 פריטים, סינון לפי 20+ פרמטרים (מותג, סדרה, גודל, צבע, חומר). הפילטר הסטנדרטי של Bitrix AJAX ביצע בקשה על כל שינוי שנמשכה 3–6 שניות (עיבוד מלא של הסקשן בצד השרת). יישמנו קטלוג Vue עם בקשות debounced (300 אלפיות השנייה) ו-UI אופטימי (הצגת שלד מיד)—זמן התגובה הסובייקטיבי ירד ל-<300 אלפיות השנייה. הטעינה הראשונה של דף הסקשן משתמשת בעיבוד בצד השרת של Bitrix לאינדוקס נכון. תוצאה: ההמרה עלתה ב-25% בזכות סינון נוח. מוכנים לדון בפרויקט שלכם? צרו קשר.

טבלת השוואה: גישה סטנדרטית מול קטלוג Vue

טעויות נפוצות

• ללא הידרציה: קטלוג Vue נטען ריק עד ש-AJAX מסתיים—משתמשים רואים מסך לבן. פתרון: העבירו נתונים ראשוניים דרך מאפי�י b_catalog_store_product.
• תגובות API גדולות מדי: עם 80,000 מוצרים, הפילטר מחזיר את כל הפריטים. השתמשו בפאג'ינציה (24 פריטים) ובאגרגציית facets בשרת.
• התעלמות מ-caching: ללא cache מתויג, כל בקשה פוגעת במסד הנתונים. השתמשו ב-// Запрос наличия для массива товаров async function getAvailability(productIds) { return await api.post('/catalog/availability', { ids: productIds }); } או ב-D7 cache עם תגיות bitrix:catalog.section.
• טיפול שגוי במלאי: לזמן אמת, השתמשו בנקודת קצה נפרדת שאינה מכבידה על השאילתה הראשית.

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

• קוד מקור של בקר API מותאם אישית ל-Bitrix.
• רכיבי Vue: רשת, רשימה, כרטיס, פילטר, פאג'ינציה, מיון.
• עיבוד היברידי של המסך הראשון (HTML בצד השרת + הידרציה).
• אינטגרציה עם מחירים ומלאים (זמינות בזמן אמת).
• תיעוד API ורכיבים.
• הגדרת caching ותגיות SEO meta.
• סביבת בדיקה והדרכה למפתחים שלכם.
• תמיכה ל-30 יום לאחר ההשקה.

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