b_uts_megamenu_banner ├── UF_SECTION_ID — раздел каталога (b_iblock_section.ID) ├── UF_IMAGE — изображение баннера (b_file.ID) ├── UF_TITLE — заголовок (опционально) ├── UF_SUBTITLE — подзаголовок ├── UF_LINK — URL клика ├── UF_ACTIVE_FROM — начало показа ├── UF_ACTIVE_TO — конец показа ├── UF_SORT — порядок сортировки └── UF_ACTIVE — активность 

המנהל יכול לשנות באנרים מחלק הניהול של ה-HL-block ללא מעורבות מפתח.

טעינת באנרים ומוצרים מוזלים

namespace Local\Menu; use Bitrix\Highloadblock\HighloadBlockTable; use Bitrix\Main\Type\DateTime; use Bitrix\Main\Application; class MegaMenuBannerRepository { public static function getForSections(array $sectionIds): array { if (empty($sectionIds)) return []; $hlBlock = HighloadBlockTable::getById(MEGAMENU_BANNER_HLBLOCK_ID)->fetch(); $entity = HighloadBlockTable::compileEntity($hlBlock); $dataClass = $entity->getDataClass(); $now = new DateTime(); $res = $dataClass::getList([ 'filter' => [ 'UF_SECTION_ID' => $sectionIds, 'UF_ACTIVE' => true, [ 'LOGIC' => 'OR', ['<=UF_ACTIVE_FROM' => $now, '>=UF_ACTIVE_TO' => $now], ['UF_ACTIVE_FROM' => false], ], ], 'order' => ['UF_SECTION_ID' => 'ASC', 'UF_SORT' => 'ASC'], 'select' => ['UF_SECTION_ID', 'UF_IMAGE', 'UF_TITLE', 'UF_SUBTITLE', 'UF_LINK'], ]); $result = []; while ($row = $res->fetch()) { $sectionId = $row['UF_SECTION_ID']; if (!isset($result[$sectionId])) { $result[$sectionId] = []; } $row['UF_IMAGE_SRC'] = \CFile::ResizeImageGet( $row['UF_IMAGE'], ['width' => 280, 'height' => 180], BX_RESIZE_IMAGE_EXACT )['src'] ?? null; $result[$sectionId][] = $row; } return $result; } public static function getDiscountedProducts(int $sectionId, int $limit = 4): array { $conn = Application::getConnection(); $result = $conn->query(" SELECT be.ID, be.NAME, be.DETAIL_PAGE_URL, be.PREVIEW_PICTURE, base_p.PRICE AS price, sale_p.PRICE AS sale_price FROM b_iblock_element be JOIN b_iblock_section_element bse ON bse.IBLOCK_ELEMENT_ID = be.ID JOIN b_catalog_price base_p ON base_p.PRODUCT_ID = be.ID AND base_p.CATALOG_GROUP_ID = 1 JOIN b_catalog_price sale_p ON sale_p.PRODUCT_ID = be.ID AND sale_p.CATALOG_GROUP_ID = 2 -- группа «Акционная цена» WHERE bse.IBLOCK_SECTION_ID = {$sectionId} AND be.IBLOCK_ID = " . CATALOG_IBLOCK_ID . " AND be.ACTIVE = 'Y' AND sale_p.PRICE < base_p.PRICE ORDER BY (base_p.PRICE - sale_p.PRICE) / base_p.PRICE DESC LIMIT {$limit} "); $products = []; while ($row = $result->fetch()) { $row['DISCOUNT_PCT'] = round( ($row['price'] - $row['sale_price']) / $row['price'] * 100 ); $row['IMAGE_SRC'] = $row['PREVIEW_PICTURE'] ? \CFile::ResizeImageGet($row['PREVIEW_PICTURE'], ['width' => 100, 'height' => 100], BX_RESIZE_IMAGE_PROPORTIONAL)['src'] : null; $products[] = $row; } return $products; } } 

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

