Navigare Breadcrumb
From Katapulta
m |
m |
||
(10 intermediate revisions not shown) | |||
Line 33: | Line 33: | ||
{% endif %} | {% endif %} | ||
<span class="separator">»</span> | <span class="separator">»</span> | ||
- | <span class="page-title">{{ page_title }}</span> | + | <span class="page-title"> |
- | </div> | + | {% if page_title is defined %} |
- | </pre> | + | {{ page_title }} |
+ | {% else %} | ||
+ | page_title variable is not defined for this template. | ||
+ | {% endif %} | ||
+ | </span> | ||
+ | </div></pre> | ||
- | + | 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''' | '''404.html''' | ||
Line 44: | Line 49: | ||
<pre class="output"> | <pre class="output"> | ||
{% set page_title = 'Eroare 404' %} | {% set page_title = 'Eroare 404' %} | ||
- | ... | + | ... |
</pre> | </pre> | ||
+ | |||
+ | '''blog.html''' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | {% set page_title = 'Blogul nostru' %} | ||
+ | ... | ||
+ | </pre> | ||
+ | |||
+ | '''cart.html''' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | {% set page_title = 'Cos de cumparaturi' %} | ||
+ | ... | ||
+ | </pre> | ||
+ | |||
+ | '''catalog.html''' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | {% set page_title = 'Catalog de produse' %} | ||
+ | ... | ||
+ | </pre> | ||
+ | |||
+ | '''frontpage.html''' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | {% set page_title = 'Pagina principala' %} | ||
+ | ... | ||
+ | </pre> | ||
+ | '''collection.html''' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | {% set page_title = 'Colectia ' ~ collection.title %} | ||
+ | ... | ||
+ | </pre> | ||
+ | |||
+ | Afișarea nagivatiei breadcrumb se poate face cel mai simplu incluzand fisierul ''breadcrumbs.html'' direct in layout-ul temei tale. Exemplu pentru ''layout.html'': | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | ... | ||
+ | {% block breadcrumbs %} | ||
+ | {% include 'widgets/breadcrumbs.html' %} | ||
+ | {% endblock %} | ||
+ | ... | ||
+ | </pre> | ||
+ | |||
+ | 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: | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | {% block breadcrumbs %}{% endblock %} | ||
+ | </pre> | ||
+ | |||
+ | Formarea link-urilor pentru breadcrumb: | ||
+ | |||
+ | ''collection.html'' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | <a href="/collections/{{ collection.handle }}/{{ product.handle }}"> | ||
+ | {{ product.title|e }} | ||
+ | </a></pre> | ||
+ | |||
+ | ''collection-by-type.html'' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | <a href="/types/{{ product_type.handle }}/{{ product.handle }}"> | ||
+ | {{ product.title|e }} | ||
+ | </a></pre> | ||
+ | |||
+ | ''collection-by-vendor.html'' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | <a href="/vendors/{{ vendor.handle }}/{{ product.handle }}"> | ||
+ | {{ product.title|e }} | ||
+ | </a></pre> | ||
+ | |||
+ | ''postcategory.html'' | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | <a href="/postcategory/{{ category.handle }}/{{ post.handle }}"> | ||
+ | {{ post.title }} | ||
+ | </a></pre> |
Latest revision as of 13:35, 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>
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>