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

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

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

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

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

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

Данный блок у нас будет служить демонстрацией нашего выпадающего меню на главной странице. Так же нам нужно создать для категорий два 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>

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