חשבון אישי ב-React לפיתוח 1C-Bitrix

React Personal Account for 1C-Bitrix Development

אנחנו יודעים מניסיון: החשבון האישי הסטנדרטי ב-1C-Bitrix הוא אוסף של רכיבי PHP bitrix:sale.personal.* שמר�דרים על השרת, מספקים דף HTML מלא, ובכל פעולה של המשתמש (שינוי כתובת משלוח, צפייה בסטטוס הזמנה) מבצעים טעינה מלאה של הדף. בחנויות קטנות זה נסבל. כשהחשבון כולל היסטוריית הזמנות של 200+ פריטים, מערכת נאמנות, מספר כתובות משלוח, מסמכים ואינטגרציה עם שירותים חיצוניים — הגישה הסטנדרטית הופכת לצוואר בקבוק מבחינת חוויית משתמש וביצועים. פיתוח חשבון אישי ב-React פותר את הבעיה: השרת מספק רק נתונים דרך REST, והממשק חי בדפדפן. זה מאפשר מעברים מיידיים בין סעיפים, עדכוני נתונים ללא טעינות מחדש, ויכולת לבנות טפסים אינטראקטיביים מורכבים ללא קומפילציה מחדש של הדף. לפי מקרה הבוחן שלנו, חשבון React מפחית את זמן הטעינה ב-70% ומוריד את עלויות התמיכה התפעולית.

כיצד חשבון React משפר ביצועים

עם רינדור בצד השרת, כל ניווט הוא בקשה חדשה שבונה את כל הדף מחדש. חשבון React טוען רק נתונים: רשימת הזמנות, פרופיל, היסטוריה. הדפדפן מעדכן רק את החלק הדרוש בממשק. לדוגמה, מעבר בין טאבים של 'הזמנות' ו'כתובות' לוקח 50–100 אלפיות שנייה במקום 1–2 שניות לטעינה מלאה. זה מאושר על ידי מקרי הבוחן שלנו: זמן טעינת דף הזמנה ירד מ-4.2 ל-0.9 שניות (ראה טבלה למטה).

ארכיטקטורת אינטגרציה

ישנן שתי דרכים שונות מהותית להטמעת חשבון React בתוך Bitrix.

אפשרות 1: React בתוך תבנית Bitrix. בדף PHP /personal/, אפליקציית React מותקנת בקונטיינר <div id="personal-root"></div>. Bitrix מטפל באימות, SEO (כותרת, meta), ובפריסה הכללית (כותרת עליונה, תחתונה). React מנהלת רק את תוכן החשבון. ניתוב דרך React Router עם BrowserRouter, היסטוריית הדפדפן מסונכרנת עם ה-URL. אפשרות זו פשוטה יותר לאינטגרציה: אימות דרך $USER->Login() סטנדרטי, סשן Bitrix מועבר אוטומטית, טוקן CSRF נלקח מ-BX.bitrix_sessid().

אפשרות 2: SPA עם אימות JWT. אפליקציית React חיה בנפרד (דומיין נפרד או תת-דומיין) ומתקשרת עם Bitrix אך ורק דרך REST API עם טוקני JWT. אימות דרך נקודת קצה מותאמת אישית, טוקן מאוחסן ב-httpOnly cookie או localStorage. אפשרות זו מוצדקת כשהחשבון חייב לעבוד גם עם אפליקציה ניידת וגם עם גרסת ווב דרך אותו API. עבור רוב הפרויקטים, אפשרות 1 היא אופטימלית — קל יותר לתחזק אותה ואינה דורשת פריסה נפרדת; האימות כבר פתור.

שכבת API בצד Bitrix

רכיבי React מתקשרים עם נתונים דרך בקשות AJAX ל-Bitrix. לשם כך, נוצר קונטרולר ב-/local/php_interface/include/api/personal/:

// Пример: endpoint для списка заказов
class PersonalOrdersController extends \Bitrix\Main\Engine\Controller
{
    public function getListAction(int $page = 1, int $limit = 20): array
    {
        $userId = \Bitrix\Main\Engine\CurrentUser::get()->getId();
        $orderList = \Bitrix\Sale\Order::getList([
            'filter' => ['USER_ID' => $userId],
            'select' => ['ID', 'DATE_INSERT', 'PRICE', 'STATUS_ID', 'CURRENCY'],
            'order' => ['DATE_INSERT' => 'DESC'],
            'limit' => $limit,
            'offset' => ($page - 1) * $limit,
        ]);
        $orders = [];
        while ($order = $orderList->fetch()) {
            $orders[] = $order;
        }
        return [
            'orders' => $orders,
            'total' => \Bitrix\Sale\Internals\OrderTable::getCount(['USER_ID' => $userId]),
        ];
    }
}

