Сниппет "Хлебные крошки"

Не знаете, как показать навигационную цепочку - вот вам лёгкий фрагмент кода.

"Хлебные крошки" или навигационная цепочка - элемент навигации на веб странице, представляющий собой путь от корня сайта до текущей страницы, в котором все звенья пути (обычно кроме последнего) являются ссылками на страницы звеньев. В силу целей сайта существуют подходы к полноте отображения хлебных крошек. Рассмотрим, как выводить их в интернет магазине.

Сразу оговоримся, все примеры записаны в элементарной разметке, без классов. Обычный «div» контейнер, содержащий некую последовательность ссылочных тегов «a» для кликабельных элементов и тег «span» - для некликабельных. Измените разметку согласно своей вёрстке.

Простой случай

Используется в минималистичном дизайне, когда требуются крошки из двух звеньев и хотят иметь только два вида крошек: главная + категория или бренд, главная + некликабельный заголовок (название) страницы.

«div»
    «a href="{site}"»Главная«/a»
    {if !empty($category)}
        «a href="{url from=category}"»{name from=category}«/a»
    {elseif !empty($brand)}
        «a href="{url from=brand}"»{name from=brand}«/a»
    {else}
        «span»{echoVar from=title}«/span»
    {/if}
«/div»

Заметка Здесь мы воспользовались следующими шаблонизационными функциями:

site - вывести адрес корня сайта
url - вывести адрес страницы
name - вывести название
echoVar - вывести значение переменной

Параметром from мы указали в каждом случае, из какой переменной брать данные для вывода.

Номер страницы в крошках

Этот писк моды применяют по желанию, всего лишь добавьте в конец крошек фрагмент, как показан ниже выделенным цветом.

«div»
    «a href="{site}"»Главная«/a»
    {if !empty($category)}
        «a href="{url from=category}"»{name from=category}«/a»
    {elseif !empty($brand)}
        «a href="{url from=brand}"»{name from=brand}«/a»
    {else}
        «span»{echoVar from=title}«/span»
    {/if}

    {if !empty($CurrentPage)}
        «span»Страница {$CurrentPage + 1}«/span»
    {/if}
«/div»

Такую добавку более не будем использовать в следующих примерах, чтобы не раздувать код, но вы можете применить её похожим образом, если сочтёте полезной.

Заметка В движке Impera CMS номер текущей страницы по историческим причинам был представлен индексом (номер минус 1), вот почему мы использовали в крошках +1 во время изображения номера.

Улучшенная разновидность

Опять же для минималистичного дизайна, но когда второй тип крошек желают расширить до трёх звеньев: главная + тип страницы + некликабельное название.

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

«div»
    «a href="{site}"»Главная«/a»

    {if !empty($product)}
        «a href="products"»Каталог«/a»
        «a href="{url from=product}"»{name from=product}«/a»

    {elseif !empty($category)}
        «a href="{url from=category}"»{name from=category}«/a»

    {elseif !empty($brand)}
        «a href="brands"»Бренды«/a»
        «a href="{url from=brand}"»{name from=brand}«/a»

    {elseif !empty($kit)}
        «a href="kits"»Комплекты«/a»
        «a href="{url from=kit}"»{name from=kit}«/a»

    {elseif !empty($article)}
        «a href="articles"»Статьи«/a»
        «a href="{url from=article}"»{name from=article}«/a»

    {elseif !empty($news_item)}
        «a href="articles"»Новости«/a»
        «a href="{url from=news_item}"»{name from=news_item}«/a»

    {elseif !empty($stock)}
        «a href="stocks"»Склады«/a»
        «a href="{url from=stock}"»{name from=stock}«/a»

    {elseif !empty($country)}
        «a href="countries"»Страны«/a»
        «a href="{url from=country}"»{name from=country}«/a»

    {elseif !empty($region)}
        «a href="regions"»Области«/a»
        «a href="{url from=region}"»{name from=region}«/a»

    {elseif !empty($town)}
        «a href="towns"»Города«/a»
        «a href="{url from=town}"»{name from=town}«/a»

    {elseif !empty($file)}
        «a href="media"»Медиа файлы«/a»
        «a href="{url from=file}"»{name from=file}«/a»

    {else}
        «span»{echoVar from=title}«/span»
    {/if}
«/div»

Таким образом: страницы категории - будут содержать крошки из двух звеньев; страницы бренда, товара, комплекта товаров, статьи, новости, склада, страны, области, города, медиа файла - из трёх звеньев; остальные страницы (например так называемые технические: корзина, сравнение, поиск, авторизация и т.д.) - из двух звеньев.

Кстати То что мы написали имена вторых звеньев прямо в коде, это типичное упрощение в ситуации, когда данные звенья будут называться именно так, а нас не интересует возможность управлять названиями из админпанели. Тогда оправдана запись названий "в лоб" прямо в коде.

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

