תפריט מגה ויזואלי ל-1C-Bitrix עם תמונות וטעינת AJAX

מבקר באתר מקבל החלטה תוך שניות. אם הוא רואה תמונת מוצר בתפריט, הוא לא צריך לפתוח את דף הקטגוריה. זה מזרז את הדרך לרכישה ומפחית את שיעור הנטישה. אבל פשוט להכניס תמונות לא מספיק — צריך לעצב נכון את המבנה, לייעל את הביצועים ולהבטיח התאמה למובייל. הצוות שלנו, עם ניסיון רב ב-Bitrix (מעל 10 שנים), מפתח תפריטי מגה עם תמונות וטעינת AJAX. פתרון זה מגדיל את שיעור הקליקים פי 2–3 ומפחית שגיאות ניווט. מכיוון שמשתמשים ניגשים יותר ויותר מטלפונים, אנו מיישמים פריסה רספונסיבית באמצעות CSS Grid עם טעינה עצלה של תמונות.

למה תפריט ויזואלי עם תמונות מגביר המרות

תפריט ויזואלי מושך תשומת לב. במקום רשימה משעממת של קישורים, משתמשים רואים תצוגות מקדימות של מוצרים. זה מעודד אותם לחקור את הסעיף. לפי הנתונים שלנו, לאחר יישום תפריט מגה, עומק הגלישה גדל ב-20–30%, ושיעור הנטישה יורד ב-10–15%. תקופת ההחזר עבור פתרון כזה היא 2–4 חודשים בשל עלייה במכירות. ההשקעה בפיתוח מחזירה את עצמה פי שלושה. — נתוני לקוחות פנימיים (מדדים מעודכנים)

השוואה: תפריט עשיר עם תמונות לעומת תפריט טקסט

לפי בדיקות A/B, תפריט מגה עם תמונות יעיל פי 2.5 מתפריט טקסט רגיל בשיעור הקליקים. תפריט טקסט נופל בכל המדדים המרכזיים.

מדריך שלב-אחר-שלב ליישום תפריט עשיר עם תצוגות מוצר

1. ניתוח ניווט קיים — זיהוי נקודות צמיחה.
2. הכנת infoblocks — הוספת שדה משתמש UF_MENU_IMAGE לסעיפים.
3. יישום הקומפוננטה — כתיבת מחלקה SectionProductPreviews עם caching מתויג.
4. עיצוב תבנית — שימוש ב-CSS Grid לפריסה דו-טורית.
5. טעינת AJAX — הוספת endpoint לטעינה דינמית של תצוגות מוצר בעת ריחוף.
6. אופטימיזציה — הגדרת טעינה עצלה לכל התמונות (מאפיין UF_MENU_IMAGE).
7. בדיקות — בדיקה במכשירים ניידים ורישום מדדים.

כדוגמה, מקרה בוחן של חנות מקוונת עם 15,000 מוצרים. לאחר היישום, שיעור הקליקים על קטגוריות גדל פי 2.5, ועומק הגלישה גדל ב-25%.

יישום: קוד קומפוננטה

אנו משתמשים בשדה המשתמש PICTURE עבור כל סעיף infoblock. אם הוא חסר, אנו משתמשים בתמונה הסטנדרטית // При построении дерева разделов добавляем поля изображений $res = \CIBlockSection::GetList( ['LEFT_MARGIN' => 'ASC'], ['IBLOCK_ID' => $iblockId, 'ACTIVE' => 'Y', 'DEPTH_LEVEL' => [1, 2]], false, ['ID', 'NAME', 'CODE', 'SECTION_PAGE_URL', 'DEPTH_LEVEL', 'IBLOCK_SECTION_ID', 'PICTURE', 'UF_MENU_IMAGE'] ); while ($s = $res->GetNext()) { // Приоритет: специальное изображение меню > стандартная картинка раздела $imageId = $s['UF_MENU_IMAGE'] ?: $s['PICTURE']; $s['MENU_IMAGE_SRC'] = $imageId ? \CFile::ResizeImageGet( $imageId, ['width' => 240, 'height' => 160], BX_RESIZE_IMAGE_EXACT )['src'] : null; $result[$s['ID']] = $s; } . עדיפות: תמונת תפריט מיוחדת, ולאחר מכן סטנדרטית. לאחר מכן אנו מאחסנים את השדות הנבחרים ב-cache למשך שעה.

// При построении дерева разделов добавляем поля изображений $res = \CIBlockSection::GetList( ['LEFT_MARGIN' => 'ASC'], ['IBLOCK_ID' => $iblockId, 'ACTIVE' => 'Y', 'DEPTH_LEVEL' => [1, 2]], false, ['ID', 'NAME', 'CODE', 'SECTION_PAGE_URL', 'DEPTH_LEVEL', 'IBLOCK_SECTION_ID', 'PICTURE', 'UF_MENU_IMAGE'] ); while ($s = $res->GetNext()) { // Приоритет: специальное изображение меню > стандартная картинка раздела $imageId = $s['UF_MENU_IMAGE'] ?: $s['PICTURE']; $s['MENU_IMAGE_SRC'] = $imageId ? \CFile::ResizeImageGet( $imageId, ['width' => 240, 'height' => 160], BX_RESIZE_IMAGE_EXACT )['src'] : null; $result[$s['ID']] = $s; } 

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

namespace Local\Menu; class SectionProductPreviews { public static function getForSections(array $sectionIds, int $limit = 4): array { if (empty($sectionIds)) return []; $cache = new \CPHPCache(); $cacheId = 'menu_previews_' . md5(implode(',', $sectionIds)); if ($cache->InitCache(3600, $cacheId, '/megamenu/previews/')) { return $cache->GetVars()['previews']; } $result = []; foreach ($sectionIds as $sectionId) { $res = \CIBlockElement::GetList( ['RAND' => 'ASC'], [ 'IBLOCK_ID' => CATALOG_IBLOCK_ID, 'SECTION_ID' => $sectionId, 'ACTIVE' => 'Y', 'PREVIEW_PICTURE' => ['>', 0], ], false, ['nPageSize' => $limit, 'iNumPage' => 1], ['ID', 'NAME', 'PREVIEW_PICTURE', 'DETAIL_PAGE_URL'] ); $items = []; while ($el = $res->GetNext()) { $items[] = [ 'name' => $el['NAME'], 'url' => $el['DETAIL_PAGE_URL'], 'image' => \CFile::ResizeImageGet( $el['PREVIEW_PICTURE'], ['width' => 120, 'height' => 120], BX_RESIZE_IMAGE_PROPORTIONAL )['src'], ]; } $result[$sectionId] = $items; } $cache->StartDataCache(); $cache->EndDataCache(['previews' => $result]); return $result; } } 

תבנית תפריט מגה עם תמונות

// В шаблоне для каждой категории первого уровня foreach ($arResult['MENU'] as $category): $previews = $productPreviews[$category['ID']] ?? []; ?> <div class="megamenu__dropdown megamenu__dropdown--with-images"> <div class="megamenu__inner"> <!-- Колонки подкатегорий слева --> <div class="megamenu__nav"> <?php foreach ($category['children'] as $sub): ?> <a href="<?= htmlspecialchars($sub['SECTION_PAGE_URL']) ?>" class="megamenu__subcat" data-section="<?= $sub['ID'] ?>"> <?php if ($sub['MENU_IMAGE_SRC']): ?> <img src="<?= $sub['MENU_IMAGE_SRC'] ?>" alt="<?= htmlspecialchars($sub['NAME']) ?>" width="60" height="40" loading="lazy"> <?php endif ?> <span><?= htmlspecialchars($sub['NAME']) ?></span> </a> <?php endforeach ?> </div> <!-- Превью товаров справа --> <?php if (!empty($previews)): ?> <div class="megamenu__products"> <div class="megamenu__products-label">Популярные товары</div> <div class="megamenu__products-grid"> <?php foreach ($previews as $product): ?> <a href="<?= htmlspecialchars($product['url']) ?>" class="megamenu__product-card"> <img src="<?= htmlspecialchars($product['image']) ?>" alt="Превью товара в мегаменю" width="120" height="120" loading="lazy"> <span class="megamenu__product-name"> <?= htmlspecialchars($product['name']) ?> </span> </a> <?php endforeach ?> </div> </div> <?php endif ?> </div> </div> <?php endforeach ?> 

CSS לפריסה עם תמונות

