רכיבי Vue ניתנים להרחבה עבור 1C-Bitrix: ארכיטקטורה שיטתית

כשבונים חנות מסחר אלקטרוני על 1C-Bitrix עם Vue.js, זה בדרך כלל מתחיל עם קומפוננטה אחת—עגלת קניות או פילטר. חודש לאחר מכן, מופיעות שנייה ושלישית, כל אחת עם לוגיקת שרת, סטור וסגנונות משלה. מצב העגלה בהדר מתפצל מהמצב בפופ-אפ, קוד AJAX משכפל את עצמו, והסגנונות שוברים את הלייאוט. ראינו את זה עשרות פעמים. הפתרון האמין היחיד הוא לא אוסף של קומפוננטות אלא ארכיטקטורה: מערכת שבה כל החלקים חולקים מצב משותף, שכבת API אחידה וטוקנים עיצוביים. לחברה שלנו יש 10+ שנות ניסיון בפיתוח Bitrix, מעל 50 פרויקטים מוצלחים ו-5 שנים בשוק. עם גישה שיטתית, זמן הפיתוח של קומפוננטה חדשה יורד ב-40%, ושגיאות מצטמצמות בחצי. החיסכון השנתי הממוצע בתחזוקה נע בין $2k–5k לפרויקט בינוני. קבעו ייעוץ—נראה לכם איך זה עובד על הפרויקט שלכם.

למה קומפוננטה בודדת היא אינטגרציה, אבל מערכת היא ארכיטקטורה

אינטגרציה: אתם לוקחים קומפוננטת Vue מוכנה ומטמיעים אותה בתבנית. זה עובד, אבל כל קומפוננטה חדשה דורשת קביים חדשים: סטור משלה, HTTP client משלה, לוגיקת טעינה משלה. תוך חצי שנה, האתר מריץ שלוש גרסאות של עגלת הקניות, שתי גישות AJAX והרים של קוד משוכפל. ארכיטקטורה: אתם מגדירים מראש את הליבה של המערכת—קונפיגורציה, סטורים, שכבת API, בסיס UI. כל קומפוננטה חדשה משתמשת בבלוקים מוכנים בלי להמציא את הגלגל מחדש. מערכת קומפוננטות היא מהירה פי 2 לתחזוקה מאשר אוסף של קומפוננטות עצמאיות. לפי המפתח הראשי: "ארכיטקטורה כזו אפשרה לנו לצמצם את זמן ההשקה של תכונות חדשות ב-40%".

איך אנחנו בונים את מערכת הקומפוננטות: 4 שלבים

שלב 1: אתחול אחיד ומצב משותף

הטעות הנפוצה ביותר היא יצירת אפליקציית Vue נפרדת לכל קומפוננטה. זה מוביל לחוסר סנכרון במצב. אנחנו משתמשים ב-Pinia עם מופע יחיד ומרכיבים קומפוננטות דרך data-attributes. כך זה נראה:

// app.ts
import { createApp, defineAsyncComponent } from 'vue'
import { createPinia } from 'pinia'

const componentRegistry: Record<string, any> = {
  'cart-button': defineAsyncComponent(() => import('./components/cart/CartButton.vue')),
  'add-to-cart': defineAsyncComponent(() => import('./components/catalog/AddToCartBtn.vue')),
  'wishlist-btn': defineAsyncComponent(() => import('./components/catalog/WishlistBtn.vue')),
  'compare-btn': defineAsyncComponent(() => import('./components/catalog/CompareBtn.vue')),
  'reviews': defineAsyncComponent(() => import('./components/product/Reviews.vue')),
  'size-advisor': defineAsyncComponent(() => import('./components/product/SizeAdvisor.vue')),
}

const pinia = createPinia()

document.querySelectorAll('[data-vue-component]').forEach((el) => {
  const name = el.getAttribute('data-vue-component')!
  const Component = componentRegistry[name]
  if (!Component) return

  const props: Record<string, any> = {}
  for (const attr of el.attributes) {
    if (attr.name.startsWith('data-prop-')) {
      const propName = attr.name.replace('data-prop-', '').replace(/-./g, m => m[1].toUpperCase())
      props[propName] = JSON.parse(attr.value)
    }
  }

  const app = createApp(Component, props)
  app.use(pinia)
  app.mount(el)
})

