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> <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.