MODX pdoCrumbs — создание хлебных крошек

Сегодня мы реализуем функционал хлебных крошек при помощи сниппета pdoCrumbs который входит в пакет PdoTools. Так же разберемся как внедрить семантическую разметку и как вывести хлебные крошки при помощи шаблонизатора fenom.

Документация по pdoCrumbs

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

Сниппет обладает очень высокой скоростью работы, за счет выборки всех нужных элементов из БД за один запрос.

Параметры

Принимает все параметры pdoTools и некоторые свои:

Шаблоны

Официальные примеры

Генерация хлебных крошек для текущей страницы:

[[pdoCrumbs]]

Генерация в ограничением по количеству пунктов:

[[pdoCrumbs?
    &limit=`2`
]]

Сниппет хорошо работает при вызове из pdoResources. Например, вот такой чанк:

<h3>[[+pagetitle]]</h3>
<p>[[+introtext]]</p>
[[pdoCrumbs?
    &to=`[[+id]]`
    &showCurrent=`0`
]]

Официальная русскоязычная документация: https://docs.modx.pro/komponentyi/pdotools/snippetyi/pdocrumbs.

Пример вывода хлебных крошек из практики

Статичный код крошек, у нас такой.

<!-- ======= Breadcrumbs ======= -->
<section class="breadcrumbs">
	<div class="container">
        <ol>
          <li><a href="index.html">Home</a></li>
          <li>Inner Page</li>
        </ol>
        <h2>Inner Page</h2>
	</div>
</section><!-- End Breadcrumbs -->

Ну вернее в одном из уроков мы превратили его в такой:

<!-- ======= Breadcrumbs ======= -->
<section class="breadcrumbs">
    <div class="container">
        <ol>
          <li><a href="/">Главная</a></li>
          <li>[[*pagetitle]]</li>
        </ol>
        <h2>[[*pagetitle]]</h2>
    </div>
</section>
<!-- End Breadcrumbs -->

<!-- ======= Breadcrumbs ======= -->
<section class="breadcrumbs">
    <div class="container">
        <ol>
          <li><a href="/">Главная</a></li>
          <li>{$_modx->resource.pagetitle}</li>
        </ol>
        <h2>{$_modx->resource.pagetitle}</h2>
    </div>
</section>
<!-- End Breadcrumbs -->

В принципе все хорошо, но нет поддержки уровней выше 3-го, 4-го и т.д. исправим это.

Чтобы не заглядывать в документацию pdoCrumbs, можно взять и перетащить сниппет в место его вывода, увидите окно где можно выбрать и задать нужные параметры, при наведении на них есть подсказки.

В конечном итоге у вас должна получится примерно такая секция:

<section class="breadcrumbs">
    <div class="container">
        [[pdoCrumbs?
        	&tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>`
        	&tplCurrent=`@INLINE <li class="active">[[+menutitle]]</li>`
        	&tplMax=`@INLINE <li class="disabled"> ... </li>`
        	&tplWrapper=`@INLINE <ol>[[+output]]</ol>`
        	&showHome=`1`
        	&hideSingle=`1`
        	&scheme=`full`
        ]]
        <h2>[[*pagetitle]]</h2>
    </div>
</section>

<section class="breadcrumbs">
    <div class="container">
        {'pdoCrumbs' | snippet : [
        	'tpl' => '@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>',
        	'tplCurrent' => '@INLINE <li class="active">[[+menutitle]]</li>',
        	'tplMax' => '@INLINE <li class="disabled"> ... </li>',
        	'tplWrapper' => '@INLINE <ol>[[+output]]</ol>',
        	'showHome' => '1',
        	'hideSingle' => '1',
        	'scheme' => 'full'
        ]}
        <h2>{$_modx->resource.pagetitle}</h2>
    </div>
</section>

Вывод хлебных крошек на всех страницах кроме главной

Удобно для создания универсального шаблона.

И как я говорил ранее внедрять крошки будем в основной шаблон (со сквозными элементами).

Есть несколько вариантов решения данной задачи.

1. Использовать параметр showAtHome=0.

Вся обвертка крошек (она может быть и больше) помещается в tplWrapper, и в вызове указываем  &showAtHome=`0`.

Подходит только для простых крошек, без заголовка страницы как у нас, например если был бы такой код:

<section class="breadcrumbs">
    <div class="container">
        <ol>
            <li><a href="#">Home</a></li>
            <li>Inner Page</li>
        </ol>
    </div>
</section>

То могли его вывести вот так:

[[pdoCrumbs? 
	&tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>` 
	&tplCurrent=`@INLINE <li class="active">[[+menutitle]]</li>` &tplMax=`@INLINE <li class="disabled"> ... </li>` 
	&tplWrapper=`@INLINE <section class="breadcrumbs"><div class="container"><ol>[[+output]]</ol></div></section>` 
	&showHome=`1` 
	&showAtHome=`0` 
	&hideSingle=`1` 
	&scheme=`full` 
]]

