Всё для сайтов

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

Полезные сведения

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

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

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

Сразу оговоримся, все примеры записаны в элементарной разметке, без классов. Обычный <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, чем править десяток файлов, рискуя неуследить за единообразием изменений.

Обсуждение
«Vlad | 8 окт 12:24
Надо было добавить микроразметку schema.org. Или я пропустил что-то и SEO уже отменили.
Ответить

Другие обсуждения »

Теги: хлебные крошки, навигационная цепочка, breadcrumbs, сниппет

Хотите чтобы мы рассказали ещё о чём-то - предлагайте тему.

Предложить

Следите за нашими публикациями в социальных сетях и новостных каналах.