Filtros nativos do Liquid

Filtros nativos do Liquid

Filtros nativos são os filtros padrão que a linguagem Liquid oferece. Eles estão disponíveis em qualquer template .liquid da sua vitrine, sem necessidade de configuração.

Para filtros exclusivos da plataforma Olist Ecommerce (como money_format, resize, installments), veja Filtros Olist Ecommerce.

Utilize filtros dentro de {{ }}, separando com o caractere |:

{{ product.price | money_format }}
{{ "título do produto" | capitalize | truncate: 50 }}
{{ product.images | map: "url" | first }}

Referência dos filtros nativos

Filtro	Descrição	Exemplo
abs	Valor absoluto de um número.	{{ -17 | abs }} → 17
append	Concatena uma string ao final.	{{ "/produtos" | append: ".html" }} → /produtos.html
at_least	Garante valor mínimo.	{{ 4 | at_least: 5 }} → 5
at_most	Garante valor máximo.	{{ 4 | at_most: 3 }} → 3
capitalize	Passa o primeiro caractere para maiúsculo.	{{ "título" | capitalize }} → Título
ceil	Arredonda para cima.	{{ 1.2 | ceil }} → 2
compact	Remove valores nil de um array.	{{ array | compact }}
concat	Concatena dois arrays.	{{ array1 | concat: array2 }}
date	Formata uma data.	{{ product.created_at | date: "%d/%m/%Y" }}
default	Retorna valor padrão se nil ou false.	{{ product.subtitle | default: product.title }}
divided_by	Divide um número.	{{ 10 | divided_by: 3 }} → 3
downcase	Converte para minúsculas.	{{ "ABC" | downcase }} → abc
first	Primeiro elemento de um array.	{{ product.images | first }}
floor	Arredonda para baixo.	{{ 4.9 | floor }} → 4
join	Une elementos de um array com separador.	{{ product.tag_names | join: ", " }}
last	Último elemento de um array.	{{ product.images | last }}
map	Extrai uma propriedade de cada objeto do array.	{{ product.images | map: "url" }}
minus	Subtrai.	{{ 10 | minus: 3 }} → 7
modulo	Resto da divisão.	{{ 10 | modulo: 3 }} → 1
newline_to_br	Converte quebras de linha em <br>.	{{ product.description | newline_to_br }}
plus	Soma.	{{ 10 | plus: 5 }} → 15
prepend	Adiciona texto no início.	{{ product.slug | prepend: "/" }}
remove	Remove todas as ocorrências de uma substring.	{{ "hello world" | remove: "world" }} → hello
replace	Substitui todas as ocorrências.	{{ product.name | replace: " ", "-" }}
reverse	Inverte a ordem de um array.	{{ product.images | reverse }}
round	Arredonda para o inteiro mais próximo.	{{ 4.5 | round }} → 5
size	Tamanho de um array ou string.	{{ product.images.size }}
slice	Parte de uma string ou array.	{{ "hello" | slice: 0, 3 }} → hel
sort	Ordena um array.	{{ product.tags | sort: "title" }}
split	Divide uma string em array.	{{ product.description | split: "<hr/>" }}
strip	Remove espaços no início e fim.	{{ " texto " | strip }}
strip_html	Remove tags HTML.	{{ product.description | strip_html }}
times	Multiplica.	{{ 5 | times: 3 }} → 15
truncate	Trunca uma string no limite de caracteres.	{{ product.description | truncate: 100 }}
uniq	Remove duplicatas de um array.	{{ product.images | map: "url" | uniq }}
upcase	Converte para maiúsculas.	{{ "hello" | upcase }} → HELLO
url_encode	Codifica para uso em URL.	{{ product.name | url_encode }}
where	Filtra array por valor de propriedade.	{{ product.variants | where: "available", true }}

Encadeamento de filtros

Filtros podem ser encadeados — a saída de um é a entrada do próximo, da esquerda para a direita:

{{ product.description | strip_html | truncate: 150 }}
{{ product.images | map: "url" | first | prepend: "https:" }}
{{ "Olá Mundo" | downcase | replace: " ", "-" }}

Referência completa

A lista acima cobre os filtros mais utilizados em vitrines Olist. Para a referência completa dos filtros nativos do Liquid, consulte a documentação oficial do Shopify Liquid.