Guias e Tutoriais
Deixe seu feedback
Start typing to search…

Tipos de dados e operações

Conceitos básicos das operações e dados em Liquid

Para iniciar seu projeto é importante rever os conceitos básicos de operações e tipos de dados suportados pelo Liquid. Para auxiliar nesse início, confira como fazer:

Operações

Os operadores lógicos são ferramentas para calcular expressões ou validar dados no seu algoritmo. Você pode utilizar os operadores básicos ou o operador contains:

- Operadores Básicos:

Operador

Significado

==

Igual a

!=

Diferente de

>

Maior que

<

Menor que

>=

Maior ou igual a

<=

Menor ou igual a

or

Lógica ou

and

Lógica e

- contains:
O operador contains verifica se uma string possui uma palavra ou expressão.

{% if product.name contains "camiseta" %}
  O nome desse produto possui a palavra "camiseta".
{% endif %}

O contains também pode ser usado para verificar se existe uma string em um array de strings, no entanto não é usado para procurar objetos em um array de objetos.

{% if product.tag_names contains "verao" %}
  Esse produto possui a tag "verão".
{% endif %}
❗️

Tags com mais de um operador and ou or são lidas da direita para a esquerda. Você não pode usar parênteses para manipular a ordem dos operadores: parênteses são caracteres inválidos no Liquid e geram erro.

Para criar seus próprios operadores, utilize a tag Control Flow.

Verdadeiro e Falso

Quando um dado do tipo não booleano é usado em um contexto booleano (como em tags de controle, o Liquid decide como considerá-lo (como true ou false). Tipos de dados que retornam true são considerados verdadeiros, enquanto tipos de dados que retornam false são considerados falsos.

- Verdadeiro: todos os dados são verdadeiros, exceto nil ou false:

No exemplo abaixo, o texto “Vnda” não é um valor booleano, mas ele é verdadeiro em uma condição (porque ele existe e não é nulo [`nil`]).

{% assign brand = “Vnda” %}

{% if brand == true %}
  Esse texto sempre será exibido enquanto `brand` existir.
{% endif %}

Strings vazias são verdadeiras pois foram definidas. Veja o exemplo abaixo:

{% assign brand = "" %}

{% if brand %}
 <h1>{{ brand }}</h1>
{% endif %}

O que será exibido do código anterior é:

<h1></h1>

Para evitar esse tipo de saída você pode verificar se uma string está vazia. Veja no caso a seguir:

{% unless brand == blank %}
  <h1>{{ brand }}</h1>
{% endunless %}

Nesse caso brand é exibido se o objeto não estiver vazio.

  • Falso: os únicos valores falsos no Liquid são nil e false.
    • nil é retornado quando o Liquid não tem nada para retornar de um objeto.
      Por exemplo, se um produto não possui tags, product.tag_names retornará nil:
{% if product.tags %}
  Esse bloco só será exibido se `product.tags` não for `nil`.
{% endif %}
- `false` é retornado através de objetos Liquid ou variáveis definidas como `false` . Um exemplo de propriedade que pode retornar `false` é `product.available`.
📘

Citamos aqui o uso de operadores com tags. Veja outras tags de Vnda no artigo Tags.

Tipos de dados

Em Liquid os objetos podem declarados como: string, boolean, number, nil, array e emptyDrop. Objetos podem ter um dos cinco tipos.

Tipo

Uso

Exemplos

string

São declaradas delimitando o conteúdo de uma variável com aspas simples ou duplas.

{% assign brand = "Vnda" %}

boolean

Booleanos podem ser do tipo true ou false.
Não utilize aspas para definir um booleano.

  • {% assign yes = true %}
  • {% assign no = false %}

number

Podem ser do tipo inteiro (integer) ou racional (float).

  • {% assign pie = 42 %}
  • {% assign pi = 3.14159 %}

nil

Valor vazio especial que é retornado quando não há resultados para um objeto ou propriedade.
nil é considerado false em blocos if e unless.

Considere que um produto não possui tags (product.tags_names não possui valor). Nesse caso Liquid não exibirá o texto:

{% if product.tag_names %}
Esse produto tem tags.
{% endif %}

Se você usar um atributo ou objeto nil, ele não será renderizado na página:

Tags:

Tags: {{ product.tag_names }}

array

Listas de variáveis de qualquer tipo.

  • Acesse itens de um array usando as tags de interação
  • Acesse um item específico utilizando a notação de colchete [ ]. A indexação da matriz começa em zero, e um índice negativo será contado a partir do final da matriz.
  • Não inicialize arrays usando o Liquid, ao invés disso use o filtro split para “quebrar” uma variável em um arraycom suas partes.
  • Acessando itens de um array:
    verao camisa amarelo promo

{% for tag in product.tag_names %}
{{ tag }}
{% endfor %}

  • Acessando um item específico:
    verao

{{ product.tag_names[0] }}

emptyDrop

Você recebe um objeto emptyDrop ao tentar acessar um objeto excluído.
Veja como verificar se um objeto existe ou não em EmptyDrop

A página_1, página_2 e página_3 são objetos emptyDrop:

{% assign variable = "hello" %}
{% assign page_1 = pages[variable] %}
{% assign page_2 = pages["does-not-exist"] %}
{% assign page_3 = pages.this-handle-does-not-exist %}

Para inicializar uma variável/objeto no Liquid utiliza-se as tags assign e capture.

Espaços em branco

No Liquid você pode incluir um hífen na sintaxe de sua tag {{-, -}}, {%- e -%} para remover os espaços em branco do lado esquerdo ou direito de uma tag renderizada. Mesmo que não imprima texto, normalmente imprimirá uma linha em branco em seu HTML renderizado. Veja o exemplo a seguir, onde há um espaço em branco antes da palavra tomate:

{% assign my_variable = "tomate"%}
{{ my_variable }}

Ao incluir hifens em sua tag de atribuição você retira o espaço em branco gerado do modelo renderizado:

{%- assign my_variable = "tomate" -%}
{{ my_variable }}

No caso de você não querer como regra geral que nenhuma de suas tags imprima espaços em branco, você pode adicionar hifens em ambos os lados de todas as suas tags ({%- e -%}):

{%- assign username = "John G. Chalmers-Smith" -%}
{%- se nome de usuário e tamanho de nome de usuário > 10 -%}
  Uau, {{ username }}, você tem um nome comprido!
{%- outro -%}
  Olá!
{%- fim se -%}
📘

Recomendamos a leitura dos conceitos básicos de Liquid:

Updated about 1 month ago