Ну что ж, дождались. Сегодня я попробовала реализовать многоуровневое меню на сайте wix. Напоминаю, что я далеко не программист. А если получилось у меня, значит 100% получится и у вас. Функция актуальна, когда у нас 3 и более уровней вложенности страниц. Ну и для интернет-магазинов, я считаю, это просто must have.
В моем примере добавлено раскрывающееся меню, которое позволяет посетителям сайта легко перемещаться по различным категориям. Например, в категории МУЖЧИНЫ есть подкатегория "ОБУВЬ". В этой подкатегории посетители могут так же фильтровать товары.
Как создать меню с помощью кода
Коллекции
Для этого примера я создала следующие коллекции: mainMenu — содержит имена, которые отображаются на каждой метке кнопки главного меню. subMenu — содержит имена, которые отображаются на каждой метке кнопки подменю. Каждый элемент подменю указывает, к какому пункту главного меню он относится. productMenu — содержит информацию о товарах. Каждый элемент ссылается на элемент подменю, которому он принадлежит. newMenu — коллекция товаров, но для новых продуктов. rangeMenu — коллекция диапазона продуктов.
Элементы страницы
На нашем сайте я добавила следующие повторители, составляющие меню: mainMenuRepeater - для кнопок главного меню. subMenuRepeater - для кнопок подменю. productRepeater - для отображения продуктов, принадлежащих элементу подменю. rangeRepeater - для отображения ассортиментов товаров, принадлежащих элементу подменю. newRepeater - для отображения новых продуктов, принадлежащих элементу подменю.
Backend код
В data.jsw я сделала 2 вещи: Определила имена меню — фактическое определение в этом единственном месте, а затем использовала данные в общем виде для остального кода сайта. Получение данных для меню из сохраненных коллекций и возврат этих данных на сторону клиента.
Код на странице
Я добавила следующий код страницы для создания мегаменю: iniPage — вызывает внутреннюю функцию для запроса всех данных меню. connectDataToRepeatersItems: переберирает все повторители и реализует функциональность каждого из них, например заполнение изображениями и установку ссылки на кнопку. Функция selectMenu: Определяет различные состояния кнопок и данные повторителей в зависимости от того, какой пункт меню был нажат. Возвращает отфильтрованные данные, чтобы включить только информацию, относящуюся к текущему выбору.
Код для страницы
data.jsw