רכיבי טאבים ואקורדיון ב-Vue.js עבור 1C-Bitrix

פיתוח טאבים ואקורדיונים ב-Vue.js עבור 1C-Bitrix הוא החלטה ארכיטקטונית המשפיעה ישירות על ביצועים, אינדוקס SEO וחוויית משתמש. גישה שגויה מובילה לכפילות HTML, טעינה איטית וחוסר יכולת לקישור עמוק. אנו יוצרים רכיבים שחוסכים עד 30% מזמן הפיתוח ומפחיתים את קוד ה-HTML פי 2-3.

בתבנית Bitrix סטנדרטית עם 5 טאבים, ה-DOM מרנדר פי 5 יותר תוכן מהנדרש — מה שמגדיל את זמן הטעינה ב-200–500 אלפיות השנייה במכשירים ניידים. יישומי jQuery באמצעות .show()/.hide() אינם מעדכנים את ה-URL, מה שהופך קישור עמוק לבלתי אפשרי. המחסנית שלנו: Vue.js, PHP 8.1+, בלוקי מידע v2.0, מטמון מתויג. אנו מתמחים בשילוב זה כבר למעלה מ-6 שנים והשלמנו 45+ פרויקטים עם ממשקים מותאמים אישית.

כיצד ליישם טעינה עצלה לטאבים?

הטאבים בנויים מזוג רכיבים: TabGroup מנהל את המצב הפעיל, TabPanel מרנדר את התוכן של הטאב הפעיל. ההחלטה המרכזית היא כיצד לאחסן את הטאב הפעיל:

• ref() בתוך הרכיב — אם אין צורך ב-URL
• useRoute מ-Vue Router — לדפי SPA עם ניתוב מלא
• URLSearchParams דרך history.pushState המקורי — לדפי Bitrix ללא Vue Router כאשר נדרש קישור עמוק

// Сохранение активного таба в URL без Vue Router
const activeTab = ref(new URLSearchParams(location.search).get('tab') || 'description');
watch(activeTab, (tab) => {
  const url = new URL(location.href);
  url.searchParams.set('tab', tab);
  history.replaceState({}, '', url);
});

זה מאפשר למשתמשים להעתיק קישור לטאב ספציפי — קריטי לכרטיסי מוצר עם טאבים כמו 'מפרטים', 'ביקורות', 'משלוחים'.

אקורדיונים דורשים אנימציית גובה חלקה, שאינה טריוויאלית ב-CSS: height: auto אינו מונפש. פתרון באמצעות Vue // Сохранение активного таба в URL без Vue Router const activeTab = ref(new URLSearchParams(location.search).get('tab') || 'description'); watch(activeTab, (tab) => { const url = new URL(location.href); url.searchParams.set('tab', tab); history.replaceState({}, '', url); }); עם הוקים של JavaScript:

function onEnter(el) {
  el.style.height = '0';
  el.offsetHeight; // force reflow
  el.style.height = el.scrollHeight + 'px';
}

function onAfterEnter(el) {
  el.style.height = 'auto';
}

function onLeave(el) {
  el.style.height = el.scrollHeight + 'px';
  el.offsetHeight;
  el.style.height = '0';
}

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

כיצד לשלב טאבים עם נתוני Bitrix?

תוכן הטאבים מבלוקי מידע. כרטיס מוצר עם טאבים: 'תיאור' — DETAIL_TEXT מ-b_iblock_element, 'מפרטים' — מאפיינים מ-b_iblock_element_property, 'ביקורות' — נתונים מבלוק המידע של ביקורות. ב-result_modifier.php נוצר מערך:

$arResult['TABS'] = [
    ['id' => 'description', 'title' => 'Описание', 'content' => $arResult['DETAIL_TEXT']],
    ['id' => 'props', 'title' => 'Характеристики', 'props' => $arResult['DISPLAY_PROPERTIES']],
    ['id' => 'reviews', 'title' => 'Отзывы', 'lazy' => true, 'endpoint' => '/api/reviews/?id=' . $arResult['ID']],
];

הטאב 'ביקורות' מסומן עם lazy: true — התוכן נטען דרך AJAX רק בפתיחה הראשונה. מצב הטעינה של הרכיב הוא ספינר במהלך הבקשה.

