Personal tools
Namespaces
Variants
Actions

Navigare Breadcrumb

From Katapulta

(Difference between revisions)
Jump to: navigation, search
m
m
 
(8 intermediate revisions not shown)
Line 33: Line 33:
     {% endif %}
     {% endif %}
     <span class="separator">&raquo;</span>     
     <span class="separator">&raquo;</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>
-
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:
+
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 51: Line 56:
<pre class="output">
<pre class="output">
-
{% set page_title = 'Blog' %}
+
{% set page_title = 'Blogul nostru' %}
...  
...  
</pre>
</pre>
Line 59: Line 64:
<pre class="output">
<pre class="output">
-
{% set page_title = 'Cosul de cumparaturi' %}
+
{% set page_title = 'Cos de cumparaturi' %}
...  
...  
</pre>
</pre>
Line 67: Line 72:
<pre class="output">
<pre class="output">
-
{% set page_title = 'Catalog' %}
+
{% set page_title = 'Catalog de produse' %}
...  
...  
</pre>
</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>
Retrieved from "http://wiki.katapulta.ro/index.php/Navigare_Breadcrumb"