tiendy usa Twig como motor para sus plantillas.
Puedes obtener más información útil en Twig for Template Designers.
Explicamos de forma básica cómo funciona el sistema de plantillas de tiendy.
Como se ve en el gráfico, las plantillas en tiendy se estructuran de esta forma:
layout/theme.tpl
es el HTML principal, que comparten todas las páginas de la tienda. Dentro de él hay una etiqueta ({% layout %}) que indica en qué parte se debe incrustar el contenido de la sección actual.
templates/index.tpl
templates/categories.tpl
templates/product.tpl
templates/cart.tpl
templates/blog.tpl
templates/article.tpl
templates/page.tpl
Estos archivos corresponden cada uno a una sección de la tienda y son incrustados dentro de theme.tpl (donde esté la etiqueta {% layout %}.
- index.tpl: Dentro debe ir lo que se quiera mostrar en la Home de la tienda. (ej. / )
- categories.tpl: corresponde a la página que se muestra cuando accedes a un listado de productos (una categoría, una marca, un tipo de producto, una subcategoría, etc.). (ej. /categorias/relojes )
- product.tpl: corresponde a la ficha del producto. (ej. /productos/pelona-mantilla )- cart.tpl : corresponde al carrito de la compra (ej. /cart)
- blog.tpl: Corresponde a la pantalla principal de un blog, donde normalmente se listan los últimos artículos publicados (ej. /blogs/noticias ).- article.tpl: corresponde a la ficha de un artículo concreto donde normalmente se muestra todo el contenido del artículo incluyendo los comentarios (ej. /post/estrenamos-web).
- page.tpl: Corresponde al formato con el que se mostrarán las páginas de contenido. (ej. /paginas/quienes-somos )
Dentro de estos archivos irá el HTML necesario para crear la estructura de la web, acompañado por sentencias de lenguaje Twig ( http://www.twig-project.org/doc/templates.html ), que permiten que se puedan incluir los contenidos reales generados desde el panel de control de la tienda.
Existe otra carpeta llamada "assets". Dentro de esa carpeta estarán todos los archivos de recursos de la web (archivos .js, .css, imágenes, etc.) y se hace referencia a ellos desde cualquiera de los archivo .tpl usando la variable o filtro "asset_url". Por ejemplo, para mostrar una imagen que está en la carpeta "assets" en index.tpl:
<img src="{{ 'logo.png'|asset_url }}" alt="logotipo" />
ó
<img src="{{ asset_url }}logo.png" alt="logotipo" />
Igualmente para incluir archivos javascript o css que estén en la carpeta de assets:
<link rel="stylesheet" type="text/css" href="{{ 'base.css'|asset_url }}" />
<script type="text/javascript" src="{{ 'jquery.js'|asset_url }}"></script>
Para hacer que las plantillas "cobren vida", tiendy pone a disposición de cada archivo .tpl una serie de variables que representan el contenido que el usuario edita desde el panel de control ( http://www.tiendy.com/blogs/wiki-referencia-variables ).
Por ejemplo, en tiendy los menús suelen crearse como listas de enlaces en la pestaña "Estructura". Para mostrar la lista de enlaces "Menú principal" en el archivo "theme.tpl", existe la variable "linklists" que contiene todas las listas de enlaces ( http://www.tiendy.com/posts/linklists ).
<ul>
{% for link in linklists.menu_principal.links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>