ניתוב ב-Bitrix דרך // Пример: endpoint для списка заказов class PersonalOrdersController extends \Bitrix\Main\Engine\Controller { public function getListAction(int $page = 1, int $limit = 20): array { $userId = \Bitrix\Main\Engine\CurrentUser::get()->getId(); $orderList = \Bitrix\Sale\Order::getList([ 'filter' => ['USER_ID' => $userId], 'select' => ['ID', 'DATE_INSERT', 'PRICE', 'STATUS_ID', 'CURRENCY'], 'order' => ['DATE_INSERT' => 'DESC'], 'limit' => $limit, 'offset' => ($page - 1) * $limit, ]); $orders = []; while ($order = $orderList->fetch()) { $orders[] = $order; } return [ 'orders' => $orders, 'total' => \Bitrix\Sale\Internals\OrderTable::getCount(['USER_ID' => $userId]), ]; } } עם דיספאצ'ר או דרך local/ajax/personal.php. להגנה מפני CSRF, כל בקשות POST מ-React שולחות את הכותרת \Bitrix\Main\Engine\Router ואת טוקן הסשן.

מבנה אפליקציית React

src/
  personal/
    api/ # axios-инстанс, типы запросов
    components/ # переиспользуемые UI-элементы
    pages/
      Orders/ # история заказов
      OrderDetail/ # детальная страница заказа
      Profile/ # данные профиля
      Addresses/ # адреса доставки
      Loyalty/ # бонусная программа
    store/ # состояние (Zustand или Redux Toolkit)
  App.tsx
  router.tsx

ניהול מצב: עבור חשבונות פשוטים, React Query (מטמון בקשות + סנכרון) מספיק ללא חנות גלובלית. עבור מורכבים, Zustand כאלטרנטיבה קלה יותר ל-Redux.

מקרה בוחן: חשבון מפיץ B2B

ספק סיטונאי של אלקטרוניקה, כ-1,500 חשבונות לקוחות פעילים. משימה: חשבון אישי למנהלי לקוחות — יכולת לצפות בהיסטוריית רכישות, להזמין מחדש מההיסטוריה, לנהל מספר ישויות משפטיות בחשבון אחד, להוריד מסמכי סגירה. החשבון הסטנדרטי של Bitrix לא תמך כלל במספר ישויות משפטיות, והיסטוריית הזמנות עם 3,000+ שורות רנדרה על השרת ב-4–6 שניות.

הפחתת פניות התמיכה ב-80% חותכת עלויות תחזוקה. זה חוסך תקציב לתמיכה ומאפשר להפנות משאבים לפיתוח.

מה כלול בפיתוח חשבון במפתחות מלאים?

• עיצוב API: נקודות קצה, מבנה נתונים, פגינציה, סינון.
• פיתוח צד שרת: קונטרולרים, אימות, זכויות גישה.
• פיתוח אפליקציית React: ניתוב, רכיבים, ניהול מצב.
• אינטגרציה עם מודולי Bitrix: invalidateQueries, \Bitrix\Sale\Basket::create(), sale לפי הצורך.
• בנייה, פריסה, הגדרת מטמון תגובות API.
• תיעוד API ומבנה רכיבים.
• הדרכת מנהלים: כיצד להוסיף סעיפים חדשים או לשנות נתונים.
• אחריות: אנו מתחזקים את הפונקציונליות של הבנייה וה-API למשך 3 חודשים לאחר המסירה.

הערכות זמנים

חשבון בסיסי (פרופיל + הזמנות + כתובות) — 3–4 שבועות. חשבון B2B מלא עם מספר ישויות משפטיות, אינטגרציה עם 1C וזרימת מסמכים — 2–4 חודשים. אנו מציינים זמנים לאחר ביקורת הדרישות שלכם בייעוץ חינמי.

למה לבחור ב-React לחשבון אישי?

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

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