Layout

Dentro de la carpeta /layouts vas a encontrar un único tpl llamado layout.tpl que es utilizado como un marco para todo el Theme. El contenido de este archivo se va a replicar en todas las pantallas y secciones de la tienda.

<html><head>

Vas a encontrar las características etiquetas de todo html, que determinan las propiedades del documento. Te sugerimos mantener estos códigos ya que están optimizados para el funcionamiento con componentes de redes sociales y SEO.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" lang="{% for language in languages %}{% if language.active %}{{ language.lang }}{% endif %}{% endfor %}">
    <head>
        <link rel="preconnect" href="https://d26lpennugtm8s.cloudfront.net" />
        <link rel="dns-prefetch" href="https://d26lpennugtm8s.cloudfront.net" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{{ page_title }}</title>
        <meta name="description" content="{{ page_description }}" />
        {% if settings.fb_admins %}
            <meta property="fb:admins" content="{{ settings.fb_admins }}" />
        {% endif %}
        {% if store_fb_app_id %}
        <meta property="fb:app_id" content="{{ store_fb_app_id }}" />
        {% elseif not store.has_custom_domain %}
        <meta property="fb:app_id" content="{{ fb_app.id }}" />
        {% endif %}
        {{ store.name | og('site_name') }}
        {% if template == 'home' and store.logo %}
            {{ ('http:' ~ store.logo) | og('image') }}
            {{ ('https:' ~ store.logo) | og('image:secure_url') }}
        {% endif %}

        {# Preload of first image of Slider to improve LCP #}
        {% if template == 'home'%}
            {% snipplet 'preload-images.tpl' %}
        {% endif %}

        {# OG tags to control how the page appears when shared on Facebook. See http://ogp.me/ #}
        {% snipplet "metas/facebook-og.tpl" %}
        {# Twitter tags to control how the page appears when shared on Twitter. See https://dev.twitter.com/cards/markup #}
        {% if template == 'product' %}
            {# Twitter #}
            {% snipplet "metas/twitter-product.tpl" %}
            {# Facebook #}
            {% snipplet "metas/facebook-product-og.tpl" %}
        {% elseif template == 'category' %}
            {# Facebook #}
            {% snipplet "metas/facebook-category-og.tpl" %}
        {% endif %}

        {#/*============================================================================
            #CSS and fonts
        ==============================================================================*/#}

        {# Critical CSS needed to show first elements of store while CSS async is loading #}

        <style>
            {# Font families #}

            {% if params.preview %}

                {# If page is loaded from customization page on the admin, load all fonts #}

                @import url('https://fonts.googleapis.com/css?family=Muli:400,700|Lato:400,700|Open+Sans:400,700|Lora:400,700|Slabo+27px|Playfair+Display:400,700|Droid+Sans:400,700|Poppins:400,700,900|Niramit:400,700&display=swap');

            {% else %}

                {# If page is NOT loaded from customization only load saved fonts #}

                {# Get only the saved fonts on settings #}

                @import url('{{ [settings.font_headings, settings.font_rest] | google_fonts_url('300, 400, 700') | raw }}');

            {% endif %}

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

        {# Colors and fonts used from settings.txt and defined on theme customization #}

        {{ 'css/style-colors.scss.tpl' | static_url | css_tag }}

        {# Load async styling not mandatory for first meaningfull paint #}

        {% include "static/js/load-css-async.tpl" %}

        {# Loads custom CSS added from Advanced Settings on the admin´s theme customization screen #}

        <style>
            {{ settings.css_code | raw }}
        </style>

        {#/*============================================================================
            #Javascript: Needed before HTML loads
        ==============================================================================*/#}

        {# Defines if async JS will be used by using script_tag(true) #}

        {% set async_js = true %}

        {# Defines the usage of jquery loaded below, if nojquery = true is deleted it will fallback to jquery 1.5 #}

        {% set nojquery = true %}

        {# Jquery async by adding script_tag(true) #}

        {% if load_jquery %}

        {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag(true) }}

        {% endif %}

        {# Loads private Tiendanube JS #}

        {% head_content %}

        {# Structured data to provide information for Google about the page content #}

        {% include 'snipplets/structured_data/webpage-structured-data.tpl' %}

    </head>

CSS y Fonts

En nuestros themes utilizamos Google Fonts, su rápida carga y optimización nos permite ofrecer un resultado de alta calidad y versatilidad a la hora de ofrecer opciones.

Primero listamos todas las opciones para que desde el administrador > “Personalizar tu diseño” se pueden previsualizar las tipografías. Bajo el condicional {% if params.preview %} realizamos el llamado de las Google Fonts especificas y sus variantes.

Luego del {% else %} realizamos el llamado a las tipografias para el storefront, que son configuradas desde el archivo setting.txt

{% if params.preview %}
    {# If page is loaded from customization page on the admin, load all fonts #}
    @import url('https://fonts.googleapis.com/css?family=Muli:400,700|Lato:400,700|Open+Sans:400,700|Lora:400,700|Slabo+27px|Playfair+Display:00,700|Droid+Sans:400,700');
{% else %}
    {# If page is NOT loaded from customization only load saved fonts #}
    {# Get only the saved fonts on settings #}
    @import url('{{ [settings.font_headings, settings.font_rest] | google_fonts_url }}');
{% endif %}

Luego agregamos el llamado a la hoja de estilos “style-critical.tpl” dentro de la etiqueta <style></style ya que estos estilos deben estar inline.

{% include "static/css/style-critical.tpl" %}

Continuamos con el llamado al SCSS de colores, y al tpl que incluye a todos los archivos de estilos con carga asincrónica:

{% include "static/js/load-css-async.tpl" %}

Completamos con los estilos personalizados que los usuarios puedan ingresar desde “Personalizar el diseño actual > Edición avanzada de CSS” en el administrador de la tienda.

<style>
  {{ settings.css_code | raw }}
</style>

<head> JavaScript

Los últimos llamados en el <head></head> van a ser a los archivos JavaScript necesarios antes de la carga del <body>. 

Por defecto el layout llama a la versión 1.5 de jQuery, pero si necesitas otra versión  primero tenes que deshabilitar el default con:

{% set nojquery = true %}

⚠️ A partir del día 30 de enero de 2023, la librería jQuery será removida del código de nuestras tiendas, por lo que ya no será necesario este paso.

Y luego hace el llamado a la versión que necesites, como por ejemplo:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' | script_tag(true) }}

Importante!

Antes de cerrar el <head></head> debes incluir la etiqueta {% head_content %} que contiene javascripts importantes de Tiendanube, que no pueden ser editados.

<html><body>

Una vez que cerramos el <head> vas a dar comienzo al contenedor de toda la tienda. Dentro de la etiqueta <body></body> se van a desarrollar todas las secciones, componentes, layouts y snipplets que crean la tienda.

Primero vamos a encontrar algunas líneas de javaScript para la integración de algunos componentes de redes sociales, como:

  • Facebook comments
  • Facebook login & register
  • Pinterest share button

Luego vamos a tener una etiqueta que pertenece a la barra superior de la tienda que contiene el acceso directo al Administrador nube. Solo va a aparecer cuando el administrador de la tienda esté logueado:

{{back_to_admin}}

A continuación comenzamos a incluir el contenido HTML del <body> a través de algunos snipplets y de la etiqueta fundamental en este archivo:  {% template_content %}

Esta etiqueta genera el espacio para el contenido de los diferentes templates. El contenido que que va a llamar es variable a cada sección, como por ejemplo: home.tpl, category.tpl, etc.

Por encima de esta etiqueta vamos a encontrar el snipplet header.tpl, que es fijo para toda la tienda que contiene el logo, el menú de navegación, buscador, entre otros compunentes que se van a mostrar en todas las secciones de la tienda.

De la misma forma se va a comportar el snipplet footer.tpl que llamamos luego de la etiqueta {% template_content %}. 

Para finalizar el archivo vamos a encontrar la carga de los archivos javaScript. Primero el archivo con códigos críticos y sin dependencia de jQuery, y luego, dentro de la función LS.ready.then  los 2 js restantes. 

Para entender más acerca de nuestros archivos JavaScript, podés ver el artículo: Static JS

Otros Layout

Si existe alguna pantalla que no debe contener estos elementos, se puede usar un layout alternativo. Esto se logra, creando un nuevo archivo tpl en la carpeta layouts, por ejemplo: “special-layout.tpl”, con la estructura y contenido adecuado a un layout y al comenzar el template deseado, se especifica el layout que querés utilizar, de la siguiente manera:

 {% layout “special-layout.tpl” %}

Por ejemplo, si queremos que el login de clientes utilice un layout alternativo, podemos crear en el directorio layouts un archivo llamado alternativo.tpl, que sea como layout.tpl con los cambios deseados. Después desde login.tpl se debe incluir el tag {% layout “alternativo.tpl” %} al principio del archivo.

Vale la pena destacar que los templates como product.tpl, contact.tpl, etc. no comparten variables con los layouts. Es decir, si en layout.tpl se define una variable usando el tag {% set variable = valor %} , esta variable no va a estar disponible en product.tpl.

Variables en layout.tpl

Todas las variables disponibles en layout.tpl también están disponibles en todos los archivos.

VariableTipoDefaultDescripción
storeobjectn/aObjeto Store que representa a la tienda
powered_by_urlHTMLn/a Markup de la URL que debes incluir para indicar que el sitio está hecho con la tecnología de Tiendanube (utilizar powered_by_link).
new_powered_by_linkHTMLn/aNueva markup de la URL que debes incluir para indicar que el sitio está hecho con la tecnología de Tiendanube
powered_by_linkHTMLn/a

Markup del link que debes incluir para indicar que el sitio está hecho con la tecnología de Tiendanube.

back_to_adminHTMLn/aMarkup para agregar el iframe que permite al administrador de la tienda volver a su Administrador nube (si está logueado).
settingsobjectn/a

Objeto Settings que representa las configuraciones del diseño.

sectionsarrayn/aArreglo de objetos Section que representan las secciones del diseño.
languagesarrayn/a

Arreglo de objetos Language que representan los idiomas de la tienda.

current_languageobjectn/a

Objeto Language que representa el idioma seleccionado por el usuario en la tienda.

has_logobooleanfalsetrue si la tienda tiene un logo. false en otro caso.
categoriesarrayn/a

Arreglo de objetos Category que representan a las categorías de primer nivel.

fb_appobjectn/aRepresenta la aplicación de Facebook de Tiendanube.
pagesarrayn/aArreglo de objetos Page que representan a las páginas de la tienda que fueron creadas por el usuario.
ebitHTMLn/a

Markup para incluir el código de ebit

siteforteHTMLn/aMarkup para incluir el código de siteforte
current_urlstringn/aURL actual que se muestra en el navegador
customerobjectn/aObjeto Customer que representa a un cliente de la tienda (si está logueado).
menusarrayn/a

Diccionario de arreglos de objetos Navigation_Item que representan menúes de navegación de la tienda.

navigationarrayn/aArreglo de objetos Navigation_Item que representa al menú principal de navegación de la tienda.
Equivale a menus.navigation
cartobjectn/aObjeto Cart que representa al carrito de compras.
paramsarrayn/aArreglo que contiene los parámetros GET de la URL.


¿Te ayudamos con este artículo?
¡Muchas gracias!