Многоуровневое меню на сайте Wix с помощью кода

Ну что ж, дождались. Сегодня я попробовала реализовать многоуровневое меню на сайте wix. Напоминаю, что я далеко не программист. А если получилось у меня, значит 100% получится и у вас. Функция актуальна, когда у нас 3 и более уровней вложенности страниц. Ну и для интернет-магазинов, я считаю, это просто must have.

Многоуровневое меню на сайте Wix с помощью кода

В моем примере добавлено раскрывающееся меню, которое позволяет посетителям сайта легко перемещаться по различным категориям. Например, в категории МУЖЧИНЫ есть подкатегория "ОБУВЬ". В этой подкатегории посетители могут так же фильтровать товары.


Как создать меню с помощью кода


Коллекции

Для этого примера я создала следующие коллекции: mainMenu — содержит имена, которые отображаются на каждой метке кнопки главного меню. subMenu — содержит имена, которые отображаются на каждой метке кнопки подменю. Каждый элемент подменю указывает, к какому пункту главного меню он относится. productMenu — содержит информацию о товарах. Каждый элемент ссылается на элемент подменю, которому он принадлежит. newMenu — коллекция товаров, но для новых продуктов. rangeMenu — коллекция диапазона продуктов.


Коллекция для создания мега меню в wix

Элементы страницы

На нашем сайте я добавила следующие повторители, составляющие меню: mainMenuRepeater - для кнопок главного меню. subMenuRepeater - для кнопок подменю. productRepeater - для отображения продуктов, принадлежащих элементу подменю. rangeRepeater - для отображения ассортиментов товаров, принадлежащих элементу подменю. newRepeater - для отображения новых продуктов, принадлежащих элементу подменю.


репитер на сайте wix

Backend код

В data.jsw я сделала 2 вещи: Определила имена меню — фактическое определение в этом единственном месте, а затем использовала данные в общем виде для остального кода сайта. Получение данных для меню из сохраненных коллекций и возврат этих данных на сторону клиента.


Backend код на викс

Код на странице

Я добавила следующий код страницы для создания мегаменю: iniPage — вызывает внутреннюю функцию для запроса всех данных меню. connectDataToRepeatersItems: переберирает все повторители и реализует функциональность каждого из них, например заполнение изображениями и установку ссылки на кнопку. Функция selectMenu: Определяет различные состояния кнопок и данные повторителей в зависимости от того, какой пункт меню был нажат. Возвращает отфильтрованные данные, чтобы включить только информацию, относящуюся к текущему выбору.


Код для страницы

data.jsw