3 апреля 2018 17:24
Инструкция по настройке плагина «Навигация в хлебных крошках»
+1

Важно: Чтобы плагин заработал, необходимо заменить код дефолтных «хлебных крошек». В различных темах дизайна они могут располагаться в разных файлах, поэтому все варианты учесть невозможно. Но, как правило, это шаблон main.html.

1. Инструкции по замене хлебных крошек в разных темах дизайна:

    1.1.  MegaShop
    1.2.  Multishop
    1.3.  Выгодная покупка
    1.4.  TopShop
    1.5.  Classic
    1.6.  Продавай легко
    1.7.  Yourshop
    1.8.  Supreme
    1.9.  WebShop
   1.10.  LiteShop
   1.11.  Дефолт 3.0
   1.12.  Удобная покупка
   1.13.  Дизайн со вкусом
   1.14.  Дизайн со вкусом PRO
   1.15.  InCart

2. Инструкция по установке и настройке плагина

3. Инструкция по переходу со старой версии плагина на новую


1.1. MegaShop

1. Перейдите в шаблон main.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {if $action != 'category'}{shopBreadcrumbsViewHelper::getBreadcrumbs()}{/if}.

4. Перейдите в шаблон category.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

5. Найдите участок кода, отвечающий за вывод хлебных крошек.

6. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

7. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.2. Multishop

1. Перейдите в шаблон content.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.3. Выгодная покупка

В теме дизайна «Выгодная покупка» хлебные крошки расположены в нескольких файлах.

1. Перейдите в шаблон main.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Перейдите в шаблон category.html.

5. Найдите участок кода, отвечающий за вывод хлебных крошек.

6. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

7. Перейдите в шаблон product.html.

8. Найдите участок кода, отвечающий за вывод хлебных крошек.

9. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

10. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.4. TopShop

В теме дизайна «TopShop» хлебные крошки расположены в нескольких файлах.

1. Перейдите в шаблон category.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.


3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Перейдите в шаблон breadcrumb.html.

5. Найдите участок кода, отвечающий за вывод хлебных крошек.

6. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.


7. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.5. Classic

1. Перейдите в шаблон breadcrumbs.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.6. Продавай легко

1. Перейдите в шаблон breadcrumbs.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.7. Yourshop

1. Перейдите в шаблон breadcrumbs.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.8. Supreme

1. Перейдите в шаблон main.breadcrumbs.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.9. WebShop

1. Перейдите в шаблон breadcrumbs.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}. Оберните в блок с классом "gradsilver".

4. Перейдите в настройки плагина. Откройте стили для редактирования.

5. Найдите класс "breadcrumbs-plugin" и допишите свойства

padding: 6px 6px 6px 20px;
font-size: 15px;


6. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.10. LiteShop

1. Перейдите в шаблон main.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.11. Дефолт 3.0

1. Перейдите в шаблон main.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.12. Удобная покупка

1. Перейдите в шаблон content.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Перейдите в шаблон category.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

5. Найдите участок кода, отвечающий за вывод хлебных крошек.

6. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

7. Перейдите в шаблон product.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

8. Найдите участок кода, отвечающий за вывод хлебных крошек.

9. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

10. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.13. Дизайн со вкусом

