Design:Introducere
From Katapulta
m |
m |
||
Line 34: | Line 34: | ||
==Variabile== | ==Variabile== | ||
Variabilele sunt date pe care le putem utiliza în magazinul nostru. Iată câteva exemple: | Variabilele sunt date pe care le putem utiliza în magazinul nostru. Iată câteva exemple: | ||
- | <pre> | + | * <pre class="inline">collection.title</pre> - afisează denumirea unei colecții |
- | + | * <pre class="inline">variant.price</pre> - afisează prețul unui produs | |
- | + | * <pre class="inline">shop.name</pre> - afișează numele magazinului | |
- | + | ||
- | + | ||
==Filtre== | ==Filtre== |
Revision as of 09:59, 19 April 2011
În procesul de construire a unei teme Katapulta trebuie avute în vedere următoarele:
Contents |
Twig
Twig este un limbaj folosit în Katapulta pentru designul template-urilor. Este folosit alături de HTML și CSS. În Twig există două tipuri de taguri:
-
{% ... %}
- folosit pentru executarea structurilor de control (for, if, etc.) -
{{ ... }}
- folosit pentru afișarea pe ecran a rezultatului unei expresii
Mai jos este un exemplu care ilustrează cele explicate mai sus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>My Webpage</title>
</head>
<body>
<ul id="navigation">
{% for item in navigation %}
<li><a href="{{ item.href }}">{{ item.caption }}</a></li>
{% endfor %}
</ul>
<h1>My Webpage</h1>
{{ a_variable }}
</body>
</html>
Template-uri
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.
În Katapulta, template-urile au întotdeauna extensia .html.
Variabile
Variabilele sunt date pe care le putem utiliza în magazinul nostru. Iată câteva exemple:
-
collection.title
- afisează denumirea unei colecții -
variant.price
- afisează prețul unui produs -
shop.name
- afișează numele magazinului
Filtre
Formatul de afișare a variabilelor poate fi modificat cu ajutorul filtrelor. De exemplu vrei să afișezi prețul de vânzare împreună cu moneda $10,99, atunci folosești filtrul money astfel:
{{ variant.price|money }}
Structuri de control
Structurile de control se referă la toate aspectele care controlează derularea unui program: structuri condiționale (if, elseif, else), structuri repetitive (
for) și blocuri. Structurile de control apar între tagurile
{% ... %}.