Breadcrumbs MODx

Опубликовано: 02.06.2017

Навигационная цепочка «Хлебные крошки» или Breadcrumbs визуально показывает текущее местоположение пользователя на сайта, а также позволяет быстро осуществить переход в предыдущие разделы, что очень удобно. «Хлебные крошки» является весьма удобным инструментом в плане удобства пользования.

В виду того, что у нас в шаблоне предусмотрено данное решение мы приступим к его реализации, для это в MODx у нас имеется специальный сниппет [ [Breadcrumbs]].

Сниппет Breadcrumbs MODx

В нашем шаблоне хлебные крошки представлены в виде ненумерованного списка заключенного в тег div с классом breadcrumb.

Breadcrumbs Modx Revo - создание хлебных крошек на сайте

Давайте заменим кусок этого кода на вызов сниппета [ [Breadcrumbs? &showCrumbsAtHome=`0` &showHomeCrumb=`1` &currentAsLink=`0` ]], здесь осуществляется кэшируемый вызов сниппета с параметрами.

Сохраните шаблон и обновите страницу, вы увидите, что сниппет работает, но у нас съехали стили. Случилось это, потому что наш сниппет генерирует немного другой HTML код.

Build an online shop with Codeigniter - part 56: Breadcrumbs 1

Чтобы все заработало верно, найдите файл layout.css на сервере assets/templates/site/styles/layout.css и откройте его для редактирования, далее находим строки со стилями, которые отвечают за отображение хлебных крошек и меняем их на следующие:

#breadcrumb{padding:20px 0;}

#breadcrumb a{text-decoration:underline;}

#breadcrumb a:hover{text-decoration:none;}

Сохраняем и обновляем страницу в браузере, у нас должно все отображаться корректно.

Чтобы все сделать в рамках хорошего тона, давайте откроем наш шаблон еще раз и скопируем содержимое блока отвечающего за вывод хлебных крошек в шаблоне на вызов чанка { {BREADCRUMBS}} и создадим новый чанк с именем «BREADCRUMBS», в который вставим скопированный код.

Параметры сниппета Breadcrumbs

Теперь давайте познакомимся с параметрами вызова сниппета Breadcrumbs, начнем с тех, которые мы уже использовали: