Aula 31 – Loja Shopify do Zero ao Avançado: Tags de controle, loops e lógica condicional no Liquid 🚀

📚 O que você vai aprender nesta aula

Nesta aula, mergulharemos no poder da lógica condicional e dos loops dentro do Liquid, a linguagem de template da Shopify. Aprenderemos a controlar o fluxo de exibição de conteúdo em sua loja, personalizando a experiência do usuário com base em diferentes condições e exibindo informações dinamicamente. Ao final desta aula, você será capaz de:

• Utilizar tags de controle como if, elsif, else, unless e case para criar lógica condicional.
• Implementar loops for para iterar sobre coleções de produtos, artigos do blog e outras informações.
• Combinar tags de controle e loops para criar templates dinâmicos e personalizados.
• Aplicar filtros para formatar e manipular dados dentro dos loops.
• Entender e utilizar variáveis Liquid em conjunto com a lógica condicional e loops.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, aprendemos sobre a estrutura básica do Liquid, objetos, variáveis e filtros. Agora, vamos combinar esses conhecimentos para criar templates mais complexos e inteligentes, capazes de se adaptar a diferentes contextos e exibir informações de forma dinâmica. Lembre-se da Aula 25, onde exploramos os objetos disponíveis no Liquid. Eles serão essenciais para utilizarmos os loops e condicionais de forma eficiente.

📖 Conteúdo Principal

Tags de Controle Condicional

As tags de controle condicional permitem que você exiba conteúdo com base em critérios específicos.

• if, elsif, else: A estrutura clássica para lógica condicional.

{% if product.price > 100 %}
Este produto custa mais de R$ 100.
{% elsif product.price > 50 %}
Este produto custa entre R$ 51 e R$ 100.
{% else %}
Este produto custa R$ 50 ou menos.
{% endif %}

• unless: O inverso do if. Exibe o conteúdo apenas se a condição for falsa.

{% unless product.available %}
Este produto está esgotado.
{% endunless %}

• case: Útil para múltiplas condições com base em um único valor.

{% case template.name %}
{% when 'product' %}
Você está na página de um produto.
{% when 'collection' %}
Você está na página de uma coleção.
{% else %}
Você está em outra página.
{% endcase %}

Loops

Os loops permitem iterar sobre coleções de dados.

• for: O loop mais comum. Permite iterar sobre arrays e outros objetos iteráveis.

{% for product in collection.products %}
{{ product.title }}
{{ product.price | money }}

{% endfor %}

Dentro do loop for, você pode acessar variáveis especiais como forloop.index, forloop.first, forloop.last e forloop.length.

Combinando Tags de Controle e Loops

Você pode combinar tags de controle dentro de loops para criar templates ainda mais poderosos.

{% for product in collection.products %}
{% if product.compare_at_price > product.price %}
Em promoção! De {{ product.compare_at_price | money }} por {{ product.price | money }}

{% endif %}
{% endfor %}

💻 Exemplos Práticos

• Exibindo uma mensagem diferente para clientes logados:

{% if customer %}
Olá, {{ customer.first_name }}!
{% else %}
Bem-vindo(a)!
{% endif %}

• Listando os 3 primeiros produtos de uma coleção:

{% for product in collection.products limit:3 %}
{{ product.title }}
{% endfor %}

🎯 Exercícios e Desafios

1. Crie um template que exibe uma mensagem diferente dependendo da tag do produto.

2. Crie um template que lista todos os artigos do blog e exibe apenas o título e um resumo se o artigo tiver mais de 500 palavras.

3. Modifique o template da sua coleção para exibir um banner de “Novo” nos produtos adicionados nos últimos 30 dias.

📝 Resumo da Aula

Nesta aula, aprendemos a utilizar tags de controle como if, elsif, else, unless e case, além do loop for. Vimos como combinar essas estruturas para criar templates dinâmicos e responsivos. Com esses conhecimentos, você pode personalizar a experiência do usuário na sua loja Shopify de forma mais eficaz.

🚀 Preparação para próxima aula

Na próxima aula, vamos explorar como criar e utilizar snippets no Liquid, permitindo a reutilização de código e a organização dos seus templates.

📚 Recursos Adicionais

• Documentação do Liquid – A documentação oficial da Shopify sobre a linguagem Liquid.
• Liquid Cheat Sheet – Um guia rápido com as principais tags e filtros do Liquid.

Lembre-se de praticar bastante! A melhor forma de aprender Liquid é experimentando e testando diferentes códigos. Bons estudos! 😉