Variáveis

Assign

Criar nova variável 

Entrada

{% assign foo = "bar" %}
{{ foo }}

Saída

bar

Capture 

Captura o conteúdo dentro das tags de abertura e fechamento, atribuindo o valor a uma variável.

{% assign foo = "bar" %}
{% capture exemplo_capture %}
    Exemplo de captura. Valor de foo: <strong>{{ foo }}</strong>.
{% endcapture %}

{{ exemplo_capture }}

Exemplo de captura. Valor de foo: <strong>bar</strong>

Utilize o filtro allowhtml:true para renderizar o conteúdo html. 

{{ exemplo_capture | allowhtml:true }}


Exemplo de captura. Valor de foo: bar



Interação

For

Estrutura de repetição onde é percorrido um array

<!--
Product: {
    Flags: [
        {
            Alias: 'promocao',
            Label: 'Promoção',
            ImagePath: '/custom/content/themes/shared/images/promocao.png'
        },
        {
            Alias: 'lanaamento',
            Label: 'Lançamento',
            ImagePath: '/custom/content/themes/shared/images/lancamento.png'
        }
    ]
}

 -->
<ul>
{% for flag in Product.Flags %}
    <li class="{{ flag.Alias }}">{{ flag.Label }}</li>
{% endfor %}
</ul>
<ul>
    <li class="promocao">Promoção</li>
    <li class="lancamento">Lançamento</li>
</ul>

forloop 

Objeto contendo os atributos do laço de repetição. forloop.index: retorna o índice atual do laço de repetição, sendo 1 o valor inicial. forloop.first: retorna true se for a primeira iteração do laço e false caso não seja. forloop.last: retorna true se for a última iteração do laço e false caso não seja. forloop.length: retorna a quantidade de iterações do laço. 

{% assign breadcrumbs = "categoria, subcategoria, nome do produto" | split: "," %}
<ul class="breadcrumbs">
{% for page in breadcrumbs %}
    {% if forloop.first %}
        <li><a href="#" class="home">Página inicial</a></li>
    {% endif %}

    {% if forloop.last %}
        <li>{{ page }}</li>
    {% else %}
        <li><a href="#">{{ page }}</a></li>
    {% endif %}
{% endfor %}
</ul>
<ul class="breadcrumbs">
    <li><a href="#" class="home"></a></li>
    <li><a href="#">categoria</a></li>
    <li><a href="#">subcategoria</a></li>
    <li>nome do produto</li>
</ul>



Condicionais

if 

Executa o comando caso a condição seja verdadeira 

{% assign nome = "João" %}

{% if nome == "João" %}
    Olá, João!
{% endif %}
o valor de foo é bar

elsif 

Adiciona mais condições em um bloco if ou unless 

{% assign age = 25 %}
{% if age >= 18 %}
    Pessoa adulta
{% elsif age > 0 and age > 18 %}
    Cliente criança
{% endif %}
Pessoa adulta



else

Executa um comando caso nenhuma das condições anteriores forem verdadeiras. Utilizado em blocos if, unless e case.

{% assign nota = 5 %}
{% if nota >= 7 %}
    Aluno aprovado
{% else %}
    Aluno reprovado
{% endif %}


"Aluno reprovado"

Case/When 

case cria uma instrução switch e when compara a variável com valores diferentes 

{% assign categoria = 'tv' %}
{% case categoria %} 
    {% when 'som' %}
        A categoria é som.
    {% when 'tv' %}
        A categoria é tv.
    {% else %}
        Nenhuma categoria informada.
{% endcase %}


 "A categoria é tv."

Operadores 

Contains 

Testa se uma string ou um array contém uma expressão, ou valor.

{% assign name = "João Maria" %}
{% if name contains "José" %}
   verdadeiro
{% else %}
   falso
{% endif %}


"falso"

And/Or 

Testa duas condições se são verdadeiras/Apenas uma das condições deve ser verdadeira. 

{% assign num = 2 %}
{% assign subtotal = 3 %}
{% if num == 2 and subtotal == 3 %}
   verdadeiro
{% else %}
   falso
{% endif %}
"verdadeiro"

Comment

Comentar um bloco de código. Impede que o bloco comentado seja renderizado na página. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
{% comment %}Vivamus ante nibh, laoreet ut tellus eu, vehicula convallis sem.{% endcomment %} 
Duis et gravida nulla, ac fermentum eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis et gravida nulla, ac fermentum eros."

Include

Insere o conteúdo de um template 


<!-- 
/* arquivo: informacao.template */
<div>Conteúdo presente no arquivo informacao.template</div>
-->

<div>Antes do include</div>
{% include 'informacao.template '%}
<div>Depois do include</div>
<div>Antes do include</div>
<div>Conteúdo presente no arquivo informacao.template</div>
<div>Depois do include</div>
  • Sem rótulos