Выводим меню на сайте MODx Revo

Сегодня мы с вами продолжим разработку нашего интернет-магазина на MODx Revo и в данном уроке мы реализуем меню нашего сайта. Смотрите, меню у нас выводится в двух местах:

Меню на сайте MODx Revo miniShop2

На главной странице сайта. Хочу обратить ваше внимание на выпадающий пункт:

Меню на сайте MODx Revo miniShop2

Здесь у нас две колонки и имеется баннер для данной категории товаров. Также меню у нас выводится на внутренних страницах:

Меню на сайте MODx Revo miniShop2

В данных блоках я решил вывести меню только каталога, остальные ресурсы, а именно информационные страницы, мы чуть позже выведем в верхнем блоке.

Итак, для начала я создал одну большую категорию, чтобы вживую проверить как все будет работать. Выглядит она у меня так:

Меню на сайте MODx Revo miniShop2

Данный блок у нас будет служить демонстрацией нашего выпадающего меню на главной странице. Так же нам нужно создать для категорий два TV-параметра:

  • menuactionimage – тип ввода изображение, тип вывода – по-умолчанию
  • menuactionhref – тип ввода текст, тип вывода по умолчанию

При выводе баннера нам нужно предусмотреть такой вариант, что ссылка может быть не указана – это обычное явление.

Ну, что ж подготовка наша закончилась. В нашем выводе мы будем использовать два сниппета из набора pdoTools: pdoMenu и pdoResources.

Начнем с главной страницы. Зайдем в шаблон и найдем данный блок – он отделен комментарием “ TOP NAVIGATION ”. Если мы внимательно посмотрим на наш HTML-код, то увидим, что нам необходимо будет создать чанк для пунктов родителей. В данном случае при выводе мы будем использовать pdoMenu, поэтому в документации мы сможем подсмотреть как это сделать правильно. В данном же чанке у нас должны выводиться два столбца пунктов меню и баннер – не забываем про это. Два столбца меню можно вывести с помощью pdoResources (хотел сделать с помощью pdoMenu, но не сработали параметры offset и limit). Для вывода пунктов внутреннего меню я создал чанк liTpl:

<li><a href="[[~[[+id]]]]">[[+menutitle:default=`[[+pagetitle]]`]]</a></li>

А для pdoMenu чанк tplParentRow (megamenuInnerTpl) у меня получился следующий:

<li class="dropdown menu-item">
  <a href="[[+link]]" class="dropdown-toggle" data-toggle="dropdown" [[+attributes]]>[[+menutitle]]</a>
  <ul class="dropdown-menu mega-menu">
	<li class="yamm-content">
	  <div class="row">
	    [[pdoResources?
		&parents=`[[+id]]`
		&depth=`0`
		&limit=`10`
		&tpl=`liTpl`
		&showLog=`0`
		&sortby=`{"menuindex":"ASC"}`
		&where=`{"class_key":"msCategory"}`
		&tplWrapper=`tplWrapper`
		]]
		[[pdoResources?
		&parents=`[[+id]]`
		&depth=`0`
		&limit=`10`
		&offset=`10`
		&tpl=`liTpl`
		&showLog=`0`
		&sortby=`{"menuindex":"ASC"}`
		&where=`{"class_key":"msCategory"}`
		&tplWrapper=`tplWrapper`
		]]
		<div class="dropdown-banner-holder">
		  <a href="[[+menuactionhref]]"><img alt="" src="[[+menuactionimage]]" /></a>
		</div>
	  </div>
	</li>
  </ul>
</li>

Чанк tplWrapper:

<div class="col-xs-12 col-lg-4"><ul class="list-unstyled">[[+output]]</ul></div>

Я здесь ограничил выборку только категориями miniShop2, сделал cортировку как в админке и предусмотрел наличие баннера и ссылки с него (в данном листинге этого нет, нужно добавить модификатор «ne» — подробно в видео).

