Layouts | Documentação para Web Designers

Dentro da pasta /layouts você encontrará um único .tpl chamado layout.tpl que é usado como uma estrutura para todo o layout. O conteúdo deste arquivo será replicado em todas as telas e seções da loja.

<html><head>

Você encontrará as tags de todos os html, que determinam as propriedades do documento. Sugerimos que você mantenha esses códigos, pois eles são otimizados para operação com mídias sociais e componentes de 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

Em nossos layouts, usamos o Google Fonts. Seu rápido carregamento e otimização nos permite oferecer um resultado de alta qualidade e versatilidade ao oferecer opções.

Primeiro, listamos todas as opções para que, a partir do “administrador” > “Personalizar seu layout atual”, você possa visualizar as fontes. Na condição {% if params.preview %}, fazemos a chamada das Google Fonts específicas e suas variantes.

Depois de {% else %}, chamamos as fontes da vitrine, que são configuradas a partir do arquivo 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 %}

Em seguida, adicionamos a chamada à stylesheet “style-critical.tpl” dentro da tag <style> </ style, pois estes estilos devem estar inline.

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

Continuamos com a chamada para o SCSS de cores e o tpl que inclui todos os arquivos de estilo com carregamento assíncrono:

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

Concluímos com estilos personalizados que os usuários podem inserir em "Personalizar o layout atual” > “Edição avançada de CSS" no administrador da loja.

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

<head> JavaScript

Os últimos chamados no <head> </ head> serão os arquivos JavaScript necessários antes de carregar o <body>.

Por padrão, o layout chama a versão 1.5 do jQuery, mas se você precisar de outra versão, primeiro terá que desabilitar o padrão com:

{% set nojquery = true %}

⚠️ A partir do dia 30 de janeiro de 2023, a biblioteca jQuery será removida do código de nossas lojas, então este passo não será mais necessário.

E então faça a chamada para a versão que você precisa, como:

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

Importante!

Antes de fechar o <head> </ head> você deve incluir a tag {% head_content %} que contém importantes JavaScripts da Nuvemshop, que não podem ser editados.

<html><body>

Assim que fecharmos o <head>, você iniciará todo o container da loja. Dentro da tag <body> </ body>, todas as seções, componentes, layouts e snipplets que criam a loja são desenvolvidos.

Primeiro vamos encontrar algumas linhas de JavaScript para a integração de alguns componentes das redes sociais, como:

Comentários no Facebook
Login e cadastro no Facebook
Botão de compartilhamento do Pinterest

Em seguida, teremos um rótulo que pertence à barra superior da loja que contém o atalho para o Administrador Nuvem. Ele só aparece quando o administrador da loja estiver logado:

{{back_to_admin}}

Começamos então a incluir o conteúdo HTML do <body> por meio de alguns snipplets e a tag fundamental nesse arquivo: {% template_content%}

Essa tag gera o espaço para o conteúdo dos diferentes templates. O conteúdo que você vai chamar é variável para cada seção, como: home.tpl, category.tpl, etc.

Acima dessa tag, vamos encontrar o snipplet header.tpl, que é fixo para toda a loja que contém o logotipo, o menu de navegação, o mecanismo de busca, entre outros componentes que serão exibidos em todas as seções da loja.

O snipplet footer.tpl que chamamos depois da tag {% template_content%} se comporta da mesma forma.

Para finalizar o arquivo, vamos encontrar o carregamento dos arquivos JavaScript. Primeiro o arquivo com códigos críticos e sem dependência do jQuery, e depois, dentro da função LS.ready.then, os 2 js restantes.

Para entender mais sobre nossos arquivos javaScript, você pode ver o artigo: Static JS

Otros Layout

Se houver uma tela que não deve conter esses elementos, um layout alternativo pode ser usado. Isto é obtido com a criação de um novo arquivo tpl na pasta layouts, por exemplo: “special-layout.tpl”, com a estrutura e o conteúdo apropriados a um layout, e no início do modelo desejado, você especifica o layout que deseja usar da seguinte maneira:

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

Por exemplo, se quisermos que o login do cliente use um layout alternativo, podemos criar no diretório de layouts um arquivo chamado alternativo.tpl, que é como layout.tpl com as alterações desejadas. Então do login.tpl você deve incluir a tag {% layout “alternativo.tpl”%} no começo do arquivo.

Vale a pena notar que modelos como product.tpl, contact.tpl, etc. não compartilham variáveis com layouts. Ou seja, se uma variável for definida em layout.tpl usando a tag {% set variable = value%}, essa variável não estará disponível em product.tpl.

Variáveis en layout.tpl

Todas as variáveis disponíveis no layout.tpl também estão disponíveis em todos os arquivos.

Variáveis	Tipo	Default	Descrição
store	object	n/a	Armazenar objeto que representa a loja.
powered_by_url	HTML	n/a	Markup da URL que você deve incluir para indicar que o site é feito com a tecnologia Nuvemshop (Use powered_by_link).
new_powered_by_link	HTML	n/a	Novo markup da URL que você deve incluir para indicar que o site é feito com a tecnologia Nuvemshop.
powered_by_link	HTML	n/a	Markup do link que você deve incluir para indicar que o site é feito com a tecnologia Nuvemshop.
back_to_admin	HTML	n/a	Markup para adicionar o iframe que permite ao administrador da loja retornar ao Administrador Nuvem (se estiver logado).
settings	object	n/a	Objeto Settings que representa as configurações de design.
sections	array	n/a	Disposição de objetos Section que representam as seções do design.
languages	array	n/a	Disposição de objetos Language que representam os idiomas da loja.
current_language	object	n/a	Objeto Language que representa o idioma selecionado pelo usuário na loja.
has_logo	boolean	false	True se a loja tiver um logótipo. False caso contrário.
categories	array	n/a	Disposição do objetos Category que representam as categorias de primeiro nível.
fb_app	object	n/a	Objeto FB_App, representando o aplicativo do Facebook da Nuvemshop.
pages	array	n/a	Disposição do objeto Page que representam as páginas da loja que foram criadas pelo usuário.
ebit	HTML	n/a	Markup para incluir o código ebit
siteforte	HTML	n/a	Marcação para incluir o código do siteforte
current_url	string	n/a	URL atual mostrado no navegador
customer	object	n/a	Objeto de cliente que representa um cliente da loja (se estiver logado).
menus	array	n/a	Dicionário das matrizes do objeto Navigation_Item que representam os menus de navegação da loja.
navigation	array	n/a	Organização de objetos navigation_item representando o menu de navegação principal da loja. Equivalente a menus.navigation
cart	object	n/a	Carrinho objeto que representa o carrinho de compras
params	array	n/a	Arranjo contendo os parâmetros GET do URL.