Вітання! І так, продовжуємо розрулювати тему "Бітрікс". І сьогодні подивимося як насправді відбувається створення меню на Бітрікс. Як це не дивно, але без невеликого багажу знань і хитрощів цей процес може викликати труднощі у багатьох обивателів, які вирішили що Бітрікс їм по зубах :)
Що саме будемо робити в цьому уроці?
Створимо на сайті 3 типи меню:
Верхнє - тип top (файли з ім'ям .top.menu.php)
Верхнє 2 і 3 рівня - тип subtop (файли з ім'ям .subtop.menu.php)
Нижня - тип bottom (файли з ім'ям .bottom.menu.php)
Верхнє меню буде успадковуватися з розділів і буде багаторівневим. Нижня ж меню буде звичайним однорівневим меню, що лежить в корені.
Зроблю невеличкий екскурс. Так як практично вся робота Бітрікс (обробка даних і їх висновок) заснована на різних компонентах, то варто пояснити з чим ми маємо справу в даному уроці.
- Горизонтальне багаторівневе меню, що випадає (Яскравий) (horizontal_multilevel);
- Ліве меню (Яскравий) (left);
- Вертикальне меню за замовчуванням (Вбудований шаблон) (.default);
- Блакитне меню у вигляді закладок (Вбудований шаблон) (blue_tabs);
- Сіре меню у вигляді закладок (Вбудований шаблон) (grey_tabs);
- Деревоподібне меню (Вбудований шаблон) (tree);
- Вертикальне багаторівневе меню, що випадає (Вбудований шаблон) (vertical_multilevel).
Трохи про параметри, які ви бачите в прикладі виклику компонента.
ROOT_MENU_TYPE - Тип меню для першого рівня. Вказується тип меню верхнього рівня, який відповідає цьому меню.
MAX_LEVEL - Рівень вкладеності меню. В налаштуваннях компонента в випадаючому списку можна вибрати рівень вкладеності. Доступно чотири рівні. Чим більше число, тим пункти більш низьких рівнів будуть відображені.
CHILD_MENU_TYPE - Тип меню для інших рівнів. Тут вказуємо тип меню для меню нижніх рівнів.
USE_EXT [Y | N] - Дає можливість підключати файли з іменами виду .тіп_меню.menu_ext.php. Подібні файли нам дуже знадобляться коли доведеться склеювати воєдино потрібні статичні елементи меню і динамічно згенеровані пункти.
DELAY [Y | N] - Відкладає виконання шаблону меню. При зазначеної опції виконання шаблону буде відбуватися після завантаження сторінки. Дуже зручний при включеному кешуванні компонента, якщо потрібно все ж виконувати якісь дії по модифікації зовнішнього вигляду пунктів меню в залежності від поточної сторінки. Наприклад, додавання пунктів меню в компонентах.
ALLOW_MULTI_SELECT [Y | N] - Дозволити кілька активних пунктів одночасно.
CACHE_TYPE - Тип кешірованія.Варіанти:
- A - Авто: автоматично оновлює кеш компонентів протягом заданого часу;
- Y - Кешувати: для кешування необхідно визначити час кешування;
- N - Чи не кешувати: кешування немає в будь-якому випадку.
MENU_CACHE_TIME - Час кешування. Здається в секундах.
MENU_CACHE_USE_GROUPS - Враховувати права доступу. При кешуванні будуть враховуватися права доступу користувача до тих чи інших пунктів меню. Якщо меню побудовано без урахування прав доступу, прапорець краще зняти - це зменшить розмір кеша.
MENU_CACHE_GET_VARS - Значні змінні запиту. Якщо відображення меню залежить від параметрів сторінки, то при використанні кешування необхідно вказати параметри в цьому полі. Параметри вводяться через кому.
Стандартний набір параметрів вражає, правда?)
Перейдемо безпосередньо до коду!
Верхнє меню буде успадковуватися з розділів і буде багаторівневим. Нижнє меню буде звичайним однорівневим меню, що лежить в корені. Створимо в корені файлової системи меню. Це можна зробити через адміністративний розділ, або ж просто створити файл з ім'ям .ТІП_МЕНЮ.menu.php такого змісту (приклад для файлу меню типу top):
Якщо наприклад потрібно створити вкладені пункти в пункті About в верхньому меню, можна скористатися архітектурою 1С-Бітрікс і створити розділи / about / і / about / profile /, а так само по меню типу "top" в кожному з них (поки не будемо створювати сторінок, тільки файлову структуру розділів і меню).
Далі треба розмістити сам компонент меню bitrix: menu на тестовій сторінці або ж де-небудь в шаблоні, наприклад в footer.php або header.php, надалі будемо працювати з ним.
Раджу почати з нижнього меню, воно простіше і дозволить гарненько вивчити і зрозуміти логіку роботи компонента. Скористаємося шаблоном .default (він є в стандартній зборці) і задамо для роботи компонента меню типу "bottom" (нижня):
Цей код вам вже знайомий з прикладу виклику компонента, який ми розглядали вище. Так як у Бітрікс шаблони компонентів спочатку лежать в папках з компонентами, краще скопіювати оригінальний дефолтний шаблон в папку з конкретним загальним шаблоном нашого сайту, це треба робити як мінімум для того щоб не псувати шаблон ядра компонента і щоб всі наші напрацювання не злетіли при першому ж оновленні системи. Тому скопіюємо шаблон компонента під ім'ям "bottom" в шаблон сайту. Хоч це дуже лаконічний шаблон, з метою навчання ми не візьмемо від нього практично нічого:
У цьому коді ви можете познайомиться зі своїм другом, який буде вас переслідувати на всіх етапах розробки на Бітрікс, це суперглобальний масив $ arResult. У ньому зберігається все, що може вам знадобиться в процесі створення сайту, а то що ви там не знайдете можна в будь-який момент підключити або вибрати з бази завдяки диво-файлу result_modifier.php. який знаходиться в папці шаблону кожного компонента.Еслі в початкової збірці ви його не виявили нічого страшного, його завжди можна створити і використовувати на свій розсуд.
Створюється цей файл ще й для того, щоб відокремити логіку від верстки, тобто обробивши всю логіку в файлі result_modifier.php всі отримані дані будуть доступні для виведення в шаблоні компонента (файл template.php).
Давайте зробимо "вардамп" наших елементів і подивимося, що за параметри нам надасть масив $ arResult.
Поставимо цей код відразу після початку циклу і збережемо шаблон. Основне, на що нам треба звернути увагу, це параметри:
Параметр [SELECTED] не пустили тоді, коли пункт меню відповідає нашому місцезнаходженням в структурі сайту, тобто коли пункт вибраний. Значить, ми легко можемо використовувати його для виведення потрібного нам стилю, наприклад:
Параметр [ITEM_INDEX] відображає номер пункту меню в масиві. Вся хитрість в тому, що ми можемо використовувати його для проставляння роздільників між головними пунктами меню. Злегка підкоригуємо верстку і виведемо роздільник наступним кодом:
У підсумку, на даному етапі, з'єднавши всі в купу, шаблон компонента меню буде виглядати так:
Також ми сміливо можемо видалити зайві файли, який нам дісталися при копіюванні оригінального шаблону .default.
Тепер розміщуємо виклик компонента нижнього меню замість статики в шаблоні, яку я вказував раніше. Не забуваємо вказувати тип і час кешування, якщо звичайно воно вам треба :)
Вуаля!) Просте нижнє меню готове, причому ми встигли зробити роздільники між пунктами, а також зробили можливість виділяти активний пункт, зайняло це всього дві строчки коду, тому все дуже швидко і зручно, головне зрозуміти логіку роботи компонента.
Чекайте скоро продовження - реалізацію динамічного верхнього меню і підписуйтесь на нас в соцмережах :) Буде дуже цікаво!