Design:Introducere
From Katapulta
Î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 }}
Filtrul este separat de variabilă prin simbolul |. Deasemenea pot fi înlănțuite mai multe filtre. Rezultatul unui filtru va fi aplicat următorului filtru.
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
{% ... %}.