Такое решение  не канает, когда в разметке есть TV или прочие параметры как у нас, т.к. tplWrapper понимает только один плейсхолдер: [[+output]], все остальное будет игнорироваться. Т.е. вот такое: &tplWrapper=`@INLINE <section class="breadcrumbs"><div class="container"><ol>[[+output]]</ol><h2>[[+pagetitle]]</h2></div></section>` не поканает.

2. Вынести весь код в чанк, например breadcrumb и затем воспользоваться модификатором is или if.

[[$[[*id:is=`1`:else=`breadcrumb`]]]]

{if $_modx->resource.id != 1}{include 'breadcrumb'}{/if}

Помещаем в чанк tpl.

3. Сделать более замороченный вывод pdoCrumbs

Все нашу разметку можно запихать вот в такой вызов:

[[pdoCrumbs?
	&tpl=`@INLINE <li><a href="[[+link]]">[[+menutitle]]</a></li>`
	&tplWrapper=`@INLINE <section class="breadcrumbs"><div class="container">[[+output]]</div></section>`
	&tplHome=`@INLINE <ol><li><a href="[[+link]]">[[+menutitle]]</a></li>`
	&tplCurrent=`@INLINE <li class="active">[[+menutitle]]</li></ol><h2>[[+pagetitle]]</h2>`
	&scheme=`full`
	&hideSingle=`1`
	&showAtHome=`0`
	&showHome=`1`
	&wrapIfEmpty=`1`
]]

{'pdoCrumbs' | snippet : [
	'tpl' => '@INLINE <li><a href="{$link}">{$menutitle}</a></li>',
	'tplWrapper' => '@INLINE <section class="breadcrumbs"><div class="container">{$output}</div></section>',
	'tplHome' => '@INLINE <ol><li><a href="{$link}">{$menutitle}</a></li>',
	'tplCurrent' => '@INLINE <li class="active">{$menutitle}</li></ol><h2>{$pagetitle}</h2>',
	'scheme' => 'full',
	'hideSingle' => '1',
	'showAtHome' => '0',
	'showHome' => '1',
	'wrapIfEmpty' => '1'
]}

Пример вывода хлебных крошек от bootstrap 5

Их код выглядит так:

А вывод будет таким:

[[pdoCrumbs?
	&tplWrapper=`@INLINE <nav aria-label="breadcrumb"><ol class="breadcrumb">[[+output]]</ol></nav>`
	&tpl=`@INLINE <li class="breadcrumb-item"><a href="[[+link]]">[[+menutitle]]</a></li>`
	&tplCurrent=`@INLINE <li class="breadcrumb-item active" aria-current="page">[[+menutitle]]</li>`
	&showHome=`1`
	&showAtHome=`0`
]]

Семантическая разметка хлебных крошек (BreadcrumbList)

