Layouts

Estructura del layout

El archivo principal del tema es layouts/layout.tpl. Carga assets, componentes y sub-templates, e imprime variables globales para cada página.

Títulos y descripciones de página

Variables globales como page_title y page_description ya vienen completas según el template actual y pueden renderizarse directamente:

<title>{{ page_title }}</title>
<meta name="description" content="{{ page_description }}">

Cargando assets con static_url

Usa el filtro static_url para apuntar a archivos en la carpeta static (SCSS, CSS y JS). La plataforma resuelve la URL final:

<link rel="stylesheet" href="{{ 'css/style-critical.scss' | static_url }}">
<script src="{{ 'js/main.js' | static_url }}" defer></script>

SCSS soportado

Tiendanube compila SCSS automáticamente y lo sirve como CSS. Ejemplo de salida de una stylesheet:

//dcdn-us.mitiendanube.com/stores/002/166/951/themes/recife/dart-style-critical-61d41e81661b0f6eec2e689d7616b137.css

Componentes de la plataforma

Algunos recursos se proveen como componentes que no están en el FTP, pero pueden incluirse vía component() pasando parámetros:

{{ component('social-meta') }}

{{ component('fonts', {
    font_weights: '400,600',
    font_settings: 'settings.font_headings, settings.font_rest'
}) }}

Modelos antiguos

En temas más antiguos, las fuentes se cargaban con google_fonts_url y params.preview:

{% if params.preview %}
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800|Muli:400,700');
{% else %}
@import url("{{ [settings.font_headings, settings.font_rest] | google_fonts_url('400,500,600,700,800') | raw }}");
{% endif %}

Include de sub-templates

Usa {% include %} para insertar el contenido de otro .tpl dentro del actual. Ejemplo común: inyectar tokens CSS dentro de <style>:

<style>
  {% include "static/css/style-tokens.tpl" %}
</style>

Comentarios y variables (set)

Los comentarios de TWIG no se renderizan en el HTML final:

{# seu comentário #}

Asigna valores con {% set %} y reutilízalos luego:

{% set variavel_string = 'MINHA STRING' %}
{% set variavel_numerica = 100 %}
{% set variavel_booleana = true %}

Ejemplo de condicional por template

La variable global template indica la página actual (ej.: home, product, category, search, page, account.login, etc.). Es común condicionar bloques con ella y con valores de settings:

{% if template == 'product' %}
  {% if settings.show_product_fb_comment_box %}
    {{ fb_js }}
    <div id="fb-root"></div>
    {# caixa de comentários do Facebook aqui #}
  {% endif %}
{% endif %}

Scripts globales

fb_js y pin_js son variables globales utilitarias provistas por la plataforma para Facebook y Pinterest.

Visión general