Olá, turma! Sejam muito bem-vindos à nossa Aula 32 do curso “Loja Shopify do Zero ao Avançado”! 🚀

Se nas últimas aulas aprendemos a desvendar os dados da sua loja e a construir lógica com as tags Liquid, hoje vamos dar um passo fundamental para transformar esses dados brutos em algo bonito, legível e altamente funcional para seus clientes. Preparados para manipular e formatar informações como verdadeiros mestres Liquid? 💪

Aula 32 – Loja Shopify do Zero ao Avançado: Filtros poderosos para formatação e manipulação de dados

📚 O que você vai aprender nesta aula

Nesta aula, vamos mergulhar no universo dos Filtros Liquid, ferramentas essenciais para refinar a apresentação dos dados em sua loja. Ao final, você será capaz de:

• Entender o que são os Filtros Liquid, sua sintaxe e por que são tão importantes no desenvolvimento de temas Shopify.
• Aplicar os filtros mais comuns para strings, como mudar caixa, cortar texto e remover HTML.
• Utilizar filtros para números, incluindo operações matemáticas e, crucialmente, formatação de moeda.
• Dominar filtros para arrays, permitindo ordenar, filtrar, mapear e unir coleções de dados.
• Formatar datas de diversas maneiras, adaptando-as ao seu design.
• Aprender a encadear múltiplos filtros para manipulações complexas e eficientes.
• Implementar esses filtros em cenários práticos do dia a dia de uma loja Shopify.

🔗 Conectando com aulas anteriores

Lembram-se da Aula 29 – Desvendando os Objetos Globais do Liquid e da Aula 30 – Navegando pelos Dados da Loja com Objetos Liquid, onde exploramos como acessar informações cruas como product.title, product.price, customer.first_name? E na Aula 31 – Lógica Condicional e Iterações com Liquid, onde usamos tags como if, else e for para controlar o que e como os dados eram exibidos?

Pois bem! Agora que sabemos o que acessar e quando exibir, os filtros entram em cena para definir como essa informação será apresentada. De que adianta ter o preço do produto se ele não estiver formatado corretamente com o símbolo da moeda e as casas decimais? Ou uma descrição enorme que precisa ser truncada? Os filtros são a ponte entre o dado bruto do back-end e a experiência de usuário polida e profissional no front-end. Eles são a “cereja do bolo” para a apresentação visual dos seus dados Liquid! 🍰

📖 Conteúdo Principal

1. O que são Filtros Liquid?

Os Filtros Liquid são como pequenas funções que você aplica a uma variável Liquid para transformá-la ou formatá-la antes de ser exibida. Pense neles como modificadores de dados.

• Sintaxe: A sintaxe é muito simples e intuitiva. Você usa o caractere de pipe (|) para aplicar um filtro a uma variável ou expressão.

{{ variavel | nome_do_filtro }}

• Com parâmetros: Muitos filtros aceitam parâmetros para controlar seu comportamento.

{{ variavel | nome_do_filtro: parametro }}

• Por que usar?
• Formatação: Moeda, data, texto (maiúsculas, minúsculas, capitalização).
• Limpeza: Remover tags HTML, truncar texto.
• Manipulação: Reverter arrays, ordenar listas, extrair valores específicos.
• Otimização: Gerar “handles” amigáveis para URLs, codificar strings.

É importante notar que os filtros Liquid são processados no servidor Shopify antes que a página seja enviada ao navegador do cliente. Isso garante que a formatação e manipulação aconteçam de forma eficiente e consistente.

2. Tipos de Filtros e Exemplos Práticos

Vamos explorar os tipos de filtros mais utilizados, categorizando-os para facilitar o entendimento.

A. Filtros de String (Texto) 🔡

Esses filtros são perfeitos para manipular textos, títulos e descrições.

• upcase, downcase: Converte a string para maiúsculas ou minúsculas.