1. Перейдите в шаблон main.html приложения «Магазин» (Магазин / Витрина / Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените код на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Сохраните изменения, очистите кеш в «Инсталлере» и проверьте вывод меню на сайте.


1.14. Дизайн со вкусом PRO

1. Перейдите в шаблон breadcrumbs.html приложения «Сайт» (/webasyst/site/#/design/theme=dsvpro&file=layout%2Fbreadcrumbs.html).

2. В этом файле нужно оставить только код:

  {strip}

      <div class="container-fluid main__breadcrumbs">

      {if $wa->shop}

            {shopBreadcrumbsViewHelper::getBreadcrumbs()}

      {/if}

  {/strip}

Остальное можно удалить или закомментировать.


1.15. InCart

1. Перейдите в шаблон breadcrumbs.html (Магазин/Витрина/Шаблоны).

2. Найдите участок кода, отвечающий за вывод хлебных крошек.

3. Замените его на код из плагина.

4. Перейдите в настройки плагина. Откройте шаблоны. Выберите тему дизайна и отредактируйте ее шаблон BreadcrumbsPlugin.html.

5. Необходимо для следующих элементов меню добавить класс «breadcrumbs__link», чтобы хлебные крошки были похожи на оригинальные:

  • breadcrumbs-plugin__item__arrow
  • breadcrumbs-plugin__item
  • breadcrumbs-plugin__item__label
  • breadcrumbs-plugin__item__brothers__arrow

Пример готового шаблона: 

{if $breadcrumbs_plugin.breadcrumbs}
    <script>
        window.breadcrumbsPlugin = {
            breadcrumbs: {$breadcrumbs_plugin.breadcrumbs|json_encode},
            current_page_item: {$breadcrumbs_plugin.current_page_item|json_encode},
            show_subcategories: {$breadcrumbs_plugin.show_subcategories|json_encode},
            show_subcategories_on_hover: {$breadcrumbs_plugin.show_subcategories_on_hover|json_encode},
        };
    </script>

    <script src="{$breadcrumbs_plugin.js_url}"></script>
    <link rel="stylesheet" href="{$breadcrumbs_plugin.css_url}">

    <div itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumbs-plugin breadcrumbs">
        {$_i = 1}
        {foreach $breadcrumbs_plugin.breadcrumbs as $_breadcrumbs_index => $_item}
            {if !$_item}
                {continue}
            {/if}

            <div
                    itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"
                    class="js-breadcrumbs-plugin__item-wrapper breadcrumbs-plugin__item-wrapper"
                    data-breadcrumbs_index="{$_breadcrumbs_index}"
            >

                {if $_i > 1}
                    <span class="breadcrumbs-plugin__item__arrow breadcrumbs__link">{$breadcrumbs_plugin.separator}</span>
                {/if}

                <a href="{$_item.url}" itemprop="item" class="breadcrumbs-plugin__item breadcrumbs-plugin__item_href breadcrumbs__link">
                    {if isset($_item.itemprop_name)}
                        <span class="breadcrumbs-plugin__item__label breadcrumbs__link">
                            {$_item.name}
                        </span>
                        <span itemprop="name" class="breadcrumbs-plugin__itemprop-name_hidden">
                            {$_item.itemprop_name}
                        </span>
                    {else}
                        <span itemprop="name" class="breadcrumbs-plugin__item__label breadcrumbs__link">
                            {$_item.name}
                        </span>
                    {/if}
                </a>

                <meta itemprop="position" content="{$_i++}" />

                {if $breadcrumbs_plugin.show_subcategories && $_item.brothers|default:[]|count}
                    <span class="js-breadcrumbs-plugin__item__brothers__arrow breadcrumbs-plugin__item__brothers__arrow breadcrumbs__link">&#9660;</span>
                {/if}
            </div>
        {/foreach}

        {if $breadcrumbs_plugin.current_page_item}
            {if $breadcrumbs_plugin.hide_current_item}
                <div class="breadcrumbs-plugin__item-wrapper">
                    <span class="breadcrumbs-plugin__item">
                        <span class="breadcrumbs-plugin__item__arrow breadcrumbs__link">&darr;</span>
                    </span>
                </div>
            {else}
                <div
                        itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"
                        class="js-breadcrumbs-plugin__item-wrapper breadcrumbs-plugin__item-wrapper"
                        data-breadcrumbs_index="current"
                >
                    {if $breadcrumbs_plugin.show_current_item_link}
                        <span class="breadcrumbs-plugin__item__arrow breadcrumbs__link">{$breadcrumbs_plugin.separator}</span>

                        <a href="{$breadcrumbs_plugin.current_page_item.url}" itemprop="item" class="breadcrumbs-plugin__item breadcrumbs-plugin__item_href">
                            <span itemprop="name" class="breadcrumbs-plugin__item__label breadcrumbs__link">
                                {$breadcrumbs_plugin.current_page_item.name}
                            </span>
                        </a>
                    {else}
                        <span itemprop="item" class="breadcrumbs-plugin__item">
                            <span class="breadcrumbs-plugin__item__arrow breadcrumbs__link">{$breadcrumbs_plugin.separator}</span>

                            <span itemprop="name" class="breadcrumbs-plugin__item__label breadcrumbs__link">
                                {$breadcrumbs_plugin.current_page_item.name}
                            </span>
                        </span>
                    {/if}

                    <meta itemprop="position" content="{$_i}" />

                    {if $breadcrumbs_plugin.show_subcategories && $breadcrumbs_plugin.current_page_item.brothers|default:[]|count}
                        <span class="js-breadcrumbs-plugin__item__brothers__arrow breadcrumbs-plugin__item__brothers__arrow breadcrumbs__link">&#9660;</span>
                    {/if}
                </div>
            {/if}
        {/if}
    </div>
{/if}

Вывод хлебных крошек на сайте: 

2. Инструкция по настройке плагина

1. Купите и установите плагин через «Инсталлер».

2. Замените код хлебных крошек темы дизайна на {shopBreadcrumbsViewHelper::getBreadcrumbs()} (см. примеры замены хлебных крошек в разных темах дизайна).

3. Произведите необходимые настройки и выберите режим защиты в разделе «Магазин» - «Плагины» - «Навигация в хлебных крошках».

3.1. Выберите витрину.

3.2. Выберите способ показа меню на сайте. Доступные варианты:

  • Не выводить (хлебные крошки отключены);
  • Выводить при наведении (для показа дополнительного меню нужно навести курсор мыши на стрелку в хлебных крошках);
  • Выводить при нажатии (для показа дополнительного меню нужно кликнуть мышью на стрелку в хлебных крошках).

3.3. Выберите формат для вывода названия категории. Доступные варианты:

  • Название категории (как заведено в админке);
  • «SEO-наименование» из плагина «SEO-оптимизация»;
  • Заголовок H1.

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

3.5. Если у Вас установлен плагин «SEO-фильтр», то можно рядом с названием товара вывести ссылки на страницы «SEO-фильтра». Как это работает? Например, на сайте настроены фильтры для товаров по характеристике бренд и цвет. Если в настройках плагина «Навигация в хлебных крошках» отметить пункт «Добавление ссылок плагина SEO-фильтр» добавить эти характеристики, то у товаров, которым присвоены значения этих характеристик, появятся дополнительные ссылки на старницы фильтрации.

Также выберите формат для текста ссылки:

  • Значение характеристики;
  • Имя категории и значение характеристики;
  • SEO-наименование фильтра;
  • H1 страницы фильтра.

3.6. При необходимости скорректируйте стили сайта и шаблон вывода хлебных крошек.

Перейдите во вкладку «Шаблоны». Выберите тему дизайна, в хлебные крошки которой нужно внести изменения.

Отредактируйте стили и шаблон.

При необходимости измените разделитель и текст/иконку для главной страницы.

3.7. Сохраните изменения.

4. Очистите кеш в «Инсталлере» и браузере.

5. Проверьте работу хлебных крошек на своем сайте.


3. Инструкция по переходу со старой версии плагина на новую

1. Обновите плагин через «Инсталлер».

2. Замените код вывода старых крошек на {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

Код, который нужно заменить в шаблонах темы дизайна:

3. Сбросьте стили и шаблон вывода хлебных крошек в настройках плагина.

Как это сделать?

    — Кликните на «редактировать».

    — Опуститесь до конца файла.
    — Кликните по ссылке «Восстановить стандартный шаблон».

    — Подтвердите действие.

    — Сохраните настройки.

Вернуться в начало инструкции »

База знаний