Layouts

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/">
    <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, user-scalable=no, 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 %}


        {# 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 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 %}

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
store
objectn/aObjeto Store que representa a la tienda
powered_by_url
HTMLn/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_link
HTML
n/aNueva markup de la URL que debes incluir para indicar que el sitio está hecho con la tecnología de Tiendanube
powered_by_link
HTMLn/a

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

back_to_admin
HTML
n/a
Markup para agregar el iframe que permite al administrador de la tienda volver a su Administrador nube (si está logueado).
settings
object
n/a

Objeto Settings que representa las configuraciones del diseño.

sections
arrayn/aArreglo de objetos Section que representan las secciones del diseño.
languages
arrayn/a

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

current_language
object
n/a

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

has_logo
booleanfalsetrue si la tienda tiene un logo. false en otro caso.
categories
arrayn/a

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

fb_app
object
n/aRepresenta la aplicación de Facebook de Tiendanube.
pages
arrayn/aArreglo de objetos Page que representan a las páginas de la tienda que fueron creadas por el usuario.
ebit
HTML
n/a

Markup para incluir el código de ebit

siteforte
HTML
n/a
Markup para incluir el código de siteforte
current_url
stringn/aURL actual que se muestra en el navegador
customer
object
n/aObjeto Customer que representa a un cliente de la tienda (si está logueado).
menus
arrayn/a

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

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