FENOM'енальный курс. Часть 3. Хлебные крошки и меню на Fenom.

Дорогие друзья мы с вами приступили непосредственно к разработке и миновали все подготовительные этапы. Вы наверняка заметили, что у нас повторялся один и тот же блок на второстепенных страницах, а именно блок с хлебными крошками. Поэтому я думаю стоит сразу убрать его, чтобы он не мозолил нам глаза. Для этого создадим новый чанк в нашей директории core/elements/chunks/ и назовем его breadcrumbs.tpl. Я для вас подготовил небольшой бонус – этот блок будет с микроразметкой schema.org. Код будет следующий:

<div class="def-section catalog inner">
  <div class="mobile-catalog-but">
	<a href="#" class="catalog-btn">
	  <div class="container">
		Каталог <i class="fa fa-angle-right"></i>
	  </div>
	</a>
  </div>
</div>
<div class="breadcrumbs ">
  <div class="container">
	<nav aria-label="breadcrumb">
	  {$_modx->runSnippet('pdoCrumbs', [
		'showHome' => 1,
		'tpl' => '(a)INLINE <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{$link}" itemprop="item"><span itemprop="name">{$menutitle}</span></a><meta itemprop="position" content="{$idx}" /></li>'
		'tplCurrent' => '(a)INLINE <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{$link}" itemprop="item"><span itemprop="name">{$menutitle}</span></a><meta itemprop="position" content="{$idx}" /></li>'
		'tplWrapper' => '(a)INLINE <ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">{$output}</ol>'
	  ])}
	</nav>
  </div>
</div>
	

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

<div class="def-section catalog inner">
  <div class="mobile-catalog-but">
	<a href="#" class="catalog-btn">
	  <div class="container">
		Каталог <i class="fa fa-angle-right"></i>
	  </div>
	</a>
  </div>
</div>
<div class="breadcrumbs ">
  <div class="container">
	<nav aria-label="breadcrumb">
	  [[pdoCrumbs?
		&showHome=`1`
	  ]]
	</nav>
  </div>
</div>
	

Как видите, переход с MODx шаблонизатора на Fenom вполне реален и прост. Вернувшись к нашим баранам… хлебным крошкам, хочу напомнить, что теперь нам нужно вставить код во все второстепенные шаблоны:

{include 'file:chunks/breadcrumbs.tpl'}
	

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

{extends 'file:templates/index.tpl'}
{block 'content'}
    {include 'file:chunks/breadcrumbs.tpl'}
    <!-- CONTENT -->
    <section class="def-section content">
        <div class="container">
            <h1>{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}</h1>
            {$_modx->resource.content}
        </div>
    </section>
    <!-- / CONTENT -->
{/block}
	

Неплохо, правда? Обратите внимание на конструкцию:

{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}
	

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

Теперь, чтобы нам вывести наше меню, нам необходимо воссоздать примерную структуру каталога и сайта, поэтому стоит этим заняться. У меня получилось как-то так:

Пока я занимался наполнением сайта, я заметил, что у нас у каждой категории товаров в меню на десктопе есть изображение, поэтому нам необходимо создать TV-поле с картинкой. Но значения по умолчанию меня не устраивают (думаю, многие видели, что менеджеры все грузят в корень сайта, да и системные папки их удалить не затруднит), поэтому предлагаю создать новый источник файлов именно под менеджеров сайта. Для этого переходим в “Медиа -> Источники файлов” и кликаем кнопку “Создать новый источник файлов” и заполняем:

• Имя – content
• Тип источника файлов – файловая система

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

• basePath – Путь к файлам источника —
• baseUrl – URL, по которому будет доступен этот источник — assets/files/

Не забываем создать каталог files в папке assets. Если все сделали верно, то увидите следующую картину:

Что ж, предлагаю сделать данный источник файлов по умолчанию для всей панели управления. Для этого переходим в системные настройки и ищем параметр default_media_source, в нем устанавливаем значение content.

После всех этих манипуляции можно смело создавать дополнительное поле с картинками и файлами. Подробно как это сделать я расскажу в видео. А мы с вами тем временем можем вывести наши менюшки в шапке и в футере.

Вызов pdoMenu в основном меню:

<ul class="navs">
	<li>
		<a href="[[~2]]">Каталог <i class="fa fa-angle-down"></i></a>
		{$_modx->runSnippet('pdoMenu', [
			'parents' => 2,
			'level' => 1,
			'includeTVs' => 'menu_image',
			'processTVs' => 1,
			'rowClass' => 'eqh',
			'tpl' => '(a)INLINE <li {$classes}><a href="{$link}" {$attributes}><img src="{$menuimage}" alt="{$menutitle}" title="{$title}"><span>{$menutitle}</span></a></li>'
		])}
	</li>
	{$_modx->runSnippet('pdoMenu', [
		'startId' => 0,
		'level' => 1,
		'resources' => '-2',
		'showHidden' => 0,
		'tplOuter' => '(a)INLINE {$wrapper}'
	])}
</ul>
	

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

<ul class="navbars">
	<li class="mobile-catalog-buts">
		<a href="[[~2]]">Каталог <i class="fa fa-angle-right"></i></a>
	</li>
	{$_modx->runSnippet('pdoMenu', [
		'startId' => 0,
		'level' => 1,
		'resources' => '-2',
		'showHidden' => 0,
		'tplOuter' => '(a)INLINE {$wrapper}'
	])}
</ul>
	

Вывод мобильного каталога:

<div class="mobile-catalog-menu-content">
	{$_modx->runSnippet('pdoMenu', [
		'parents' => 2,
		'level' => 2,
		'tplOuter' => '(a)INLINE <ul class="mobile-vertical-menu-list"><li class="closer"><a href="#"><i class="fa fa-angle-left"></i> Назад</a></li> {$wrapper}</ul>',
		'tpl' => '(a)INLINE <li><a href="[[+link]]" {$attributes}>{$menutitle}</a>{$wrapper}</li>',
		'tplParentRow' => '(a)INLINE <li class="parent"><a href="{$link}" {$attributes}>{$menutitle} <i class="fa fa-angle-right" aria-hidden="true"></i></a>{$wrapper}</li>',
		'tplInner' => '(a)INLINE <ul class="inner_menu"><li class="closer"><a href="#"><i class="fa fa-angle-left"></i> Назад</a></li>{$wrapper}</ul>'
	])}
</div>
	

И блок с менюшками в футере:

<div class="footer-block col-lg-3 col-md-6 col-sm-6">
	<div class="footer-menu">
		<span class="sf_title">Покупателям</span>
		{$_modx->runSnippet('pdoMenu', [
			'parents' => 11
		])}
	</div>
</div>
<div class="footer-block col-lg-3 col-md-6 col-sm-6">
	<div class="footer-menu">
		<span class="sf_title">Информация</span>
		{$_modx->runSnippet('pdoMenu', [
			'parents' => 12
		])}
	</div>
</div>
	

Вот мы с вами и реализовали меню и хлебные крошки на Fenom. Надеюсь, что все было просто и легко).