Бренды заменить на {echoVar from='settings-»brands_main_path'}
Каталог заменить на {echoVar from='settings-»products_main_path'}
Комплекты заменить на {echoVar from='settings-»productskits_path'}
Статьи заменить на {echoVar from='settings-»articles_main_path'}
Новости заменить на {echoVar from='settings-»news_main_path'}
Склады заменить на {echoVar from='settings-»stocks_main_path'}
Страны заменить на {echoVar from='settings-»countries_main_path'}
Области заменить на {echoVar from='settings-»regions_main_path'}
Города заменить на {echoVar from='settings-»towns_main_path'}
Медиа файлы заменить на {echoVar from='settings-»files_main_path'}

Классический случай

Выглядит для интернет магазинов так: главная + все звенья пути категории + звено бренда + некликабельное название. Крошки имеют множество звеньев на страницах категории, бренда, товара. На остальных страницах - два звена.

«div»
    «a href="{site}"»Главная«/a»

    {if !empty($category)}
        {if !empty($category-»path)}
            {foreach $category-»path as $item}
                «a href="{url}"»{name}«/a»
            {/foreach}
        {else}
            «a href="{url from=category}"»{name from=category}«/a»
        {/if}
        {if !empty($brand)}
            «a href="{url from=category}/filter_{inputValue from='brand-»url'}"»{name from=brand}«/a»
        {/if}

    {elseif !empty($brand)}
        «a href="{url from=brand}"»{name from=brand}«/a»
    {/if}

    «span»{echoVar from=title}«/span»
«/div»

Обратим внимание, что в одной строке функции url и name записаны без параметра from, потому что эти функции по умолчанию оперируют переменной с именем $item.

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

inputValue - вывести значение, как для атрибута value поля ввода (то есть такой вывод, в отличие от функции echoVar, безопасен для применения в "кавычечных" атрибутах тегов, где непреобразованная кавычка или угловые скобки « », случайно содержащиеся в выводимом значении, могли бы нарушить парсинг вёрстки)

Компиляция на все случаи

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

«div»
    «a href="{site}"»Главная«/a»

    {if !empty($category)}
        {if !empty($category-»path)}
            {foreach $category-»path as $item}
                «a href="{url}"»{name}«/a»
            {/foreach}
        {else}
            «a href="{url from=category}"»{name from=category}«/a»
        {/if}
        {if !empty($brand)}
            «a href="{url from=category}/filter_{inputValue from='brand-»url'}"»{name from=brand}«/a»
        {/if}

    {elseif !empty($brand)}
        «a href="{url from=brand}"»{name from=brand}«/a»
    {/if}

    {if !empty($product)}
        «a href="{url from=product}"»{name from=product}«/a»

    {elseif !empty($kit)}
        «a href="kits"»Комплекты«/a»
        «a href="{url from=kit}"»{name from=kit}«/a»

    {elseif !empty($article)}
        «a href="articles"»Статьи«/a»
        «a href="{url from=article}"»{name from=article}«/a»

    {elseif !empty($news_item)}
        «a href="articles"»Новости«/a»
        «a href="{url from=news_item}"»{name from=news_item}«/a»

    {elseif !empty($stock)}
        «a href="stocks"»Склады«/a»
        «a href="{url from=stock}"»{name from=stock}«/a»

    {elseif !empty($country)}
        «a href="countries"»Страны«/a»
        «a href="{url from=country}"»{name from=country}«/a»

    {elseif !empty($region)}
        «a href="regions"»Области«/a»
        «a href="{url from=region}"»{name from=region}«/a»

    {elseif !empty($town)}
        «a href="towns"»Города«/a»
        «a href="{url from=town}"»{name from=town}«/a»

    {elseif !empty($file)}
        «a href="media"»Медиа файлы«/a»
        «a href="{url from=file}"»{name from=file}«/a»

    {else}
        «span»{echoVar from=title}«/span»
    {/if}

    {if !empty($CurrentPage)}
        «span»Страница {$CurrentPage + 1}«/span»
    {/if}
«/div»

Совет

Как видно, комплексный код всё же немаленький, чтобы вставлять его в каждый файл шаблона (темы, дизайна) вашего сайта, где хотелось бы выводить хлебные крошки, не снизив при этом читабельность файлов. Здесь существует отличный приём - разместите код хлебных крошек в отдельном файле, например common/breadcrumbs.htm, а в нужном месте файлов шаблона напишите инструкцию подключения этого файла:

{include 'common/breadcrumbs.htm'}

Так поступают все профессиональные верстальщики шаблонов, потому что это, кроме повышения читабельности кода, решает вторую задачу: если позже в хлебных крошках нужно что-то изменить, достаточно исправить в одном файле common/breadcrumbs.htm, чем править десяток файлов, рискуя неуследить за единообразием изменений.

Сниппет "Хлебные крошки"

Простой случай

Номер страницы в крошках

Улучшенная разновидность

Классический случай

Компиляция на все случаи

Совет

Обсуждение

Написать комментарийОтветить на выделенный комментарий

Начнём?

Допустимые теги

Обратите внимание