Хлебные крошки на 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, как сделано в документации. Вот, в принципе, и все!

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

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

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

  1. Роман 25 января 2018, 15:16(Комментарий был изменён) # 0
    А как главная страница выводится у Вас как «Главная» в крошках, но при этом Заголовок страницы не такой.
    <title>Разработка создание сайтов в Перми WEB-студия DART AGENCY - DART AGENCY</title>
    <h1>Разработка сайтов в Перми</h1>
    1. Роман 25 января 2018, 15:25 # 0
      Нашел ответ, может кому пригодится:
      &tplHome=`@INLINE <a href="/">Главная</a>`
      1. саша 03 мая 2018, 11:06 # 0
        спасибо товарищ

    Наши клиенты

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

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

    Контакты

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


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