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

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

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

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


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


Коллекции

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


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

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

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


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

Backend код

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