Navigare Breadcrumb
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>
Editează fiecare fișier de tip template pentru setarea variabilei page_title. Setarea variabilei page_title se face pe prima linie din cadrul fiecărui template, astfel:
404.html
{% set page_title = 'Eroare 404' %} ...
blog.html
{% set page_title = 'Blog' %} ...
cart.html
{% set page_title = 'Cosul de cumparaturi' %} ...
catalog.html
{% set page_title = 'Catalog' %} ...
collection-by-type.html
{% set page_title = product_type.title %} ...
collection-by-vendor.html
{% set page_title = vendor.title %} ...
collection.html
{% set page_title = collection.title %} ...
frontpage.html
{% set page_title = 'Pagina principala' %} ...
page.html
{% set page_title = page.title %} ...
post.html
{% set page_title = post.title %} ...
postcategory.html
{% set page_title = category.title %} ...
product.html
{% set page_title = product.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>