Если вы разрабатываете сайт для себя, то сразу рекомендую заботиться о SEO и внедрить семантическую разметку, она же микроразметка Schema.org. Благодаря ей роботы лучше понимают код и самое главное данная разметка может расширить поисковой сниппет, что повысит его кликабельность.

BreadcrumbList в формате microdata

Пример внедрения микроразметки BreadcrumbList в формате microdata:

[[pdoCrumbs?
	&tplWrapper=`@INLINE <ul class="breadcrumb d-flex justify-content-md-end text-3-5" itemscope itemtype="https://schema.org/BreadcrumbList">[[+output]]</ul>`
	&tpl=`@INLINE <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="[[+link]]" class="text-color-default text-color-hover-primary text-decoration-none"><span itemprop="name">[[+menutitle]]</span></a><meta itemprop="position" content="[[+idx]]"></li>`
	&tplCurrent=`@INLINE <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active"><span itemprop="name">[[+menutitle]]</span><meta itemprop="position" content="[[+idx]]"></li>`
	&showHome=`1`
]]

pdoCrumbs + schema.org + fenom

{'!pdoCrumbs' | snippet : [ 
    'showHome' => 1, 
    'showAtHome' => 0, 
    'tpl' => '@INLINE <li itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a></li>', 
    'tplHome' => '@INLINE <li itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a rel="nofollow" title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a></li>', 
    'tplWrapper' => '@INLINE <ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">{$output}</ol>', 
    'tplCurrent' => '@INLINE <li itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem" class="active"><a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a></li>' 
]}

BreadcrumbList в формате JSON-LD

Для генерации микроразметки BreadcrumbList Schema.org в формате JSON-LD, поместите в секцию head следующий вызов:

{'!pdoCrumbs' | snippet : [
    'showHome' => 1,
    'tplWrapper' => '@INLINE <script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
[ {$output} ]
}
</script>'
    'tplHome' => '@INLINE {
   "@type": "ListItem",
   "position": {$idx},
   "item":
   {
    "@id": "{$link}",
    "name": "{$menutitle}"
    }
  },'
    'tplCurrent' => '@INLINE {
   "@type": "ListItem",
   "position": {$idx},
   "item":
   {
    "@id": "{$link}",
    "name": "{$menutitle}"
    }
  }'
    'tpl' => '@INLINE {
   "@type": "ListItem",
   "position": {$idx},
   "item":
   {
    "@id": "{$link}",
    "name": "{$menutitle}"
    }
  },'
]}

Альтернативный вариант, создайте сниппет, например breadSchema, со следующим содержимым.

<?php
$res = $modx->resource;
$site_url = $modx->getOption('site_url');
$site_start = $modx->getOption('site_start') ?: 1;
$ids = $modx->getParentIds($res->id, 10, array('context' => $modx->context->key));
$pids = ($res->id != $site_start) ? [$res->id] : [];
foreach($ids as $id) {
    if($res->id != $id) {
        $pids[] = $id;    
    }
}
$pids = array_reverse($pids);
$output = [];
$index = 0;
foreach($pids as $id) {
    if ($id == 0) {
        $id = $site_start;
    }
    if($res->id != $id) {
        $res = $modx->getObject('modResource', $id);
    }
    
    $uri = $site_url . $res->get('uri');
    if($res->get('id') == $site_start) {
        $uri = $site_url;
    }
    $output[] = '{
        "@type": "ListItem",
        "position": '.++$index.',
        "name": "'.$res->get('pagetitle').'",
        "item": "'.$uri.'"
    }';
}
$wrapper = implode(',', $output);
return '<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": ['.$wrapper.']
}
</script>';

И затем вызываете его в head.

Проверка микроразметки от validator.schema.org, от google и от яндекс.
Если Вам, что-либо непонятно,  спрашивайте в комментариях, обязательно помогу.

В следующем уроке продолжим работать с PdoTools, будем делать меню при помощи сниппета PdoMenu.