Creare subcategorii folosind Etichete
From Katapulta
m |
m (→Marcarea subcategoriei active) |
||
(3 intermediate revisions not shown) | |||
Line 5: | Line 5: | ||
[[File:subcategorii folosind etichete img1.jpg]] | [[File:subcategorii folosind etichete img1.jpg]] | ||
- | |||
+ | __TOC__ | ||
==Generarea subcategoriilor== | ==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: | 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: | ||
Line 19: | Line 19: | ||
</pre> | </pre> | ||
- | În codul de mai sus am folosit variabila | + | În codul de mai sus am folosit variabila [[Design:Variabile#collection|collection.all_tags]]. Aceasta este disponibilă numai în template-ul <pre>collection.html</pre> ș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ă. | 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ă. | ||
Line 43: | Line 43: | ||
==Marcarea subcategoriei active== | ==Marcarea subcategoriei active== | ||
- | Trebuie să-i afișăm grafic utilizatorului subcategoria în care se află la un moment dat. Pentru aceasta vom folosi variabila | + | Trebuie să-i afișăm grafic utilizatorului subcategoria în care se află la un moment dat. Pentru aceasta vom folosi variabila [[Design:Variabile#collection|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". |
Latest revision as of 17:44, 11 November 2011
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.
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:
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_tagsconține toate etichetele după care este filtrată colecția curentă. La fel ca
collection.all_tagseste disponibilă numai în template-ul
collection.html.
Acum avem un meniu de navigare printre subcategorii pentru toate colecțiile. Urmează integrarea subcategoriilor în meniul principal de navigare al site-ului nostru.
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>