O Twig é um mecanismo de templates amplamente utilizado para criar interfaces dinâmicas em PHP. Ele separa a lógica de apresentação, tornando o desenvolvimento mais organizado e eficiente.

No Editor de Código da Yampi, o Twig é usado para criar templates reutilizáveis que conectam dados do backend ao front-end, utilizando variáveis, métodos e objetos predefinidos. Arquivos Twig possuem a extensão .twig e permitem trabalhar com HTML, CSS e JavaScript de forma integrada.

​
Exemplos de Uso

​
Estruturas Dinâmicas em HTML

Crie menus dinâmicos que consomem dados do backend:

<ul class="menu-footer">
    {% for item in menus[settings.footer_menu] %}
        <li class="menu-footer-item">
            <a href="{{ item.url }}" class="menu-footer-link" 
               {% if item.url | is_external %} target="_blank" {% endif %}>
               {{ item.name }}
            </a>
        </li>
    {% endfor %}
</ul>

​
Condicionais

Controle a exibição de conteúdo com base em condições:

{% if settings.show_banner %}
    <div class="banner">
        <img src="{{ settings.banner_image }}" alt="Banner">
    </div>
{% endif %}

Para condições complexas:

{% if condition1 and (condition2 or condition3) %}
    <p>Condição atendida!</p>
{% endif %}

Armazene condições em variáveis para simplificar:

{% set is_eligible = condition1 and condition2 %}
{% if is_eligible %}
    <p>Você está apto para essa oferta!</p>
{% endif %}

​
Iterações

Itere sobre listas para exibir conteúdo dinâmico, como produtos:

{% for product in products %}
    <div class="product-item">
        <h3>{{ product.data.name }}</h3>
        <p>Preço: {{ product.data.price | money }}</p>
    </div>
{% endfor %}

Use o objeto loop para informações adicionais:

{% for item in navigation %}
    {% if loop.first %}
        <p>Primeiro item: {{ item.name }}</p>
    {% endif %}
    {% if loop.last %}
        <p>Último item: {{ item.name }}</p>
    {% endif %}
    <p>Item {{ loop.index }}: {{ item.name }}</p>
{% endfor %}

​
CSS Dinâmico

Gere estilos dinâmicos com variáveis e condições:

{% if settings.theme_color == 'dark' %}
    .button-primary {
        background-color: #000;
        color: #fff;
    }
{% else %}
    .button-primary {
        background-color: #fff;
        color: #000;
    }
{% endif %}

​
JavaScript Dinâmico

Incorpore dados dinâmicos em scripts:

<script>
    if (!variant.available) {
        button.val('{{ "Indisponível" | translate }}');
        button.addClass('out-of-stock');
        button.attr('disabled', 'disabled');
    }
</script>

​
Recursos Avançados

​
Filtros

Filtros úteis no Twig incluem:

  • money: Formata valores como moeda.
  • translate: Aplica traduções.
  • is_external: Verifica se uma URL é externa.

Exemplo:

<p>{{ "Preço" | translate }}: {{ product.data.price | money }}</p>

​
Herança de Templates

Reutilize estruturas com herança de templates:

{# base.twig #}
<!DOCTYPE html>
<html>
    <head>
        <title>{% block title %}Título Padrão{% endblock %}</title>
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>

{# page.twig #}
{% extends 'base.twig' %}

{% block title %}Página Específica{% endblock %}
{% block content %}
    <p>Conteúdo desta página</p>
{% endblock %}

​
Macros

Crie componentes reutilizáveis com macros:

{# macro.twig #}
{% macro button(label, link) %}
    <a href="{{ link }}" class="btn">{{ label }}</a>
{% endmacro %}

{# usando o macro #}
{% import 'macro.twig' as ui %}
{{ ui.button('Clique aqui', '/link') }}

O Twig simplifica o desenvolvimento de templates com suporte para lógica condicional, iterações, herança e muito mais. Para mais detalhes, consulte a documentação oficial do Twig.