Liquid - conceitos básicos

.

Liquid é uma linguagem de template utilizada para carregar e manipular dinamicamente os contextos.

👍

Nesse tutorial você vai aprender:

✓Conceitos básicos da linguagem liquid

Variáveis

Assign

Criar nova variável

{% assign foo = "bar" %}
{{ foo }}
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 %}
Olá, João!

Unless

Ao contrário do if, unless executa um comando caso a condição não seja verdadeira.

{% assign foo = 'bar' %}
{% unless foo == 'bar2' %}
    o valor de foo é bar
{% endunless %}
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>

Did this page help you?