פיתוח תפריט מגה עם אייקונים לקטגוריות ב-1C-Bitrix

פיתוח תפריט מגה עם אייקוני קטגוריות ב-1C-Bitrix

תארו לעצמכם: קטלוג מסחר אלקטרוני עם יותר מ-500 קטגוריות ותפריט שנטען תוך 2 שניות — מבקרים עוזבים בלי לחכות. מחקרים מראים שכל שנייה נוספת של זמן טעינה מפחיתה את ההמרה ב-7%; עבור חנות עם מחזור של מיליון דולר, זה אובדן של 70,000 דולר בחודש. אייקוני קטגוריות פותרים את הבעיה: העין מזהה אייקון של מחשב נייד מהר יותר מהמילה "מחשבים ניידים." אבל התפריט הסטנדרטי של ביטריקס לא תומך באייקונים — נדרש פיתוח מותאם אישית. במהלך השנים סיפקנו יותר מ-100 פרויקטים עם ניווט לקטלוגים גדולים: מוצרי אלקטרוניקה, חלקי רכב, מוצרי בית. להלן יישום טכני סוהר המתמקד בביצועים. צרו קשר כדי לקבל הערכת פרויקט ראשונית.

איך לבחור את שיטת אחסון האייקונים?

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

ספרייט SVG הוא הבחירה המומלצת לקטלוגים גדולים. שדה המשתמש UF_ICON_CODE (סוג מחרוזת) מאחסן את מזהה האייקון: icon-laptop, icon-phone, icon-furniture. ספרייט ה-SVG נכלל פעם אחת בתבנית, אייקונים מוצגים דרך <use href="#icon-laptop">. חסרון: העורך צריך לדעת אילו קודים זמינים. זה נפתר עם תיעוד או ווידג'ט מותאם אישית.

אייקוני קבצים דרך UF_MENU_ICON (סוג קובץ) — המנהל רואה מה הוא מעלה. אבל כל קובץ הוא בקשת HTTP נפרדת אלא אם כן מטמיעים base64 (מה שמגדיל את הגודל). מתאים לחנויות קטנות עם 10–20 קטגוריות. שדות משתמש של ביטריקס מתארים יצירת UF.

למה ספרייט SVG מנצח קבצים בודדים?

חיסכון בבקשות: 1 במקום 30. הספרייט נשמר במטמון הדפדפן לכל הסשן. ספרייט של 50 אייקונים (Heroicons) הוא בערך 30 KB. קבצי SVG בודדים עשויים להיות קטנים יותר בסך הכל, אבל כל קובץ הוא בקשה חדשה, שמגדילה את זמן הטעינה. הפחתת בקשות HTTP מורידה ישירות את תקציב האירוח שלכם — אנחנו מבטיחים לפחות 40% טעינה מהירה יותר של התפריט במעבר לספרייט. עבור קטלוג עם יותר מ-500 קטגוריות, זה חוסך 5,000 עד 15,000 דולר בחודש.

יישום: הוספת השדה והספרייט

הוראות שלב אחר שלב:

1. צרו שדה משתמש UF_ICON_CODE עבור קטעי בלוק המידע (סוג מחרוזת) דרך מיגרציה או סקריפט התקנה.
2. בנו ספרייט SVG ממערכת העיצוב שלכם (למשל, Heroicons) או המירו קבוצת אייקונים לקובץ אחד.
3. כללו את הספרייט בתבנית — הציבו בלוק svg נסתר לפני סגירת </body>:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol id="icon-laptop" viewBox="0 0 24 24"> <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7H4V6Z"/> <path d="M2 17h20v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1Z"/> </symbol> </svg> 

4. בתבנית התפריט, אחזרו קטעים עם שדה המשתמש דרך <svg xmlns="http://www.w3.org/2000/svg" style="display:none"> <symbol id="icon-laptop" viewBox="0 0 24 24"> <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7H4V6Z"/> <path d="M2 17h20v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1Z"/> </symbol> </svg> :

