Search

 

From Katapulta

Acest tutorial explică în continuare cum se poate crea o navigare de tip breadcrumb magazinului tău.

Crează în tema ta un fișier de tip widget cu numele breadcrumbs.html (numele fisierului poate fi și altul) conținând următorul cod:

<div id="breadcrumb" class="clearfix">    
    <a href="/" title="Înapoi pe pagina principală">Acasă</a>
    {% if product is defined %}
        {% if collection is defined %}
        <span class="separator">»</span>
        <a href="{{ collection.url }}">{{ collection.title }}</a>
        {% elseif catalog is defined %}
        <span class="separator">»</span>
        <a href="/collection/catalog">Catalog</a>
        {% elseif product_type is defined %}
        <span class="separator">»</span>
        <a href="{{ product_type.url }}">{{ product_type.title }}</a>
        {% elseif vendor is defined %}
        <span class="separator">»</span>
        <a href="{{ vendor.url }}">{{ vendor.title }}</a>
        {% endif %}
    {% elseif post is defined %}
        <span class="separator">»</span>
        <a href="/blog">Blog</a>
        {% if category is defined %}
        <span class="separator">»</span>
        <a href="{{ category.url }}">{{ category.title }}</a>
        {% endif %}
    {% elseif category is defined %}
        <span class="separator">»</span>
        <a href="/blog">Blog</a>
    {% endif %}
    <span class="separator">»</span>    
    <span class="page-title">
        {% if page_title is defined %}
            {{ page_title }}
        {% else %}
            page_title variable is not defined for this template.
        {% endif %}
    </span>
</div>

Dupa cum se poate vedea în codul de mai sus este utilizată variabila page_title. Aceasta poate fi suprascrisă în fiecare template daca se dorește folosirea altui titlu de pagină decât cel implicit definit. Iată câteva exemple de cum poate fi suprascrisă variabila page_title:

404.html

{% set page_title = 'Eroare 404' %}
... 

blog.html

{% set page_title = 'Blogul nostru' %}
... 

cart.html

{% set page_title = 'Cos de cumparaturi' %}
... 

catalog.html

{% set page_title = 'Catalog de produse' %}
... 

frontpage.html

{% set page_title = 'Pagina principala' %}
... 

collection.html

{% set page_title = 'Colectia ' ~ collection.title %}
... 

Afișarea nagivatiei breadcrumb se poate face cel mai simplu incluzand fisierul breadcrumbs.html direct in layout-ul temei tale. Exemplu pentru layout.html:

...
{% block breadcrumbs %}
{% include 'widgets/breadcrumbs.html' %}
{% endblock %}
...

De remarcat este faptul ca am inclus fisierul breadcrumbs.html în cadrul unui block denumit breadcrumbs. Acest lucru este util daca dorim ca în unele template-uri să nu afișăm navigarea breadcrumb. De exemplu pe pagina principală nu este necesară afișarea breadcrumb-ului, prin urmare suprascriem în template-ul frontpage.html block-ul breadcrumbs definit în layout.html astfel:

{% block breadcrumbs %}{% endblock %}

Formarea link-urilor pentru breadcrumb:

collection.html

<a href="/collections/{{ collection.handle }}/{{ product.handle }}">
   {{ product.title|e }}
</a>

collection-by-type.html

<a href="/types/{{ product_type.handle }}/{{ product.handle }}">
   {{ product.title|e }}
</a>

collection-by-vendor.html

<a href="/vendors/{{ vendor.handle }}/{{  product.handle }}">
   {{ product.title|e }}
</a>

postcategory.html

<a href="/postcategory/{{ category.handle }}/{{ post.handle }}">
   {{ post.title }}
</a>