Creare subcategorii folosind Etichete
From Katapulta
m (→Generarea subcategoriilor) |
m (→Marcarea subcategoriei active) |
||
(19 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 16: | Line 18: | ||
</ul> | </ul> | ||
</pre> | </pre> | ||
+ | |||
+ | Î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 32: | Line 36: | ||
</pre> | </pre> | ||
- | + | Procedând astfel template-ul va genera toate subcategoriile (etichetele) în interiorul colecției curente, iar rezultatul arată cam așa: | |
[[File:subcategorii_folosind_etichete_img2.jpg]] | [[File:subcategorii_folosind_etichete_img2.jpg]] | ||
+ | |||
+ | <div class="note"><span>Notă:</span>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.</div> | ||
==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 [[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". | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | <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> | ||
+ | </pre> | ||
+ | |||
+ | Variabila <pre>collection.current_tags</pre> conține toate etichetele după care este filtrată colecția curentă. La fel ca <pre>collection.all_tags</pre> este disponibilă numai în template-ul <pre>collection.html</pre>. | ||
+ | |||
+ | |||
+ | [[File: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== | ==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 <pre>{% for collection in collections %}</pre>, apoi vom căuta toate subcategoriile din colecția curentă folosind codul <pre>{% for tag in collection.all_tags %}</pre>. Iată exemplul complet: | ||
+ | |||
+ | |||
+ | <pre class="output"> | ||
+ | <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> | ||
+ | </pre> | ||
+ | |||
+ | [[File:subcategorii_folosind_etichete_img4.jpg]] |
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>