И, собственно, сам вызов pdoMenu на шаблоне главной страницы принял следующий вид:

[[pdoMenu?
	&parents=`7`
	&outerClass=`nav`
	&level=`2`
	&where=`{"class_key":"msCategory"}`
	&tplParentRow=`megamenuInnerTpl`
	&includeTVs=`menuactionhref,menuactionimage`
]]

Не забываем про параметр includeTVs. Что ж, меню на главной у нас готово! Поздравляю! Теперь выведем меню на внутренних страницах. Данный блок у нас находится в чанке headerInner и отделен комментариями “ NAVIGATION ”. Данный блок у нас получится достаточно простой и вывод будет иметь вид:

[[pdoMenu?
	&parents=`7`
	&level=`2`
	&sortby=`{"menuindex":"ASC"}`
	&where=`{"class_key":"msCategory"}`
	&outerClass=`nav navbar-nav`
	&tplParentRow=`tplParentRow`
	&innerClass=`dropdown-menu`
]]

Чанк tplParentRow:

<li class="dropdown"><a href="[[+link]]" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>

У нас все получилось! Теперь вы можете выводить меню! Поздравляю! 

Выводим меню на сайте MODx Revo

0 Число голосов: 8
4
5
1
8

Комментарии ()

  1. Василий 06 ноября 2017, 18:38 # 0
    Доброго времени, Артём, дак ведь зачем отдельно при чём два раза добавлять сниппет, если можно просто добавить в сам pdoMenu &element=`pdoResources`?пс: Ваш ученик.
    1. Юрий 20 ноября 2018, 00:08 # 0
      чорт, самый простой пункт и без видео и наперекосяк… я почти у цели, но не могу доделать (((((
      1. Андрей 06 марта 2019, 21:14 # 0
        Когда настраиваешь меню по уроку, всё получается, круто, спасибо вам за тексты и видео, добавлю лишь что я человек далёкий от программирования, был до уроков) Но у меня сбивается стиль на странице категории, меню разлазится вверх, и указывает на ошибку в style.css, на строчку e.preventDefault(), в блоке // Quantity Spinner который мы изменили что-бы в корзине работал ±, интуитивно чувствую что конфликтует вывод корзины и и вывод меню, но как это решить не знаю. Не хватает базы(.Может подскажите как решить, сталкивался кто-нибудь с такой проблемой?
        1. Андрей 06 марта 2019, 21:38 # 0
          «указывает на ошибку в style.css, на строчку e.preventDefault(), в блоке // Quantity Spinner который мы изменили что-бы в корзине работал ±» это я что-то напутал, ошибку указал ниже.
        2. Андрей 06 марта 2019, 21:21(Комментарий был изменён) # 0
          Вот что пишет:div class=«collapse navbar-collapse» id=«mc-horizontal-menu-collapse»
          1. Андрей 07 марта 2019, 06:48 # 0
            Ура! Всё получилось)
            1. Іван Тіперчук 13 мая 2020, 22:51 # 0
              Все прекрасно но почему вы забросили проект?
              1. Петропавловский Артем 15 мая 2020, 09:07 # 0
                Проект не заброшен. В силу большой занятости нет времени писать новый контент. Возможно, что через некоторое время напишу несколько коротеньких HOWTO статей.
              2. Олег Герасимов 11 января 2022, 17:59 # 0
                Доброго вечера Артем, возможно ли на pdoMenu реализовать меню с разными выпадающими списками?Выпадающий список для категорий товаров скриншот: prntscr.com/26chgkyВыпадающий список для ресурсов, услуг, блога, к примеру: prntscr.com/26chgnpТак понимаю, у pdoMenu чанки только на 1 выпадающий.

                Наши клиенты

                Многие компании уже доверяют нам. Будьте в их числе!

                Хотите реализовать проект?

                Контакты

                Напишите нам - мы расскажем вам много интересного!


                Пермь, ул. Крупской 34, офис 510