Navigare Breadcrumb
From Katapulta
m |
m |
||
| Line 156: | Line 156: | ||
| - | <pre class="output"><a href="/collections/{{ collection.handle }}/{{ product.handle }}">{{ product.title|e }}</a></pre> | + | <pre class="output"> |
| + | <a href="/collections/{{ collection.handle }}/{{ product.handle }}"> | ||
| + | {{ product.title|e }} | ||
| + | </a></pre> | ||
''collection-by-type.html'' | ''collection-by-type.html'' | ||
| - | <pre class="output"><a href="/types/{{ product_type.handle }}/{{ product.handle }}">{{ product.title|e }}</a></pre> | + | <pre class="output"> |
| + | <a href="/types/{{ product_type.handle }}/{{ product.handle }}"> | ||
| + | {{ product.title|e }} | ||
| + | </a></pre> | ||
''collection-by-vendor.html'' | ''collection-by-vendor.html'' | ||
| - | <pre class="output"><a href="/vendors/{{ vendor.handle }}/{{ product.handle }}">{{ product.title|e }}</a></pre> | + | <pre class="output"> |
| + | <a href="/vendors/{{ vendor.handle }}/{{ product.handle }}"> | ||
| + | {{ product.title|e }} | ||
| + | </a></pre> | ||
''postcategory.html'' | ''postcategory.html'' | ||
| - | <pre class="output"><a href="/postcategory/{{ category.handle }}/{{ post.handle }}">{{ post.title }}</a></pre> | + | <pre class="output"> |
| + | <a href="/postcategory/{{ category.handle }}/{{ post.handle }}"> | ||
| + | {{ post.title }} | ||
| + | </a></pre> | ||
Revision as of 13:07, 16 September 2011
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>