.megamenu__dropdown--with-images .megamenu__inner { display: grid; grid-template-columns: 260px 1fr; gap: 0; min-height: 300px; } .megamenu__nav { border-right: 1px solid #eee; padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .megamenu__subcat { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 4px; transition: background 0.15s; text-decoration: none; color: inherit; } .megamenu__subcat:hover, .megamenu__subcat.is-active { background: #f5f7fa; } .megamenu__products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1rem 1.5rem; } .megamenu__product-card { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: inherit; font-size: 0.8125rem; } .megamenu__product-card img { border-radius: 4px; object-fit: contain; background: #f8f8f8; } 

איך להאיץ טעינה עם AJAX ו-Caching

הבעיה העיקרית בתפריטים עם תמונות רבות היא משקל העמוד. אנו פותרים זאת עם caching דו-שכבתי. תמונות סעיף נטענות יחד עם העץ ומאוחסנות ב-cache למשך שעה. מוצרים נטענים דינמית דרך AJAX רק בעת ריחוף על תת-קטגוריה. מטמון התצוגות הוא 30 דקות לכל סעיף.

document.querySelectorAll('.megamenu__subcat').forEach(link => { link.addEventListener('mouseenter', async () => { const sectionId = link.dataset.section; if (link.dataset.loaded) return; const data = await fetch(`/local/ajax/menu-products.php?section=${sectionId}`) .then(r => r.json()); const grid = link.closest('.megamenu__dropdown').querySelector('.megamenu__products-grid'); grid.innerHTML = data.products.map(p => `<a href="${p.url}" class="megamenu__product-card"> <img src="${p.image}" alt="Превью товара в мегаменю" width="120" height="120" loading="lazy"> <span>${p.name}</span> </a>` ).join(''); link.dataset.loaded = '1'; }); }); 

לכל התמונות יש את המאפיין namespace Local\Menu; class SectionProductPreviews { public static function getForSections(array $sectionIds, int $limit = 4): array { if (empty($sectionIds)) return []; $cache = new \CPHPCache(); $cacheId = 'menu_previews_' . md5(implode(',', $sectionIds)); if ($cache->InitCache(3600, $cacheId, '/megamenu/previews/')) { return $cache->GetVars()['previews']; } $result = []; foreach ($sectionIds as $sectionId) { $res = \CIBlockElement::GetList( ['RAND' => 'ASC'], [ 'IBLOCK_ID' => CATALOG_IBLOCK_ID, 'SECTION_ID' => $sectionId, 'ACTIVE' => 'Y', 'PREVIEW_PICTURE' => ['>', 0], ], false, ['nPageSize' => $limit, 'iNumPage' => 1], ['ID', 'NAME', 'PREVIEW_PICTURE', 'DETAIL_PAGE_URL'] ); $items = []; while ($el = $res->GetNext()) { $items[] = [ 'name' => $el['NAME'], 'url' => $el['DETAIL_PAGE_URL'], 'image' => \CFile::ResizeImageGet( $el['PREVIEW_PICTURE'], ['width' => 120, 'height' => 120], BX_RESIZE_IMAGE_PROPORTIONAL )['src'], ]; } $result[$sectionId] = $items; } $cache->StartDataCache(); $cache->EndDataCache(['previews' => $result]); return $result; } } . הדפדפן לא טוען פאנלים נסתרים עד שהמשתמש פותח את התפריט. בנוסף, אנו מגדירים caching מתויג דרך CPHPCache — כאשר סעיף או מוצר משתנה, המטמון מתבטל אוטומטית.

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

• עיצוב: ניתוח ניווט קיים, אב טיפוס של מבנה חדש.
• הגדרת infoblock: הוספת UF_MENU_IMAGE, הגדרות גודל תמונה.
• יישום קומפוננטה: מחלקת SectionProductPreviews עם caching, תבנית CSS Grid.
• טעינת AJAX: endpoint לטעינת תצוגות דינמית.
• התאמה למובייל: media queries, תפריט בורגר.
• בדיקות על נתונים אמיתיים, כולל מדידת מהירות.
• תיעוד: הוראות למילוי תמונות.
• מסירה: גישת אדמין, הדרכה למנהלי תוכן, חודש אחד של תיקוני באגים ותמיכה בחינם.

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

תוצאות ומדדים

לאחר היישום, לקוחות רואים עלייה של 15–20% בהמרות וירידה של 10–15% בשיעור הנטישה. תקופת ההחזר היא 2–4 חודשים. העלות הממוצעת לתפריט מגה מלא עם תמונות מתחילה מ-$1,500. הניסיון שלנו: מעל 50 פרויקטים של Bitrix, כולל קטלוגים עד 100,000 מוצרים. יש לנו 10+ שנות ניסיון בפיתוח Bitrix ו-5+ שנים בהתמחות בתפריטי מגה. אנו מבטיחים תמיכה לאחר המסירה — תיקוני באגים בחינם למשך חודש.

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