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

01.02.2019
12310
Шаблон MAGAZINE вы можете скачать по ссылке. Файлы и дамп БД наполненного на этот момент сайта можете скачать по ссылке.
Админка: /dart/
Логин: admin
Пароль: 00000000

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

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

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

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

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

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

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

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

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

Что ж, предлагаю сделать данный источник файлов по умолчанию для всей панели управления. Для этого переходим в системные настройки и ищем параметр 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. Надеюсь, что все было просто и легко).

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

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

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

  1. Ольга 14 мая 2019, 14:04 # 0
    Здравствуйте! Поправьте, пожалуйста, в выводе мобильного каталога [[+link]] на {$link}. У меня выводил меню с ошибкой
    1. Никита 06 ноября 2019, 18:41 # 0
      Добрый день.Ошибка 500 при установке Вашего магазина-шаблон. Все заменил где только можно. Все пути проверил. Что еще может быть?Как правильно и быстро перенести?Благодарю!
      1. ZZ 12 декабря 2019, 10:16 # 0
        Тоже самое, сайт открывается, а при попытке зайти в админку /dart error 500
        1. Петропавловский Артем 12 декабря 2019, 11:23 # 0
          Инструкция по разворачиванию сайта на MODX:
          1. Распаковать архив с сайтом на сервер (в роли сервера может выступать хостинг, локальный сервер и т.д.) в корневую папку (например, в папку public_html)
          2. Импортировать базу данных (файл *.sql) в вашу СУБД (напр.: MySQL)
          3. Изменить пути к каталогам и указать параметры для подключения к базе данных. В указанных файлах изменить путь к файлам:
          • public_html\config.core.php
          • public_html\con3ktorz\config.core.php
          • public_html\dart\config.core.php
          В указанном ниже файле изменить пути в 6 местах и изменить параметры доступа к базе данных:
          • public_html\core\config\config.inc.php
          4. Кроме того, нужно очистить папку /core/cache/ полностью.
          Если же вы пишите про ошибку 500, то неплохо бы приложить запись из логов PHP.
          1. ZZ 16 декабря 2019, 10:36(Комментарий был изменён) # 0
            забыл про 1 из файлов конфигов… сейчас смог зайти в меню логина в админку, но при авторизации бросает на 500. В логах что-то связанное со smarty compiler
            thrown in /var/www/modxtest/core/model/smarty/sysplugins/smarty_internal_templatecompilerbase.php on line 118" while reading response header from upstream, client: 192.168.0.234, server: modxtest.ru, request: "GET /dart/ HTTP/1.1", upstream: "fastcgi://unix:/run/php/php7.0-fpm.sock:", host: "modxtest.ru", referrer: "http://modxtest.ru/dart/"
            2019/12/16 11:21:26 [error] 27096#27096: *29468 FastCGI sent in stderr: "PHP message: PHP Fatal error:  Uncaught  --> Smarty Compiler: Syntax error in template "eval:<li id="limenu-site" class="top"> <a hre..."  on line 118 "});{/literal} ">Завершить все сеансы<span class="description">Завершить все сеансы работы пользователей и произвести принудительный выход из системы всех пользователей</span>"  - Unexpected " MODx.msg.confirm({
                title: _('flush_sessions')
                ,text: _('flush_sessions_confirm')
                ,url: MODx.config.connector_url
                ,params: {
                    action: 'security/flush'
                }
                ,listeners: {
                    'success': {fn:function() { location.href = './'; },scope:this}
                }
            });", expected one of: LITERALEND <-- 
            1. Александр 20 марта 2020, 15:18 # 0
              Артем, а можно попросить Вас сделать урок по переносу файлов? Я вот прямо встрял на этом этапе с вашими уроками. Спасибо!
          2. Просто автор 02 января 2020, 19:56 # 0
            Очень информативные уроки, автору спасибо. Не хотел писать сам код, скопировал pdoMenu, вставил, вместо меню массив вывело ))) Нужно вместо:'tplOuter' => '(a)INLINE {$wrapper}''tplOuter' => '@INLINE {$wrapper}'Знак @ собаки. Кто столкнется с данной проблемой, решение простое
            1. Артём 05 мая 2020, 13:50 # 0
              выручил))))
            2. Анатолий 25 марта 2020, 20:57 # 0
              Код breadcrumb с микроразметкой schema.org не работает.
              1. Александр 29 апреля 2020, 14:26(Комментарий был изменён) # 0
                Артем, добрый день!Поправьте, пожалуйста, в коде чанка breadcrumbs.tpl вызов 'pdoCrumbs',там нужны двойные квадратные скобки:{$_modx->runSnippet('pdoCrumbs', [[… ]])}
                1. Денис 30 июля 2020, 10:03 # 0
                  Добрый день Артем! После создания нового источника файлов, не показывает превью картинок в админка, что может быть?
                  1. Ян 01 марта 2021, 13:36 # 0
                    Удалось ли решить проблему превью?
                  2. Ян 01 марта 2021, 13:33(Комментарий был изменён) # 0
                    Аналогичная проблема. Согласно инструкции (текстовой и видео) прошел все этапы сознания источника файлов Content и menu_imageПри выборе картинки не отображается превью. Поиски решения: 1. При выставлении источником фалов Filesystem превью есть, но путь соответственно от корня. 2. При вставлении у Content пустого Base_path превью есть, но путь также от корня. Заставить работать источник Content с изображением как в уроке не удалось. Использовал ваш шаблон и дамп базы. Гугл поиск решить проблему не смог
                    1. Ян 01 марта 2021, 16:12 # 0
                      решено: Системные настройки -> Панель управления -> modx_browser_tree_hide_tooltips -> нет
                    2. Vlad 21 июля 2021, 15:44 # 0
                      Спасибо за уроки. Вопрос, как сделать чтобы при попадании в категорию «вываливался» список с подкатегориями.Т.е. как на тестовом сайте, зашёл в снегоходы, а мам можно выбрать подкатегорию. Спасибо

                      Наши клиенты

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

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

                      Контакты

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


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