נקודה מרכזית: מופע Pinia יחיד מועבר לכל האפליקציות. זה אומר ש-cartStore בהדר ו-cartStore בכרטיס המוצר הם אותו סטור—המצב מסונכרן. טעינה עצלה דרך // app.ts import { createApp, defineAsyncComponent } from 'vue' import { createPinia } from 'pinia' const componentRegistry: Record<string, any> = { 'cart-button': defineAsyncComponent(() => import('./components/cart/CartButton.vue')), 'add-to-cart': defineAsyncComponent(() => import('./components/catalog/AddToCartBtn.vue')), 'wishlist-btn': defineAsyncComponent(() => import('./components/catalog/WishlistBtn.vue')), 'compare-btn': defineAsyncComponent(() => import('./components/catalog/CompareBtn.vue')), 'reviews': defineAsyncComponent(() => import('./components/product/Reviews.vue')), 'size-advisor': defineAsyncComponent(() => import('./components/product/SizeAdvisor.vue')), } const pinia = createPinia() document.querySelectorAll('[data-vue-component]').forEach((el) => { const name = el.getAttribute('data-vue-component')! const Component = componentRegistry[name] if (!Component) return const props: Record<string, any> = {} for (const attr of el.attributes) { if (attr.name.startsWith('data-prop-')) { const propName = attr.name.replace('data-prop-', '').replace(/-./g, m => m[1].toUpperCase()) props[propName] = JSON.parse(attr.value) } } const app = createApp(Component, props) app.use(pinia) app.mount(el) }) + Vite מפצלת אוטומטית את הקוד ל-chunks, כך ש-defineAsyncComponent נטען רק באינטראקציה הראשונה.

שלב 2: שכבת API: HTTP client אחד לכולם

// api/client.ts
const CSRF_TOKEN = (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content

async function request<T>(url: string, options: RequestInit = {}): Promise<T> {
  const res = await fetch(url, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      'X-Bitrix-Csrf-Token': CSRF_TOKEN,
      ...options.headers,
    },
  })

  if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`)

  const data = await res.json()

  if (data.errors?.length) throw new Error(data.errors[0].message)

  return data
}

export const apiGet = <T>(url: string) => request<T>(url)

export const apiPost = <T>(url: string, body: unknown) => request<T>(url, {
  method: 'POST',
  body: JSON.stringify(body),
})

כל הקומפוננטות משתמשות ב-CartDrawer.vue / // api/client.ts const CSRF_TOKEN = (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content async function request<T>(url: string, options: RequestInit = {}): Promise<T> { const res = await fetch(url, { ...options, headers: { 'Content-Type': 'application/json', 'X-Bitrix-Csrf-Token': CSRF_TOKEN, ...options.headers, }, }) if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`) const data = await res.json() if (data.errors?.length) throw new Error(data.errors[0].message) return data } export const apiGet = <T>(url: string) => request<T>(url) export const apiPost = <T>(url: string, body: unknown) => request<T>(url, { method: 'POST', body: JSON.stringify(body) }) —נקודה אחת להוספת כותרות אימות, רישום שגיאות ו-interceptors. זה מפשט את הדיבאג ומבטיח פורמט תגובה אחיד.

שלב 3: מערכת עיצוב דרך משתני CSS

צבעים, פונטים, ריווח—דרך משתני CSS שתואמים למשתני התבנית PHP ב-Bitrix:

:root {
  --color-primary: #0052cc;
  --color-success: #00875a;
  --color-danger: #de350b;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --border-radius: 4px;
}

קומפוננטת ה-Vue apiGet משתמשת במשתנים אלה—תואמת ויזואלית לשאר האתר. כל שינוי בטוקן בתבנית Bitrix מוחל אוטומטית על הקומפוננטות.

שלב 4: איך לבדוק את המערכת?

בדיקות יחידה לסטורי Pinia עם Vitest:

// stores/cartStore.test.ts
import { setActivePinia, createPinia } from 'pinia'
import { useCartStore } from './cartStore'

describe('cartStore', () => {
  beforeEach(() => setActivePinia(createPinia()))

  it('добавляет товар в корзину', async () => {
    const store = useCartStore()
    await store.add(123, 1)
    expect(store.items).toHaveLength(1)
    expect(store.count).toBe(1)
  })
})

בדיקות קומפוננטות דרך Vue Test Utils + Vitest. הגישה השיטתית מאפשרת לבדוק גם לוגיקה עסקית וגם רנדור, ומעניקה ביטחון במהלך רפקטורינג.

סקירת תוצרים

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

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