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

• Dominar os filtros Liquid para formatação de texto, números, datas e URLs.
• Manipular strings com filtros para extrair informações, concatenar e modificar conteúdo.
• Aplicar filtros para controlar a exibição de elementos na sua loja Shopify.
• Entender a importância dos filtros para uma loja dinâmica e eficiente.
• Criar experiências personalizadas para seus clientes com a ajuda dos filtros.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, aprendemos sobre a estrutura de um tema Shopify, HTML, CSS, JavaScript e a sintaxe básica do Liquid. Agora, vamos aprofundar nosso conhecimento em Liquid, focando nos filtros, que são essenciais para manipular e formatar os dados da sua loja. Lembre-se da estrutura básica {{ variavel | filtro }} que vimos brevemente na Aula 25 sobre Introdução ao Liquid. Hoje vamos explorar todo o potencial disso!

📖 Conteúdo Principal

Os filtros Liquid são como pequenas funções que modificam a saída de variáveis, strings ou objetos dentro do seu código. Eles são extremamente versáteis e permitem uma grande flexibilidade na apresentação das informações da sua loja. A sintaxe básica é a seguinte:

{{ variavel | filtro: argumento1, argumento2 }}

Onde:

• variavel: A variável ou string que você quer modificar.
• filtro: O nome do filtro que você quer aplicar.
• argumento1, argumento2: Argumentos opcionais que alguns filtros aceitam.

Categorias de Filtros:

Vamos explorar algumas categorias importantes de filtros:

• Filtros de String: Manipulam texto. Exemplos: upcase, downcase, truncate, replace, append, prepend, split, strip_html.

• Filtros de Número: Formatam e modificam números. Exemplos: money, money_with_currency, round, ceil, floor.

• Filtros de Data: Formatam datas. Exemplos: date, time_ago.

• Filtros de Array/Lista: Manipulam arrays/listas. Exemplos: first, last, size, join, map, where.

• Filtros de URL: Modificam URLs. Exemplos: asset_url, script_tag.

• Filtros de Lógica/Controle: Controlam o fluxo de exibição. Exemplos: default, date_to_long_string.

💻 Exemplos Práticos

1. Formatando Preços:

{{ product.price | money_with_currency }}

Este código exibe o preço do produto com a moeda configurada na loja.

2. Limitando a quantidade de texto:

{{ product.description | truncate: 200, "..." }}

Este código limita a descrição do produto a 200 caracteres e adiciona “…” ao final.

3. Exibindo a data de criação do produto:

{{ product.created_at | date: "%d/%m/%Y" }}

Este código formata a data de criação do produto para o formato dia/mês/ano.

4. Manipulando Arrays (Coleções):

Imagine que você quer listar todas as tags de um produto separadas por vírgula:

{{ product.tags | join: ", " }}

5. Condicional com default:

Se uma variável pode ser nula, use o filtro default para evitar erros e fornecer um valor padrão:

{{ product.metafields.custom_namespace.custom_field | default: "Este campo não está definido" }}

🎯 Exercícios e Desafios

1. Crie um snippet que formata o preço de um produto com um desconto de 10%, exibindo o preço original riscado e o preço com desconto.

2. Modifique a descrição do produto para que as três primeiras palavras estejam em negrito.

3. Crie uma lista de todos os produtos de uma coleção, exibindo apenas o título e a primeira imagem.

4. Implemente um filtro que mostre “Em estoque” se a quantidade do produto for maior que zero, e “Esgotado” caso contrário.

📝 Resumo da Aula

Nesta aula, exploramos os filtros Liquid, ferramentas poderosas para formatar e manipular dados na sua loja Shopify. Vimos diferentes categorias de filtros e exemplos práticos de como utilizá-los. Com a prática, você se tornará fluente na utilização dos filtros e poderá criar lojas cada vez mais dinâmicas e personalizadas.

🚀 Preparação para próxima aula

Na próxima aula, vamos mergulhar no mundo das Tags Liquid, que permitem criar lógicas condicionais, loops e estruturas de controle de fluxo ainda mais complexas! Prepare-se para turbinar suas habilidades de desenvolvimento Shopify!

📚 Recursos Adicionais

• Documentação oficial do Shopify sobre filtros Liquid

Lembrem-se: pratiquem bastante! A chave para o domínio do Shopify é a prática constante. Estou à disposição para tirar dúvidas e ajudar no que for preciso! Bons estudos! 🚀