Główna
Katalog
Aplikacje Szablony graficzne Wtyczki Widżety
Wtyczki
SEO
Nawigacja w bułce tartej
Instrukcja do wtyczki "Nawigacja w bułce tartej"

Instrukcja do wtyczki "Nawigacja w bułce tartej"

Instrukcja konfiguracji wtyczki "Nawigacja w bułce tartej"

Potrzeba integracji wtyczki z motywem projektu: Nie.
Wymagane kompetencje do wdrożenia i użytkowania: Programista Frontend, Administrator Web Systems Pro.

Uwaga: aby wtyczka działała, musisz zastąpić domyślny kod "bułki tartej". W różnych motywach projektowych mogą znajdować się w różnych plikach, więc nie można wziąć pod uwagę wszystkich opcji. Ale zazwyczaj jest to wzorzec main.html.

Wtyczka już zintegrowana z motywem projektu "MegaShop 2.0"

Motyw projektu "TopShop"

W motywie projektu "TopShop" "bułka tarta" jest ułożona w kilku plikach.

1. Przejdź do szablonu category.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie bułki tartej.

3. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Przejdź do szablonu breadcrumb.html.

5. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

6. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

7. Zapisz zmiany, wyczyść pamięć podręczną w aplikacji "Ustawienia" i sprawdź wyjście menu na stronie internetowej.

Motyw projektu "EasySale"

1. W motywie projektu "EasySale" przejdź do szablonu breadcrumbs.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

3. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Zapisz zmiany, wyczyść pamięć podręczną w aplikacji "Ustawienia" i sprawdź wyjście menu na stronie internetowej.

Motyw projektu "Yourshop"

1. W motywie projektu "Yourshop" przejdź do szablonu breadcrumbs.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

3. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Zapisz zmiany, wyczyść pamięć podręczną w aplikacji "Ustawienia" i sprawdź wyjście menu na stronie internetowej.

Motyw projektu "Supreme"

1. W motywie projektu "Supreme" przejdź do szablonu main.breadcrumbs.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

3. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Zapisz zmiany, wyczyść pamięć podręczną w aplikacji "Ustawienia" i sprawdź wyjście menu na stronie internetowej.

Motyw projektu "Domyślna 3.0"

1. W motywie projektu "Domyślna 3.0" przejdź do szablonu main.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

3. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Zapisz zmiany, wyczyść pamięć podręczną w aplikacji "Ustawienia" i sprawdź wyjście menu na stronie internetowej.

Motyw projektu "ComfortBuy"

1. W motywie projektu "ComfortBuy" przejdź do szablonu content.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

3. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Przejdź do szablonu category.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

5. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

6. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

7. Przejdź do szablonu product.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

8. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

9. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

10. Zapisz zmiany, wyczyść pamięć podręczną w aplikacji "Ustawienia" i sprawdź wyjście menu na stronie internetowej.

Motyw projektu "Tasteful design 2.0"

1. W motywie projektu "Tasteful design 2.0" przejdź do szablonu main.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

3. Zamień kod na {shopBreadcrumbsViewHelper::getBreadcrumbs()}.

4. Zapisz zmiany, wyczyść pamięć podręczną w aplikacji "Ustawienia" i sprawdź wyjście menu na stronie internetowej.

Motyw projektu "Tasteful design PRO"

1. W motywie projektu "Tasteful design PRO" przejdź do szablonu breadcrumbs.html aplikacji "Witryna" (/wsp-panel/site/#/design/theme=dsvpro&file=layout%2Fbreadcrumbs.html).

2. W tym pliku powinien pozostać tylko kod:

  {strip}
      <div class="container-fluid main__breadcrumbs">
      {if $wa->shop}
            {shopBreadcrumbsViewHelper::getBreadcrumbs()}
      {/if}
  {/strip}

Reszta może zostać usunięta lub zakomentowana.

Motyw projektu "InCart"

1. W motywie projektu "InCart" przejdź do szablonu breadcrumbs.html aplikacji "Sklep" (Sklep / Witryna / Szablony).

2. Znajdź sekcję kodu odpowiedzialną za wyprowadzenie "bułki tartej".

3. Zamień go na kod z wtyczki.

4. Przejdź do ustawień wtyczki. Otwórz szablony. Wybierz motyw projektu i edytuj jego szablon BreadcrumbsPlugin.html.

5. Klasa «breadcrumbs__link» musi być dodana dla następujących pozycji menu, aby bułka tarta wyglądały jak oryginalne:

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

Przykład gotowego szablonu:

{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}

Błąd w tekście? Zaznacz ją myszką i kliknij Ctrl + F1 lub kliknij na ten blok!