{{ "Olá Mundo" | upcase }} {# Saída: OLÁ MUNDO #}
{{ "Olá Mundo" | downcase }} {# Saída: olá mundo #}

• capitalize: Converte a primeira letra de cada palavra da string para maiúscula.

{{ "meu produto incrível" | capitalize }} {# Saída: Meu Produto Incrível #}

• truncate, truncatewords: Corta a string. truncate corta pelo número de caracteres, truncatewords pelo número de palavras. Ambos aceitam um segundo parâmetro opcional para o sufixo (padrão é “…”).

{{ "Esta é uma descrição longa do produto." | truncate: 15 }} {# Saída: Esta é uma des... #}
{{ "Esta é uma descrição longa do produto." | truncatewords: 3 }} {# Saída: Esta é uma... #}
{{ "Texto de exemplo" | truncate: 10, "..." }} {# Saída: Texto de ... #}

• strip_html: Remove todas as tags HTML de uma string. Super útil para descrições.

{{ "
Texto com HTML
" | strip_html }} {# Saída: Texto com HTML #}

• replace, replace_first: Substitui todas as ocorrências ou apenas a primeira ocorrência de uma substring.

{{ "cor vermelha, cor azul" | replace: "cor", "tonalidade" }} {# Saída: tonalidade vermelha, tonalidade azul #}
{{ "cor vermelha, cor azul" | replace_first: "cor", "tonalidade" }} {# Saída: tonalidade vermelha, cor azul #}

• append, prepend: Adiciona uma string ao final (append) ou ao início (prepend) de outra.

{{ "meu-produto" | append: ".jpg" }} {# Saída: meu-produto.jpg #}
{{ "Título" | prepend: "Shopify - " }} {# Saída: Shopify - Título #}

• url_encode, url_decode: Codifica ou decodifica uma string para uso em URLs.

{{ "minha página" | url_encode }} {# Saída: minha%20p%C3%A1gina #}

• handle, handleize: Converte uma string em um formato “handle” amigável para URLs (minúsculas, sem caracteres especiais, espaços por hífens). Essencial para SEO!

{{ "Meu Produto Fantástico!" | handle }} {# Saída: meu-produto-fantastico #}

B. Filtros Numéricos (Números) 🔢

Para trabalhar com preços, quantidades e qualquer dado numérico.

• abs: Retorna o valor absoluto de um número.

{{ -10 | abs }} {# Saída: 10 #}

• ceil, floor, round: Arredondamento. ceil para cima, floor para baixo, round para o inteiro mais próximo. round pode receber o número de casas decimais.

{{ 4.3 | ceil }} {# Saída: 5 #}
{{ 4.7 | floor }} {# Saída: 4 #}
{{ 4.5 | round }} {# Saída: 5 #}
{{ 4.12345 | round: 2 }} {# Saída: 4.12 #}

• plus, minus, times, divided_by, modulo: Operações matemáticas básicas.

{{ 5 | plus: 3 }} {# Saída: 8 #}
{{ 10 | minus: 4 }} {# Saída: 6 #}
{{ 6 | times: 2 }} {# Saída: 12 #}
{{ 10 | divided_by: 3 }} {# Saída: 3 #} (Divisão de inteiros, retorna int)
{{ 10 | divided_by: 3.0 }} {# Saída: 3.3333333333333335 #} (Para float, use um float no divisor)
{{ 10 | modulo: 3 }} {# Saída: 1 #} (Resto da divisão)

⚠️ Dica Importante: Para operações com números decimais, sempre use um float (ex: 10.0, 2.5) como parâmetro para divided_by e times para garantir um resultado float e evitar truncamento. O Shopify armazena preços em centavos, então você frequentemente precisará dividir por 100.0.

• money, money_with_currency: Os filtros mais importantes para preços! Formatam um valor numérico como moeda, utilizando as configurações de moeda da sua loja. money_with_currency adiciona o código da moeda (ex: R$ 10,00 BRL).

{{ product.price | money }} {# Saída: R$10,00 (assumindo preço de 1000 centavos e BRL) #}
{{ product.price | money_with_currency }} {# Saída: R$10,00 BRL #}

(Observação: O Shopify armazena preços em centavos. Se product.price for 1000, ele representa R$10,00. O filtro money já faz essa conversão e formatação.)

C. Filtros de Array (Listas/Coleções) 📦

Esses filtros são poderosos para manipular listas de itens, como tags de produtos, variantes, posts de blog, etc.

• first, last, size: Retorna o primeiro item, o último item ou o número de itens em um array.

{% assign numeros = "um,dois,tres" | split: "," %}
{{ numeros | first }} {# Saída: um #}
{{ numeros | last }} {# Saída: tres #}
{{ numeros | size }} {# Saída: 3 #}

• sort, sort_natural: Ordena um array. sort ordena alfabeticamente/numericamente. sort_natural é insensível a maiúsculas/minúsculas.

{% assign letras = "c,a,b" | split: "," %}
{{ letras | sort | join: ", " }} {# Saída: a, b, c #}
{% assign tags = "Promoção,esporte,Novidade" | split: "," %}
{{ tags | sort_natural | join: ", " }} {# Saída: esporte, Novidade, Promoção #}

sort também pode ordenar por uma propriedade de objetos dentro de um array: {{ collection.products | sort: 'title' }}.

• reverse: Inverte a ordem dos itens em um array.

{% assign numeros = "um,dois,tres" | split: "," %}
{{ numeros | reverse | join: ", " }} {# Saída: tres, dois, um #}

• map: Extrai o valor de uma propriedade específica de cada objeto em um array, retornando um novo array com esses valores. Muito útil!

{# Supondo que product.variants é um array de objetos de variantes, cada um com uma propriedade 'title' #}
{% assign titulos_variantes = product.variants | map: 'title' %}
{{ titulos_variantes | join: ", " }} {# Saída: P, M, G #}

• where: Filtra um array de objetos com base em uma propriedade e um valor correspondente.

{# Supondo que product.variants é um array de objetos de variantes, cada um com 'available' (booleano) #}
{% assign variantes_disponiveis = product.variants | where: 'available', true %}
{% for variant in variantes_disponiveis %}
{{ variant.title }}

{% endfor %}

• compact: Remove valores nulos ou vazios de um array.

{% assign lista = "a,,b,c" | split: "," %}
{{ lista | compact | join: ", " }} {# Saída: a,b,c #}

• join: Une os elementos de um array em uma única string, usando um separador especificado.

{% assign tags = product.tags %}
{{ tags | join: " | " }} {# Saída: Vestido | Verão | Feminino #}

• uniq: Remove valores duplicados de um array.

{% assign cores = "Vermelho,Azul,Vermelho,Verde" | split: "," %}
{{ cores | uniq | join: ", " }} {# Saída: Vermelho, Azul, Verde #}

D. Filtros de Data (Datas) 📅

O filtro date é incrivelmente versátil para formatar objetos de data (como product.created_at, article.published_at).

• date: Recebe uma string de formato como parâmetro. Use códigos de formato para especificar o layout.

{{ article.published_at | date: "%d/%m/%Y" }} {# Saída: 25/10/2023 #}
{{ article.published_at | date: "%A, %d de %B de %Y" }} {# Saída: Quarta-feira, 25 de Outubro de 2023 #}
{{ article.published_at | date: "%c" }} {# Saída: Wed Oct 25 10:30:00 2023 #} (Formato padrão do sistema)

Você pode encontrar todos os códigos de formato na documentação do Liquid date filter. Os mais comuns são:

• %a: Nome abreviado do dia da semana (Dom)
• %A: Nome completo do dia da semana (Domingo)
• %b: Nome abreviado do mês (Jan)
• %B: Nome completo do mês (Janeiro)
• %d: Dia do mês (01-31)
• %H: Hora (00-23)
• %I: Hora (01-12)
• %m: Mês (01-12)
• %M: Minuto (00-59)
• %p: AM/PM
• %S: Segundo (00-59)
• %Y: Ano (quatro dígitos)
• %y: Ano (dois dígitos)

E. Outros Filtros Úteis

• default: Define um valor padrão para uma variável se ela for nula, vazia ou indefinida.

{% assign meu_nome = "" %}
{{ meu_nome | default: "Visitante" }} {# Saída: Visitante #}
{% assign meu_nome = "Ana" %}
{{ meu_nome | default: "Visitante" }} {# Saída: Ana #}

• asset_url, file_url, image_url, img_url: Usados para gerar URLs corretas para os assets do seu tema. Veremos mais a fundo na próxima aula!

{{ 'logo.png' | asset_url }} {# Saída: //cdn.shopify.com/s/files/1/0000/0000/0000/t/theme/assets/logo.png?v=... #}

• link_to, link_to_type, link_to_vendor: Geram links HTML automaticamente para objetos Liquid.

{{ 'Título do Link' | link_to: '/minha-pagina' }} {# Saída: Título do Link #}
{{ product.vendor | link_to_vendor }} {# Saída: Nome do Vendedor #}

3. Encadeando Filtros (Filter Chaining) ⛓️

Uma das características mais poderosas dos filtros Liquid é a capacidade de encadeá-los. Isso significa que você pode aplicar múltiplos filtros a uma única variável, e eles serão executados na ordem em que são escritos, da esquerda para a direita.

Sintaxe:

{{ variavel | filtro1 | filtro2: parametro | filtro3 }}

Exemplo:

Imagine que você quer exibir o título de um produto, mas quer que ele esteja em maiúsculas, com no máximo 20 caracteres e, se for truncado, termine com “…” e sem tags HTML.

{{ product.title | strip_html | upcase | truncate: 20, "..." }}

1. product.title (Ex: “Camisa
Estilosa para o Verão!”)

2. | strip_html (Resultado: “Camisa Estilosa para o Verão!”)

3. | upcase (Resultado: “CAMISA ESTILOSA PARA O VERÃO!”)

4. | truncate: 20, "..." (Resultado: “CAMISA ESTILOSA P…”)

Entender a ordem de execução é crucial para obter o resultado desejado! 😉

💻 Exemplos Práticos

Vamos aplicar o que aprendemos em alguns cenários comuns de uma loja Shopify.

Cenário: Um tema de e-commerce de eletrônicos 🖥️

Vamos supor que estamos trabalhando no arquivo snippets/product-card.liquid que exibe um produto em uma lista.

Exemplo 1: Formatando preço de produto

Queremos que o preço de um produto seja exibido em Reais (BRL) e com o código da moeda, e o preço comparado, se houver, também formatado.

{% if product.compare_at_price > product.price %}

{{ product.compare_at_price | money_with_currency }}


{{ product.price | money_with_currency }}

{% else %}

{{ product.price | money_with_currency }}

{% endif %}

Resultado esperado:

• Se product.price for 10000 (R$100,00) e product.compare_at_price for 12000 (R$120,00):

R$120,00 BRL

R$100,00 BRL

• Se product.price for 15000 (R$150,00):

R$150,00 BRL

(Screenshot imaginária: Uma imagem do frontend de uma loja Shopify, exibindo um card de produto com o preço “R$100,00 BRL” em destaque e um preço anterior “R$120,00 BRL” riscado, mostrando a aplicação do filtro money_with_currency.)

Exemplo 2: Exibindo descrição de produto truncada e limpa

No card do produto, a descrição completa pode ser muito longa. Vamos exibi-la truncada e sem HTML.

{{ product.description | strip_html | truncatewords: 25, "..." }}

Se product.description for

Este é um produto incrível com muitas funcionalidades e design moderno que você vai adorar!

, a saída será:

Este é um produto incrível com muitas funcionalidades e design moderno que você vai...

(Screenshot imaginária: Um card de produto com um bloco de texto curto e limpo na área da descrição, evidenciando o efeito do strip_html e truncatewords.)

Exemplo 3: Listando tags de produto formatadas

Queremos mostrar as tags de um produto, mas elas podem estar desorganizadas. Vamos ordenar e uni-las com um bom separador, e garantir que a primeira letra de cada tag seja maiúscula.

{% if product.tags.size > 0 %}

Tags:
{% assign tags_formatadas = product.tags | sort_natural | join: ", " | capitalize %}
{{ tags_formatadas }}

{% endif %}

Se product.tags for ["promoção", "Eletrônicos", "novo"]:

1. ["promoção", "Eletrônicos", "novo"]

2. | sort_natural -> ["Eletrônicos", "novo", "promoção"]

3. | join: ", " -> "Eletrônicos, novo, promoção"

4. | capitalize -> "Eletrônicos, Novo, Promoção"

Saída final:

Tags: Eletrônicos, Novo, Promoção

Exemplo 4: Exibindo data de criação do blog formatada

Em um blog, queremos exibir a data de publicação de um artigo em um formato legível para o usuário.

Publicado em: {{ article.published_at | date: "%d de %B de %Y às %H:%M" }}

Se article.published_at for 2023-10-25 14:35:00 -0300:

Saída:

Publicado em: 25 de Outubro de 2023 às 14:35

Exemplo 5: Criando URL amigável (handle) para uma coleção

Para links internos, muitas vezes precisamos do “handle” de um título.

{% assign titulo_colecao = "Ofertas de Black Friday!" %}
Ver {{ titulo_colecao }}

Saída:

Ver Ofertas de Black Friday!

Exemplo 6: Filtrando e exibindo opções de variantes únicas

Se um produto tem variantes como “Tamanho: P, Cor: Vermelha”, “Tamanho: M, Cor: Vermelha”, “Tamanho: P, Cor: Azul”, queremos mostrar apenas as opções de cores únicas.

{% assign cores_disponiveis = product.variants | map: 'option2' | uniq %} {# Assumindo que 'option2' é a cor #}
Cores: {{ cores_disponiveis | join: ", " }}

Se product.variants contém as opções acima:

1. product.variants | map: 'option2' -> ["Vermelha", "Vermelha", "Azul"]

2. | uniq -> ["Vermelha", "Azul"]

3. | join: ", " -> "Vermelha, Azul"

Saída:

Cores: Vermelha, Azul

—

(Vídeo imaginário: Um pequeno vídeo demonstrando a edição de um arquivo .liquid no editor de temas do Shopify, inserindo um filtro como | money e mostrando o resultado instantâneo no preview do lado direito. Isso reforçaria a aplicação prática.)

—

🎯 Exercícios e Desafios

Chegou a hora de colocar a mão na massa e solidificar seu conhecimento! 💪

Desafio 1: “Card de Produto Dinâmico”

Objetivo: Modifique um card de produto existente no seu tema (ou crie um novo snippet chamado product-card-desafio.liquid) para exibir as seguintes informações do product de forma otimizada:

1. Título do produto: Em maiúsculas e sem tags HTML.

2. Preço: Exiba o preço formatado em BRL com o símbolo R$. Se houver preço de comparação, mostre-o riscado antes do preço atual.

3. Descrição curta: Apenas os primeiros 80 caracteres da descrição, sem tags HTML e com “…” no final.

4. Primeira categoria: Se o produto tiver tags, exiba a primeira tag (em ordem alfabética natural) capitalizada. Se não houver tags, mostre “Sem Categoria”.

Dica: Você pode usar um loop for simples para pegar um product da coleção all-products para testar.

{# Exemplo de como você pode chamar seu snippet em um arquivo .liquid #}
{% for product in collections.all.products limit: 1 %}
{% render 'product-card-desafio', product: product %}
{% endfor %}

Desafio 2: “Lista de Posts do Blog Organizada”

Objetivo: Crie um novo snippet chamado blog-post-list-item.liquid que represente um item de blog. Então, crie uma seção ou template para listar artigos de um blog e exiba-os com as seguintes formatações:

1. Título do post: Capitalize a primeira letra de cada palavra no título.

2. Data de publicação: Exiba a data no formato “Dia da Semana Completo, Dia de Mês Completo de Ano (ex: Quarta-feira, 25 de Outubro de 2023)”.

3. Conteúdo do post: Exiba apenas os primeiros 150 caracteres do conteúdo, removendo qualquer HTML e adicionando “Leia mais…” no final.

4. Tags do Post: Liste todas as tags do post, ordenadas alfabeticamente, e separadas por vírgula. Se não houver tags, não exiba nada.

Dica: Você pode usar o objeto global blog.articles para acessar os artigos.

{# Exemplo de como você pode usar em um template de blog.liquid #}
{% for article in blog.articles %}

{{ article.title | capitalize }}
Publicado em: {{ article.published_at | date: "%A, %d de %B de %Y" }}


{{ article.content | strip_html | truncate: 150, "Leia mais..." }}

{% if article.tags.size > 0 %}
Tags: {{ article.tags | sort_natural | join: ", " }}

{% endif %}

{% endfor %}

📝 Resumo da Aula

Ufa! Que aula produtiva, não é mesmo? Vimos que os Filtros Liquid são ferramentas poderosas e indispensáveis para qualquer desenvolvedor Shopify.

• Aprendemos que eles são usados para formatar e manipular dados antes de exibi-los no frontend.
• Exploramos uma vasta gama de filtros para strings, números, arrays e datas, entendendo a sintaxe {{ variavel | filtro }}.
• Demos uma atenção especial à formatação de moeda com money e money_with_currency, e à manipulação de arrays com filtros como sort, map e where.
• E o mais legal: descobrimos o poder do encadeamento de filtros (| filtro1 | filtro2) para realizar transformações complexas em uma única linha de código.

Com o domínio dos filtros, você tem o controle total sobre a apresentação dos dados, garantindo uma loja bonita, funcional e profissional! ✨

🚀 Preparação para próxima aula

Na nossa próxima aula, vamos dar um salto ainda maior na construção de temas! Vamos focar em como gerenciar e utilizar os Assets do Shopify (imagens, arquivos CSS, arquivos JavaScript) de forma eficaz. Você aprenderá:

• Como a estrutura de pastas assets funciona.
• Como referenciar imagens, vídeos, fontes e outros arquivos usando filtros Liquid como asset_url e image_url.
• Melhores práticas para otimizar o carregamento de assets.
• Começaremos a introduzir os conceitos de Snippets e Sections, que nos permitirão quebrar nosso código em partes menores e reutilizáveis, tornando o desenvolvimento modular e muito mais organizado.

Será uma aula essencial para entender a arquitetura de temas e otimizar o desempenho da sua loja!

📚 Recursos Adicionais

Não se limite ao que vimos aqui! A documentação oficial é sua melhor amiga.

• Documentação oficial do Shopify Liquid – Filters: Para uma lista completa e detalhada de todos os filtros Liquid disponíveis.

https://shopify.dev/docs/api/liquid/filters

• Artigo sobre Liquid date filter formats: Para explorar todas as opções de formatação de data.

https://shopify.dev/docs/api/liquid/filters/date#standard-format-strings

• Documentação completa de Liquid: Onde você pode encontrar tudo sobre Liquid, incluindo objetos, tags e, claro, filtros.

https://shopify.dev/docs/api/liquid

Até a próxima, e continuem codificando com entusiasmo! Professor fora! 👋