<div class="megamenu__dropdown"> <div class="megamenu__inner megamenu__inner--with-promo"> <!-- Навигация по подкатегориям --> <div class="megamenu__nav"> <?php foreach ($category['children'] as $sub): ?> <a href="<?= htmlspecialchars($sub['SECTION_PAGE_URL']) ?>" class="megamenu__subcat"> <?= htmlspecialchars($sub['NAME']) ?> </a> <?php endforeach ?> </div> <!-- Акционные товары --> <?php if (!empty($discounted[$category['ID']])): ?> <div class="megamenu__sales"> <div class="megamenu__section-title">Скидки в разделе</div> <?php foreach ($discounted[$category['ID']] as $product): ?> <a href="<?= htmlspecialchars($product['DETAIL_PAGE_URL']) ?>" class="megamenu__sale-item"> <?php if ($product['IMAGE_SRC']): ?> <img src="<?= $product['IMAGE_SRC'] ?>" alt="" width="56" height="56"> <?php endif ?> <div> <div class="megamenu__sale-name"><?= htmlspecialchars($product['NAME']) ?></div> <div class="megamenu__sale-prices"> <span class="old"><?= number_format($product['price'], 0, '', ' ') ?> $</span> <span class="new"><?= number_format($product['sale_price'], 0, '', ' ') ?> $</span> <span class="badge">-<?= $product['DISCOUNT_PCT'] ?>%</span> </div> </div> </a> <?php endforeach ?> </div> <?php endif ?> <!-- Баннер --> <?php $banners = $menuBanners[$category['ID']] ?? [] ?> <?php if (!empty($banners[0]) && $banners[0]['UF_IMAGE_SRC']): ?> <div class="megamenu__banner"> <a href="<?= htmlspecialchars($banners[0]['UF_LINK']) ?>"> <img src="<?= $banners[0]['UF_IMAGE_SRC'] ?>" alt="<?= htmlspecialchars($banners[0]['UF_TITLE'] ?? '') ?>" width="280" height="180" loading="lazy"> <?php if ($banners[0]['UF_TITLE']): ?> <div class="megamenu__banner-title"> <?= htmlspecialchars($banners[0]['UF_TITLE']) ?> </div> <?php endif ?> </a> </div> <?php endif ?> </div> </div> 

שימו לב: תמונת הבאנר כוללת מאפיין alt עם הכותרת, מה שמשפר SEO ונגישות.

CSS Grid לפריסת שלוש עמודות