$res = \CIBlockSection::GetList( ['LEFT_MARGIN' => 'ASC'], ['IBLOCK_ID' => CATALOG_IBLOCK_ID, 'ACTIVE' => 'Y', 'DEPTH_LEVEL' => [1, 2]], false, ['ID', 'NAME', 'CODE', 'SECTION_PAGE_URL', 'DEPTH_LEVEL', 'IBLOCK_SECTION_ID', 'UF_ICON_CODE', 'UF_MENU_ICON'] ); 

5. הציגו את האייקון דרך הפונקציה renderMenuIcon:

function renderMenuIcon(string $iconCode): string { if (empty($iconCode)) return ''; $safe = preg_replace('/[^a-z0-9\-]/', '', strtolower($iconCode)); if (!$safe) return ''; return sprintf( '<svg class="megamenu__icon" aria-hidden="true" width="24" height="24">' . '<use href="#%s"></use></svg>', htmlspecialchars('icon-' . $safe) ); } 

בתבנית:

<a href="<?= htmlspecialchars($category['SECTION_PAGE_URL']) ?>" class="megamenu__link"> <?php if ($category['UF_ICON_CODE']): ?> <?= renderMenuIcon($category['UF_ICON_CODE']) ?> <?php elseif ($category['UF_MENU_ICON']): ?> <img src="<?= \CFile::GetPath($category['UF_MENU_ICON']) ?>" alt="" class="megamenu__icon" width="24" height="24" loading="lazy"> <?php endif ?> <span class="megamenu__link-text"><?= htmlspecialchars($category['NAME']) ?></span> </a> 

איך ליישם אייקונים בלי פגיעה בביצועים?

שמירה במטמון מתויג היא הכלי המרכזי שלכם. שמרו את תוצאת רכיב התפריט במטמון עם קישור לשינויים בבלוק המידע. עבור אייקונים, השתמשו בספרייט SVG (בקשה אחת) ובטלו פונקציות דחויות. בנוסף, אפשר לשמור את תוצאת \CIBlockSection::GetList במטמון סטטי למשך הסשן. זה מפחית את העומס על מסד הנתונים ומאיץ את התגובה.

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

• ניתוח מבנה הקטלוג הנוכחי ואב-טיפוס של התפריט.
• בחירת שיטת אחסון האייקונים (ספרייט SVG או קבצים) תוך התחשבות בנפח ועורכים.
• פיתוח שדה המשתמש, הרכבת הספרייט, אינטגרציה בתבנית.
• התאמה למובייל (media queries, תפריט המבורגר).
• תיעוד לעורכים וסקירת קוד.

לוח זמנים ליישום

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

מקרה נפוץ: 500+ קטגוריות

לאחרונה יישמנו תפריט מגה עבור חנות חלקי רכב עם יותר מ-500 קטעים. השתמשנו בספרייט SVG, בשדה UF_ICON_CODE ובשמירה במטמון מתויג. כתוצאה מכך, התפריט נטען תוך 0.3 שניות במקום 2 שניות, ומספר בקשות ה-HTTP ירד מ-15 ל-1. העורכים קיבלו טבלה עם קודים וצילומי מסך — הם ממלאים אותה ללא שגיאות.

CSS לאייקונים

.megamenu__link { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem; white-space: nowrap; text-decoration: none; color: var(--color-text); border-radius: 6px; transition: background 0.15s, color 0.15s; } .megamenu__link:hover, .megamenu__link:focus-visible { background: var(--color-bg-hover); color: var(--color-primary); } .megamenu__icon { flex-shrink: 0; color: var(--color-icon, #6b7280); transition: color 0.15s; } .megamenu__link:hover .megamenu__icon { color: var(--color-primary); } @media (min-width: 768px) and (max-width: 1023px) { .megamenu__link--top-level { flex-direction: column; gap: 0.375rem; padding: 0.75rem 0.625rem; font-size: 0.8125rem; text-align: center; } .megamenu__link--top-level .megamenu__icon { width: 32px; height: 32px; } } 

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

קבעו פגישת ייעוץ — נעריך את הפרויקט שלכם ונציע את הפתרון הטוב ביותר.