Design:Template
From Katapulta
(Difference between revisions)
m (→Tag-ul Include și Widget-urile) |
m (→Tag-ul Include și Widget-urile) |
||
| Line 27: | Line 27: | ||
Mai jos prezentăm câteva exemple de widget-uri: | Mai jos prezentăm câteva exemple de widget-uri: | ||
| - | + | * Categoriile de articole din Blog: | |
| - | + | ||
<html><div class="highlight"><pre> | <html><div class="highlight"><pre> | ||
<span class="x"><div class="widget-box"></span> | <span class="x"><div class="widget-box"></span> | ||
| Line 44: | Line 43: | ||
<span class="x"> </span><span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span><span class="x"></span> | <span class="x"> </span><span class="cp">{%</span> <span class="k">endfor</span> <span class="cp">%}</span><span class="x"></span> | ||
<span class="x"> </ul></span> | <span class="x"> </ul></span> | ||
| + | <span class="x"></div></span> | ||
| + | </pre></div></html> | ||
| + | * Sumarul coșului de cumpărături: | ||
| + | <html><div class="highlight"><pre> | ||
| + | <span class="x"><div class="cart-summary"></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">if</span> <span class="nv">cart.item_count</span> <span class="o">></span> <span class="m">0</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <p><b>Coșul tău:</b> <br/></span> | ||
| + | <span class="x"> <a href="/cart"></span><span class="cp">{{</span> <span class="nv">cart.item_count</span> <span class="cp">}}</span><span class="x"> produs(e) în valoare de </span><span class="cp">{{</span> <span class="nv">cart.total_cart</span><span class="o">|</span><span class="nf">money</span> <span class="cp">}}</span><span class="x"></a></span> | ||
| + | <span class="x"> </p></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">else</span> <span class="cp">%}</span><span class="x"></span> | ||
| + | <span class="x"> <p>Coșul de cumpărături este gol.</p></span> | ||
| + | <span class="x"> </span><span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span><span class="x"></span> | ||
<span class="x"></div></span> | <span class="x"></div></span> | ||
</pre></div></html> | </pre></div></html> | ||
Revision as of 10:07, 3 May 2011
Template-urile Katapulta controlează modul cum va arăta magazinul tău pe web. De exemplu când un cumpărător vizualizează pagina unui produs, Katapulta va folosi template-ul product.html pentru afișarea paginii produsului respectiv. Dacă cumpărătorul vizualizează pagina de Blog a magazinului tău, template-ul blog.html va fi folosit.
Template-urile Katapulta
- layout.html - acesta este privit ca un template „container”; toate celelalte template-uri extind (chiar dacă nu e obligatoriu) acest template, deci conținutul lor este redat în cadrul acestui template de bază. Dacă site-ul tău are elemente care se repetă cum ar fi un sidebar sau un meniu principal, atunci este recomandat ca acestea să fie definite aici.
- frontpage.html - redă pagina principală (index/home)
- product.html - redă pagina unui produs
- cart.html - redă pagina „coșul de cumpărături”
- collection.html - redă pagina unei colecții de produse
- collection-by-type.html - redă pagina colecției predefinite „Produse după tipul produsului”
- collection-by-vendor.html - redă pagina colecției predefinite „Produse după producător”
- catalog.html - redă catalogul de produse
- blog.html - redă pagina de blog a site-ului tău; aici apare lista de articole (post-uri)
- post.html - redă pagina unui articol din blog
- postcategory.html - redă pagina unei categorii de articole din blog
- page.html - redă pagina unei pagini statice
- 404.html - redă pagina de eroare 404
Tag-ul Include și Widget-urile
Tag-ul include este folosit pentru a include fragmente de cod în template-urile tale. Aceste fragmente de cod sunt numite în Katapulta widget-uri. Widget-urile se folosesc în special când ai același cod html se repetă în mai multe template-uri. Pentru a nu rescrie de fiecare data același cod acesta se grupează în cadrul unui fișier folosit ca și widget.
Sintaxa pentru include este simplă:
{% include 'widgets/latestposts.html' %}
Recomandare: În temele Katapulta widget-urile sunt create într-un folder denumit widgets.
Mai jos prezentăm câteva exemple de widget-uri:
- Categoriile de articole din Blog:
<div class="widget-box">
<h4>Articole</h4>
<ul id="blog-categories">
{% for category in blog.categories %}
<li id="category_{{ category.id }}">
<a href="{{ category.url }}" title="{{ category.title|e }}">{{ category.title|e }}</a>
<ul id="postlist-category_{{ category.id }}" class="no-bull sub-list">
{% for post in category.posts %}
<li><a href="{{ post.url }}">{{ post.title|truncate(30) }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
- Sumarul coșului de cumpărături:
<div class="cart-summary">
{% if cart.item_count > 0 %}
<p><b>Coșul tău:</b> <br/>
<a href="/cart">{{ cart.item_count }} produs(e) în valoare de {{ cart.total_cart|money }}</a>
</p>
{% else %}
<p>Coșul de cumpărături este gol.</p>
{% endif %}
</div>