.megamenu__inner--with-promo { display: grid; grid-template-columns: 220px 1fr 300px; min-height: 320px; } .megamenu__sales { padding: 1rem 1.5rem; border-right: 1px solid #eee; } .megamenu__sale-item { display: flex; gap: 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid #f0f0f0; text-decoration: none; color: inherit; transition: background 0.1s; } .megamenu__sale-prices .old { text-decoration: line-through; color: #999; font-size: 0.75rem; } .megamenu__sale-prices .new { font-weight: 600; color: var(--color-sale); } .megamenu__banner { position: relative; overflow: hidden; } .megamenu__banner img { width: 100%; height: 100%; object-fit: cover; display: block; } .megamenu__banner-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; font-weight: 600; } 

מטמון ועדכונים בעת שינוי מבצעים

באנרים והנחות נשמרים במטמון למשך 30 דקות (מבצעים משתנים בתדירות גבוהה יותר ממבנה הסעיפים). פסילת המטמון מתרחשת בעת שמירת ה-HL-block:

AddEventHandler('main', 'OnAfterHLBlockElementAdd', '\Local\Menu\MegaMenuCache::clear'); AddEventHandler('main', 'OnAfterHLBlockElementUpdate', '\Local\Menu\MegaMenuCache::clear'); 

תהליך: איך אנחנו מגדירים תפריט מגה עם באנרים

1. יצירת ה-HL-block b_uts_megamenu_banner ├── UF_SECTION_ID — раздел каталога (b_iblock_section.ID) ├── UF_IMAGE — изображение баннера (b_file.ID) ├── UF_TITLE — заголовок (опционально) ├── UF_SUBTITLE — подзаголовок ├── UF_LINK — URL клика ├── UF_ACTIVE_FROM — начало показа ├── UF_ACTIVE_TO — конец показа ├── UF_SORT — порядок сортировки └── UF_ACTIVE — активность עם השדות כמתואר לעיל.
2. הוספת ה-namespace Local\Menu; use Bitrix\Highloadblock\HighloadBlockTable; use Bitrix\Main\Type\DateTime; use Bitrix\Main\Application; class MegaMenuBannerRepository { public static function getForSections(array $sectionIds): array { if (empty($sectionIds)) return []; $hlBlock = HighloadBlockTable::getById(MEGAMENU_BANNER_HLBLOCK_ID)->fetch(); $entity = HighloadBlockTable::compileEntity($hlBlock); $dataClass = $entity->getDataClass(); $now = new DateTime(); $res = $dataClass::getList([ 'filter' => [ 'UF_SECTION_ID' => $sectionIds, 'UF_ACTIVE' => true, [ 'LOGIC' => 'OR', ['<=UF_ACTIVE_FROM' => $now, '>=UF_ACTIVE_TO' => $now], ['UF_ACTIVE_FROM' => false], ], ], 'order' => ['UF_SECTION_ID' => 'ASC', 'UF_SORT' => 'ASC'], 'select' => ['UF_SECTION_ID', 'UF_IMAGE', 'UF_TITLE', 'UF_SUBTITLE', 'UF_LINK'], ]); $result = []; while ($row = $res->fetch()) { $sectionId = $row['UF_SECTION_ID']; if (!isset($result[$sectionId])) { $result[$sectionId] = []; } $row['UF_IMAGE_SRC'] = \CFile::ResizeImageGet( $row['UF_IMAGE'], ['width' => 280, 'height' => 180], BX_RESIZE_IMAGE_EXACT )['src'] ?? null; $result[$sectionId][] = $row; } return $result; } public static function getDiscountedProducts(int $sectionId, int $limit = 4): array { $conn = Application::getConnection(); $result = $conn->query(" SELECT be.ID, be.NAME, be.DETAIL_PAGE_URL, be.PREVIEW_PICTURE, base_p.PRICE AS price, sale_p.PRICE AS sale_price FROM b_iblock_element be JOIN b_iblock_section_element bse ON bse.IBLOCK_ELEMENT_ID = be.ID JOIN b_catalog_price base_p ON base_p.PRODUCT_ID = be.ID AND base_p.CATALOG_GROUP_ID = 1 JOIN b_catalog_price sale_p ON sale_p.PRODUCT_ID = be.ID AND sale_p.CATALOG_GROUP_ID = 2 -- группа «Акционная цена» WHERE bse.IBLOCK_SECTION_ID = {$sectionId} AND be.IBLOCK_ID = " . CATALOG_IBLOCK_ID . " AND be.ACTIVE = 'Y' AND sale_p.PRICE < base_p.PRICE ORDER BY (base_p.PRICE - sale_p.PRICE) / base_p.PRICE DESC LIMIT {$limit} "); $products = []; while ($row = $result->fetch()) { $row['DISCOUNT_PCT'] = round( ($row['price'] - $row['sale_price']) / $row['price'] * 100 ); $row['IMAGE_SRC'] = $row['PREVIEW_PICTURE'] ? \CFile::ResizeImageGet($row['PREVIEW_PICTURE'], ['width' => 100, 'height' => 100], BX_RESIZE_IMAGE_PROPORTIONAL)['src'] : null; $products[] = $row; } return $products; } } לפרויקט שלכם.
3. בתבנית התפריט, הצגת באנרים ומוצרים מוזלים לפי התבנית.
4. הגדרת CSS grid לפריסת שלוש עמודות.
5. הגדרת מטמון עם פסילה על אירועי HL-block.
6. בדיקת עומס: הפתרון שלנו נטען בפחות מ-0.3 שניות.

לוחות זמנים

טעויות נפוצות

• התעלמות מפסילת מטמון: ללא ניקוי המטמון בעת שינוי באנרים, משתמשים רואים מבצעים מיושנים. הירשמו לאירועי HL-block.
• מאפייני alt חסרים על באנרים: זה פוגע ב-SEO ובנגישות. השתמשו בכותרת הבאנר כטקסט ה-alt.
• שאילתת SQL שגויה להנחות: ודאו שסוג המחיר 'מחיר מבצע' (CATALOG_GROUP_ID = 2) קיים ושהמחירים אכן נמוכים מהמחיר הבסיסי.
• יותר מדי מוצרים מוזלים: מגבלה של 4 פריטים היא אופטימלית למהירות טעינה ולתפיסת המשתמש.

מה כלול

אנחנו מספקים חבילה מלאה של תיעוד וקוד:

• HL-block של MegaMenuBanner עם הגדרות שדות וסינון תאריכים
• מאגר PHP לאחזור באנרים ומוצרים מוזלים
• תבנית תפריט מגה עם פריסה רספונסיבית (CSS Grid)
• אינטגרציה עם הקטלוג — בחירה אוטומטית של פריטים מוזלים
• מטמון עם פסילה בעת שינויים
• הוראות למנהל לניהול באנרים
• תמיכה לאחר ההשקה: 30 ימים של ייעוץ חינם

למה הגישה הזו עובדת

תפריט רגיל מציג רק קישורים. תפריט המגה שלנו מציג באנר פרסומי וכרטיסי מוצרים מוזלים בעמודה הימנית. המשתמש רואה מבצעים מיד ללא יציאה מהניווט. לפי הנתונים שלנו, גישה זו מגדילה את שיעורי הקליקים על באנרים ב-40–60% בהשוואה לשטחי פרסום נפרדים. תפריטי מגה עם באנרים עולים על תפריטים רגילים פי 1.5 בהמרות.

לצוות שלנו ניסיון של למעלה מ-5 שנים בפיתוח 1C-Bitrix. יישמנו 30+ פרויקטים של תפריטי מגה עם באנרים עבור חנויות מקוונות. כל הפתרונות עוברים בדיקות עומס: התפריט חייב להיטען בפחות מ-0.3 שניות. אם מתעוררות בעיות לאחר ההטמעה, אנחנו זמינים.

צרו קשר להערכת הפרויקט שלכם. נייעץ לכם על אינטגרציה המותאמת לקטלוג שלכם.