LogoLogo
Documentação de Temas
Documentação de Temas
  • 🚀COMECE POR AQUI
    • Temas Tray
    • Entenda o Tema
    • Meu primeiro tema
  • 💻Tray CLI
    • Instalação
    • Comandos
      • Erros Retornados
    • API para integrações Tray CLI
  • 🧱Construindo seu Template
    • Twig
      • O que é o Twig
      • Como ele é utilizado nos temas
      • Possibilidades de uso
      • Documentação para consulta
    • Visão Geral
      • Estrutura do Tema
      • Arquivo de configuração
      • Extensões de arquivos
      • Codificação de Arquivos
      • Avisos e Recomendações
      • Flags
    • Editor do Tema
      • Antigo
        • Como criar um Editor
        • Settings.html
      • Novo
        • Estrutura
          • Seções
          • Ícones
          • Componentes
            • Text
            • Textarea
            • Email
            • Number
            • Color
            • Checkbox
            • Radio
            • Select
            • Toggle
            • Upload
            • Tab
            • Alert
          • Exemplo de utilização
        • Thumb preview do tema
        • Imagens padrões
        • Como desabilitar e reabilitar?
      • Settings.json
    • Desenvolver
      • Atributo Google Analytics 4
      • Como adicionar o botão comprar na listagem dos produtos
      • Como criar um carrossel de produtos
      • Como inserir um vídeo na home da loja
      • Como manipular as variações de produtos
      • Como saber se o usuário está logado
      • Descontinuação do carrinho.php
      • Exibindo as formas de pagamento de um produto
      • Informação de preço com tempo de cache menor
      • Order Bump - Produtos Relacionados
      • Páginas Institucionais
      • Página de recuperação de senha
      • Página Live Shop
      • Recursos extras
      • Personalização das paginas de carrinho e checkout
    • Core Web Vitals
      • Desempenho
        • Lazyload
        • Primeira dobra
        • Fontes
        • Definição largura e altura
        • Sprite formas de pagamentos
      • Boas Práticas
        • Origem cruzada
      • Acessibilidade
        • Atributo Lang
        • Nome discernível
        • Atributo ALT
        • Contraste
        • IDs únicos
        • ARIA Labelled By
        • Tabindex
    • Otimizar e Medir
      • Carregamento na home
      • Layout AMP
      • Utilizando PWA na loja
    • Referências
      • Objetos
        • banner
        • breadcrumb
        • category
        • categories
        • filters
        • filter_options
        • links
        • pages
        • paginate
        • paymentMethods
        • product
        • productTabs
        • products
        • productFeatured
        • seals
        • search
        • settings
        • store
        • tags
        • tray
        • themePath
        • utils
      • Funções
        • asset()
        • Brands()
        • Categories()
        • Image()
        • Products()
        • Translation()
      • Data Attributes
        • Banners
        • Cart
        • Compare
        • Filter
        • Logged User
        • Search (Suggestion)
      • Componentes
        • Adicionar ao carrinho sem sair da página
        • Banner Desconto Progressivo
        • Banner extra com contagem de cliques
        • Banner Régua
        • Banner Rotativo
        • Botão "Voltar para o topo"
        • Botões Quantidade
        • Carrinho Lateral
        • Exibir a segunda imagem ao passar o mouse
        • Filtro Inteligente
        • Link flutuante para Whatsapp
        • Menu de Categorias
        • Menu de Categorias em 3 Níveis
        • Menu de Categorias com ver mais categorias
        • Menu de Categorias com Imagens
        • Menu de Categorias com Imagens - Hover
        • Menu de Categorias com produto
        • Menu de Marcas
        • Modal de Ofertas
        • Notícias com imagem na home
        • Novo Filtro Inteligente
        • Paginação
        • Porcentagem Desconto
        • Popup de Newsletter
        • Star Ranking
        • Selos da Loja
        • Selos do produto
        • Showcase ( List / Grid )
        • Topo Flutuante
        • Tray Login
        • Whatsapp flutuante
    • APIs Disponíveis
      • Busca
      • Carrinho de Compra
      • Categorias
      • Produtos
      • Variações de Produto
  • ✔️Homologação
    • Loja de Temas Tray
    • Requerimentos
      • Exclusividade
      • Identidade única
      • Estrutura necessária
      • Funcionalidades
      • Nova Busca e Filtro inteligente
      • Selos de produtos
      • Google Lighthouse
      • Consistência e funcionalidade
      • Compatibilidade com navegadores
      • Assets
      • Otimização para buscadores (SEO)
      • Acessibilidade
      • Configurações
      • Sistema de cores
      • Imagens responsivas
      • Nomes dos temas
      • Versionamento e notas de lançamento
      • Lojas demonstrativas
      • Documentação e suporte
    • Checklist obrigatório
    • Templates
    • Homologando o tema
    • Atualizando o tema
    • FAQ
  • 📣NOVIDADES
    • Tray CLI
    • Checklist
    • Tema Draft
    • Novo Editor
