לקוח פנה אלינו לאחרונה עם בעיה נפוצה: מפתח פריסה סיפק תבנית — הכל נראה מצוין במחשב שולחני. אבל כשפתחתם אותה ב-iPhone 13, הכותרת עם הלוגו חפפה את התפריט, מסנן הקטלוג חרג מגבולות המסך, וכפתור 'קנה' הוסתר מתחת לבאנר דביק.
זו אינה תקלת פריסה בוואקום — זו תוצאה של התאמה ללא התחשבות במאפיינים הספציפיים של מערכת התבניות של Bitrix: קומפוננטות מקוננות הנכללות דרך $APPLICATION->IncludeComponent(), והעובדה שחלק מה-HTML נוצר על ידי PHP וחלק על ידי JavaScript.
לפי StatCounter, תעבורת מובייל כבר עולה על זו של מחשבים שולחניים, ומנועי חיפוש מתחשבים בהתאמה למסכים בעת דירוג. כמפתחי Bitrix עם למעלה מ-10 שנות ניסיון, אנו יודעים כיצד להתאים תבנית כראוי מבלי לאבד פונקציונליות. בחמש השנים האחרונות התאמנו יותר מ-30 תבניות לתעשיות שונות — מחנויות מקוונות ועד פורטלים ארגוניים.
מדוע ההסתגלות של Bitrix שונה מאתר רגיל
תבנית אתר ב-Bitrix היא תיקייה ב-/bitrix/templates/<template_name>/ או /local/templates/<template_name>/. נקודות כניסה: header.php, footer.php, styles.css, script.js.
קומפוננטות נעקפות ב-/bitrix/templates/<template>/components/ או /local/templates/<template>/components/.
הסתגלות דורשת עבודה בשני רבדים:
- תבנית האתר (
header.php,footer.php, בלוקים משותפים): ניווט, כותרת עליונה, כותרת תחתונה, סרגל צד - תבניות קומפוננטות: ל-
bitrix:catalog.section,bitrix:news.list,bitrix:sale.basket.basketיש סימון משלהן ב-template.php— גם אותו יש להתאים
הטעות הנפוצה ביותר היא להתאים רק את תבנית האתר ולשכוח מתבניות הקומפוננטות. כתוצאה מכך, הכותרת עליונה מותאמת, אך כרטיסי המוצרים עדיין נמצאים בטבלה קבועה.
אילו רכיבים זקוקים להתאמה תחילה?
אנו מזהים ארבעה אזורים שנשברים לרוב: תפריט מובייל — הרכיב bitrix:menu מייצר <ul> עם מחלקות. עבור תפריט המבורגר במובייל, יש צורך либо לעקוף את תבנית הרכיב, либо לשלוט בנראות באמצעות CSS/JS. חשוב לשמור על נגישות: התפריט חייב לעבוד ללא JavaScript כאשר מטמון SSR מופעל.
קטלוג וסינון — bitrix:catalog.section עם bitrix:catalog.smart.filter במובייל דורש גישה נפרדת: הסינון ממוקם בשכבת-על או באקורדיון, ורשתות המוצרים עוברות מ-3 עמודות ל-2 ול-1.
טפסים — ל-bitrix:form.result.new ולטפסי תשלום (bitrix:sale.order.ajax) יש לעתים קרובות פריסות מרובות-עמודות שיש לסדר מחדש לעמודה אחת.
טבלאות נתונים — מחירונים, מאפייני מוצר: במובייל הם מוחלפים בפריסה מוערמת או בגלילה אופקית עם עמודה ראשונה מקובעת.
Mobile-first או Desktop-first: מה לבחור?
עבור פרויקטים חדשים, אנו ממליצים על Mobile-first — לכתוב סגנונות למובייל ולהרחיב באמצעות min-width media queries. זה מייצר קוד נקי יותר וביצועים טובים יותר במובייל.
Desktop-first רלוונטי כאשר מתאימים תבנית קיימת שנכתבה במקור לדסקטופ: מוסיפים media queries עם max-width, פחות סיכון לשבור את המראה הנוכחי. בפועל, הגישה השנייה נפוצה יותר אך דורשת בדיקות יסודיות יותר. היא מבוססת על הקונספט של Responsive web design.
Breakpoints מתואמים עם העיצוב, אך סט טיפוסי לפרויקטים של Bitrix הוא: 1280px, 1024px, 768px, 480px, 375px.
מקרה בוחן מהפרקטיקה שלנו: התאמת אתר תאגידי
אתר של חברת בנייה, תבנית שנכתבה לפני מספר שנים, ללא התאמה. נתח תעבורת המובייל לפי Metrica עמד על 58%. המשימה: התאמה מלאה ללא עיצוב מחדש וללא שכתוב לוגיקת PHP.
עברנו על כל העמודים והרכבנו רשימה של רכיבים ובלוקים בעייתיים. העבודה העיקרית התמקדה ב: העמוד הראשי (באנר + בלוקי שירותים), קטלוג (סינון + גריד), עמוד יצירת קשר (מפת Yandex + טופס). במקביל, דרסנו תבניות של שלושה רכיבים ב-/local/templates/. העבודה ארכה 5 עד 8 ימי עסקים. התוצאה: תעבורת המובייל החלה להביא 30% יותר לידים, ושיעור הנטישה ירד ב-15%.
מה כוללת העבודה
- ביקורת של התבנית הנוכחית וזיהוי רכיבים בעייתיים
- התאמת תבנית האתר (header, footer, בלוקים משותפים)
- דריסת תבניות רכיבים (עד 5–10)
- הגדרת breakpoints ו-media queries
- בדיקה במכשירים אמיתיים וב-BrowserStack
- בדיקת מטמון Bitrix — סקריפטים אדפטיביים לא צריכים להיכנס למטמון באופן שגוי
- מסירת התיקונים ותיעוד אדפטיבי
אנו מתחייבים שלאחר העבודה שלנו, האתר שלך יוצג כראוי בכל המכשירים — מ-iPhone SE ועד מסכים בגודל 27 אינץ'.
בדיקת האדפטיביות
אנחנו בודקים ב-Chrome DevTools (סרגל המכשירים) — זה המינימום. בנוסף: מכשירים אמיתיים או BrowserStack, בדיקת אירועי מגע, בדיקת עמודים שמורים במטמון של Bitrix (חשוב: Bitrix שומר HTML במטמון — יש לוודא שסקריפטים אדפטיביים לא נכנסו למטמון באופן שגוי).
לוחות זמנים
| היקף העבודה | משך זמן |
|---|---|
| התאמת תבנית קיימת (עד 10 סוגי עמודים) | 3–7 ימים |
| התאמה עם דריסת קומפוננטות (10–25 סוגים) | 1–3 שבועות |
| פריסת תבנית אדפטיבית מלאה מאפס | 3–6 שבועות |
נעריך את הפרויקט שלכם — צרו קשר לייעוץ. הזמינו פריסת תבנית אדפטיבית במפתח סופי, ונתחיל בתוך שבוע.