Design:Template
From Katapulta
m (→Template-urile Katapulta) |
m (→Template-urile Katapulta) |
||
(13 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
==Template-urile Katapulta== | ==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. | + | * [[Design:Layout.html|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 | + | * frontpage.html - redă pagina principală (index/home) |
- | * product.html - redă pagina unui produs | + | * [[Design:Product.html|product.html]] - redă pagina unui produs |
- | * cart.html - redă pagina „coșul de cumpărături” | + | * [[Design:Cart.html|cart.html]] - redă pagina „coșul de cumpărături” |
- | * collection.html - redă pagina unei colecții de produse | + | * [[Design:Collection.html|collection.html]] - redă pagina unei colecții de produse |
- | * collection-by-type.html - redă pagina colecției predefinite „Produse după tipul produsului” | + | * [[Design:Collection-by-type.html|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” | + | * [[Design:Collection-by-vendor.html|collection-by-vendor.html]] - redă pagina colecției predefinite „Produse după producător” |
- | * catalog.html - redă catalogul de produse | + | * [[Design:Catalog.html|catalog.html]] - redă catalogul de produse |
- | * blog.html - redă pagina de blog a site-ului tău; aici apare lista de articole (post-uri) | + | * [[Design:Blog.html|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 | + | * [[Design:Post.html|post.html]] - redă pagina unui articol din blog |
- | * postcategory.html - redă pagina unei categorii de articole din blog | + | * [[Design:Postcategory.html|postcategory.html]] - redă pagina unei categorii de articole din blog |
- | * page.html - redă pagina unei pagini statice | + | * [[Design:Page.html|page.html]] - redă pagina unei pagini statice |
+ | * [[Design:Search.html|search.html]] - redă rezultatele unei căutări dupa unul sau mai mulți termeni | ||
* 404.html - redă pagina de [http://en.wikipedia.org/wiki/HTTP_404 eroare 404] | * 404.html - redă pagina de [http://en.wikipedia.org/wiki/HTTP_404 eroare 404] | ||
==Tag-ul Include și Widget-urile== | ==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ă: | ||
+ | <html><div class="highlight"><pre> | ||
+ | <span class="cp">{%</span> <span class="k">include</span> <span class="s1">'widgets/latestposts.html'</span> <span class="cp">%}</span><span class="x"></span> | ||
+ | </pre></div></html> | ||
+ | |||
+ | <div class="note"><span>Recomandare:</span> În temele Katapulta widget-urile sunt create într-un folder denumit ''widgets''.</div> | ||
+ | |||
+ | Spre deosebire de template-urile Katapulta care sunt limitate ca număr, widget-urile pot fi oricâte. | ||
+ | |||
+ | Mai jos prezentăm câteva exemple de widget-uri: | ||
+ | * Categoriile de articole din Blog: | ||
+ | <html><div class="highlight"><pre> | ||
+ | <span class="x"><div class="widget-box"></span> | ||
+ | <span class="x"> <h4>Articole</h4></span> | ||
+ | <span class="x"> <ul id="blog-categories"></span> | ||
+ | <span class="x"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">category</span> <span class="k">in</span> <span class="nv">blog.categories</span> <span class="cp">%}</span><span class="x"></span> | ||
+ | <span class="x"> <li id="category_</span><span class="cp">{{</span> <span class="nv">category.id</span> <span class="cp">}}</span><span class="x">"></span> | ||
+ | <span class="x"> <a href="</span><span class="cp">{{</span> <span class="nv">category.url</span> <span class="cp">}}</span><span class="x">" title="</span><span class="cp">{{</span> <span class="nv">category.title</span><span class="o">|</span><span class="nf">e</span> <span class="cp">}}</span><span class="x">"></span><span class="cp">{{</span> <span class="nv">category.title</span><span class="o">|</span><span class="nf">e</span> <span class="cp">}}</span><span class="x"></a></span> | ||
+ | <span class="x"> <ul id="postlist-category_</span><span class="cp">{{</span> <span class="nv">category.id</span> <span class="cp">}}</span><span class="x">" class="no-bull sub-list"></span> | ||
+ | <span class="x"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">post</span> <span class="k">in</span> <span class="nv">category.posts</span> <span class="cp">%}</span><span class="x"></span> | ||
+ | <span class="x"> <li><a href="</span><span class="cp">{{</span> <span class="nv">post.url</span> <span class="cp">}}</span><span class="x">"></span><span class="cp">{{</span> <span class="nv">post.title</span><span class="o">|</span><span class="nf">truncate</span><span class="o">(</span><span class="m">30</span><span class="o">)</span> <span class="cp">}}</span><span class="x"></a></li></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"> </li></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"></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> | ||
+ | </pre></div></html> | ||
+ | * Ultimele X articole din blog: | ||
+ | <html><div class="highlight"><pre> | ||
+ | <span class="x"><div class="widget-box"></span> | ||
+ | <span class="x"> <h4>Ultimele articole</h4></span> | ||
+ | <span class="x"> <ul id="latestposts" class="no-bull"></span> | ||
+ | <span class="x"> </span><span class="cp">{%</span> <span class="k">for</span> <span class="nv">post</span> <span class="k">in</span> <span class="nv">blog.all_posts</span><span class="o">({</span><span class="s1">'limit'</span><span class="o">:</span> <span class="m">5</span><span class="o">})</span> <span class="cp">%}</span><span class="x"></span> | ||
+ | <span class="x"> <li></span> | ||
+ | <span class="x"> <a href="</span><span class="cp">{{</span> <span class="nv">post.url</span> <span class="cp">}}</span><span class="x">"></span><span class="cp">{{</span> <span class="nv">post.title</span> <span class="cp">}}</span><span class="x"></a></span> | ||
+ | <span class="x"> </li></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"></div></span> | ||
+ | |||
+ | </pre></div></html> |
Latest revision as of 17:08, 11 November 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
- search.html - redă rezultatele unei căutări dupa unul sau mai mulți termeni
- 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' %}
Spre deosebire de template-urile Katapulta care sunt limitate ca număr, widget-urile pot fi oricâte.
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>
- Ultimele X articole din blog:
<div class="widget-box">
<h4>Ultimele articole</h4>
<ul id="latestposts" class="no-bull">
{% for post in blog.all_posts({'limit': 5}) %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
</div>