Powered by GitBook
On this page
  • - Delimitadores:
  • - Variáveis
  • - Filtros
  • - Funções
  • - Incluindo itens
  • - Estrutura de controle
  • - Lógica
  • - Removendo espaços em branco:

Was this helpful?

  1. Construindo seu Template
  2. Twig

Possibilidades de uso

PreviousComo ele é utilizado nos temasNextDocumentação para consulta

Last updated 2 years ago

Was this helpful?

A seguir iremos documentar alguns itens que podem servir como base na criação de seu tema.

- Delimitadores:

{{ … }} - Usado para imprimir uma variável ou o resultado de uma expressão.

{% … %} - Usado para executar instruções como por exemplo for-loops.

{# … #} - Usado para escrever comentários, equivalente ao /* … */ . Podendo ser escrito em uma única linha ou múltiplas.

- Variáveis

Você pode atribuir valores a variáveis dentro de blocos de código. As atribuições usam a tag set.

{% set foo = 'foo' %}
{% set foo = [1, 2] %}
{% set foo = {'foo': 'bar'} %}

- Filtros

São separados do item por um símbolo de barra vertical (|).

O exemplo a seguir remove todas as tags HTML do nome e o transforma em maiúsculo:

{{ name|striptags|title }}

Caso queira saber mais sobre os filtros acesse a documentação:

- Funções

São chamadas pelo nome seguido de parênteses (xxx()) e podem ter argumentos.

No exemplo a seguir, a função range retorna uma lista contendo uma progressão aritmética de números inteiros:

{% for i in range(0, 3) %}
    {{ i }},
{% endfor %}

Sendo utilizado quando desejamos obter informações sobre uma variável, principalmente para depurar um item que não se comporta conforme o esperado

{{ dump(user) }}

- Incluindo itens

A função include é utilizada para incluir um template e retornar seu conteúdo renderizado para o atual:

{{ include('sidebar.html') }}

- Estrutura de controle

Refere-se a todos os itens que controlam um fluxo, podendo ser:

- Condicionais (if/ elseif/ else)

- for-loops

- entre outros, ...

As estruturas de controle aparecem dentro dos {% ... %}

No exemplo a seguir, para exibir uma lista de usuários fornecida em uma variável chamada users, use a tag for:

<ul>
    {% for user in users %}
        <li>{{ user.username }}</li>
    {% endfor %}
</ul>

A tag if pode ser usada para testar uma expressão:

{% if users|length > 0 %}
    <ul>
        {% for user in users %}
            <li>{{ user.username }}</li>
        {% endfor %}
    </ul>
{% endif %}

- Lógica

Você pode combinar várias expressões com os seguintes operadores:

and: Retorna verdadeiro se ambos os operandos forem verdadeiros.

or: Retorna verdadeiro se um operando for verdadeiro.

not: nega uma declaração.

Exemplo de uso do and:

{% if ("home" in pages.current) and settings.banner_info %}
    {% element 'snippets/banner_info' %}
{% endif %}

Exemplo de uso do or:

if ("home" in pages.current) or ("product" in pages.current) %}                            
    {{ content_for_layout }}
{% else %}

Exemplo de uso do not:

{% if 1 not in [1, 2, 3] %}
{% if not (1 in [1, 2, 3]) %}

- Removendo espaços em branco:

O Twig também possui um filtro que remove os espaços em branco entre as tags HTML, o spaceless.

Utilizado como um "minificador" de arquivo.

Entrada:

{% apply spaceless %}
    <div>
        <strong>foo bar </strong>
    </div>
{% endapply %}

Saída:

{# <div><strong>foo bar</strong></div> #}

Para finalizar segue uma documentação sobre como utilizar os espaçamentos em seus códigos Twig, seguindo os padrões oficiais de codificação.

Coloque um (e apenas um) espaço ao início de um delimitador ( {{, {%, e {#) e antes do final de um delimitador ( }}, %}, e #}).

Exemplos:

{{ foo }}
{# comment #}
{% if foo %}{% endif %}

Caso queira saber mais sobre funções acesse a documentação: Dentre as funções temos o dump

Caso queira saber mais sobre estrutura de controle acesse a documentação:

🧱
https://twig.symfony.com/doc/1.x/filters/index.html
https://twig.symfony.com/doc/1.x/functions/index.html
https://twig.symfony.com/doc/1.x/tags/index.html
https://twig.symfony.com/doc/1.x/coding_standards.html