אקורדיון שאלות נפוצות מבלוק מידע. תבנית הרכיב bitrix:news.list מציגה שאלות ותשובות. רכיב ה-Vue מתחבר לקונטיינר, מנתח HTML קיים דרך querySelectorAll (שיפור פרוגרסיבי) או מקבל נתונים דרך data-items JSON.

למה לבחור ב-Vue על פני jQuery לטאבים?

השוואה:

פתרון Vue מפחית את גודל קוד ה-HTML פי 2-3 ומפשט את התחזוקה. לפי הבדיקות שלנו, מעבר בין 10 טאבים ב-Vue מהיר ב-25% מאשר ב-jQuery.

מקרה בוחן: טאבים בדף תמחור עם מעבר דינמי בין תקופות

בפרויקט אחד, הלקוח שלנו, מוצר SaaS על Bitrix, נתקל בבעיה: דף התמחור עם טאבים 'תשלום חודשי' / 'תשלום שנתי'. בעת מעבר בין טאבים, המחירים בכל כרטיסי התעריפים היו צריכים להשתנות ללא רענון דף.

פתרון jQuery דרש כפילות של כל ה-HTML עם מחירים — סט אחד למחירים חודשיים, שני לשנתיים, ומעבר בין נראות. עם 6 תעריפים — 12 בלוקי HTML, קשה לתחזוקה.

פתרון Vue: רכיב אחד PricingTabs, נתונים מ-window.BX_STATE.pricing:

const period = ref('monthly'); // 'monthly' | 'yearly'
const plans = computed(() => rawPlans.value.map(plan => ({
  ...plan,
  price: period.value === 'yearly' ? Math.round(plan.yearlyPrice / 12) : plan.monthlyPrice,
  badge: period.value === 'yearly' ? `Экономия ${plan.yearlySaving}%` : null
})));

המחירים מאוחסנים ב-JSON, ומחושבים ריאקטיבית בעת שינוי התקופה. אנימציית שינוי מחיר — <Transition> עם CSS rotateX. הנתונים ב-PHP ממולאים מבלוק המידע 'תעריפים' עם שדות MONTHLY_PRICE, YEARLY_PRICE. הפיתוח ארך יומיים. צרו קשר כדי לדון במקרה דומה עבור הפרויקט שלכם.

כיצד להבטיח נגישות ו-SEO לטאבים?

טאבים ללא ARIA היא טעות נפוצה. סימון נכון:

<div role="tablist">
  <button role="tab" :aria-selected="activeTab === 'desc'" :aria-controls="'panel-desc'">
    Описание
  </button>
</div>
<div role="tabpanel" id="panel-desc" :hidden="activeTab !== 'desc'">
  <!-- контент -->
</div>

התכונה hidden במקום v-show עם display: none — קוראי מסך מתעלמים כראוי מפאנלים מוסתרים. ניווט מקלדת בין טאבים — ArrowLeft/ArrowRight דרך onKeydown.

היבט SEO: מנועי חיפוש מאנדקסים תוכן טאבים אם הוא קיים ב-HTML. עם v-if (רנדור עצל), הטאב הראשון מרנדר בצד השרת דרך תבנית Bitrix, השאר נטענים דרך AJAX. עבור Googlebot זה מקובל — הוא מריץ JavaScript אך עם עיכוב. לתוכן SEO קריטי (מפרטי מוצר) — תמיד רנדרו ב-HTML, הסתירו דרך hidden. קראו עוד על ARIA ב-ויקיפדיה: ARIA וב-תיעוד MDN.

מה כלול בפיתוח ומה לוח הזמנים?

• אנליזה: קביעת מקורות נתונים, אב-טיפוס של רכיבים
• עיצוב: ארכיטקטורת רכיבי Vue, חוזים עם הצד האחורי
• יישום: פיתוח טאבים/אקורדיונים ב-Vue, אינטגרציה עם בלוקי מידע ו-API
• בדיקות: דפדפנים מרובים, נגישות, ביצועים
• תיעוד: תיאור רכיבים, דוגמאות שימוש
• תמיכה: אחריות ל-3 חודשים

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

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