Personal tools
Namespaces
Variants
Actions

Creare subcategorii folosind Etichete

From Katapulta

Jump to: navigation, search

Pentru a crea o structura de tipul categorie-subcategorie (pe un singur nivel) ne vom folosi de etichetele asociate produselor.

Pentru exemplificare vom considera magazinul demonstrativ Tzoale care foloseste tema Kategory pentru realizarea scopului propus.

Subcategorii folosind etichete img1.jpg


Contents

Generarea subcategoriilor

Primul lucru care îl vom face este generarea unui meniu de navigare pentru subcategorii. Pentru aceasta vom căuta toate etichetele(subcategoriile) din colecția curentă. Edităm template-ul collection.html astfel:


<ul>
    {% for tag in collection.all_tags %}
        <li>{{tag | link_to_tag(collection) }}</li>
    {% endfor %}
</ul>
În codul de mai sus am folosit variabila collection.all_tags. Aceasta este disponibilă numai în template-ul
collection.html
și reprezintă un array cu toate etichetele asociate produselor din colecția curentă.

Apare următoarea problemă: odată ce utilizatorul dă click pe o subcategorie trebuie să aibă posibilitatea de a se întoarce înapoi să vadă toate produsele din colecția curentă.

Pentru a rezolva această problemă vom adăuga un simplu link către colecția curentă. Prin urmare codul nostru va arăta așa:


<ul>
    <li><a href="{{collection.url}}">Toate</a></li>    
    {% for tag in collection.all_tags %}
        <li>{{tag | link_to_tag(collection) }}</li>
    {% endfor %}
</ul>

Procedând astfel template-ul va genera toate subcategoriile (etichetele) în interiorul colecției curente, iar rezultatul arată cam așa:

Subcategorii folosind etichete img2.jpg

Notă:Nu am exemplificat în cod și clasele CSS, pentru a ușura lizibilitatea codului. Pentru exemplu complet vezi template-ul collection.html din tema Kategory.

Marcarea subcategoriei active

Trebuie să-i afișăm grafic utilizatorului subcategoria în care se află la un moment dat. Pentru aceasta vom folosi variabila collection.current_tags pentru a testa dacă utilizatorul este sau nu într-o subcategorie de produse. Dacă este într-o subcategorie o vom marca cu clasa CSS "active".


<ul>
    <li class="{{collection.current_tags is none ? 'active' : ''}}">
        <a href="{{collection.url}}">Toate</a>
    </li>    
    {% for tag in collection.all_tags %}
    <li class="{{tag in collection.current_tags ? 'active' : ''}}">
        {{tag | link_to_tag(collection) }}
    </li>
    {% endfor %}
</ul>
Variabila
collection.current_tags
conține toate etichetele după care este filtrată colecția curentă. La fel ca
collection.all_tags
este disponibilă numai în template-ul
collection.html
.


Subcategorii folosind etichete img3.jpg

Acum avem un meniu de navigare printre subcategorii pentru toate colecțiile. Urmează integrarea subcategoriilor în meniul principal de navigare al site-ului nostru.

Integrarea subcategoriilor în meniul de navigare

Așadar vrem să integrăm subcategoriile noastre în meniul principal de navigare al magazinului. Pentru aceasta parcurgem toate colecțiile magazinului folosind
{% for collection in collections %}
, apoi vom căuta toate subcategoriile din colecția curentă folosind codul
{% for tag in collection.all_tags %}
. Iată exemplul complet:


<ul class="main-nav">            
    {% for collection in collections %}
    <li>
        <a href="{{collection.url}}">{{collection.title}}</a>
        {% if collection.all_tags %}
        <ul>
            {% for tag in collection.all_tags %}
            <li>{{tag | link_to_tag(collection)}}</li>
            {% endfor %}
        </ul>                
        {% endif %}
    </li>
    {% endfor %}                
</ul> 

Subcategorii folosind etichete img4.jpg