Хлебные крошки на MODx Revo

В данном уроке мы с вами разберем реализацию хлебных крошек на MODx Revolution. Хлебные крошки названы так по аналогии с действиями, описанными в немецкой сказке “Гензель и Гретель”. Поможет нам в реализации уже установленный нами пакет pdoTools, а точнее сниппет pdoCrumbs. Хлебные крошки будут выводиться у нас только на второстепенных страницах, поэтому часть верстки, отвечающая за данный блок, находится у нас в чанке headerInner. Если внимательно посмотрим, то мы увидим, что хлебные крошки у нас сделаны выпадающими. Я думаю данной идеи мы откажемся (кто хочет реализовать также, советую посмотреть в сторону pdoMenu, его будет достаточно вызвать в чанке с крошкой).

Крошки у нас выглядят следующим образом (я уже убрал выпадайку):

<ul>
	<li class="breadcrumb-item">
		<a href="#">shop by department</a>
	</li>
	<li class="breadcrumb-item current">
		<a href="#">Blog</a>
	</li>
</ul>

Я вывожу их также в отдельный чанк (breadcrumbs). И, посмотрев документацию к pdoCrumbs, вместо списка мы получим вот такой вызов pdoCrumbs:

[[pdoCrumbs?
&showHome=`1`
&tplWrapper=`crumbWrapperTpl`
&tplCurrent=`crumbCurrentTpl`
&tpl=`crumbTpl`
]]

Чанк crumbWrapperTpl:

<ul itemscope itemtype="http://schema.org/BreadcrumbList">[[+output]]</ul>

Чанк crumbCurrentTpl:

<li class="breadcrumb-item current" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="[[+link]]"><span itemprop="name">[[+menutitle]]</span></a></li>

Чанк crumbTpl:

<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="[[+link]]"><span itemprop="name">[[+menutitle]]</span></a></li>

Здесь мы переопределили чанки вывода, поставили такие, какие у нас в разметке и добавил микроразметку "schema.org — BreadcrumbList". Чанки можно также указать с префиксом @INLINE, как сделано в документации. Вот, в принципе, и все!

Автор Петропавловский Артем

Основатель и ведущий разработчик DART Agency. Пишу о разработке, продажах и процессах в IT.