Olá, turma! Sejam muito bem-vindos à nossa Aula 31! 🚀 É um prazer ter vocês aqui novamente, prontos para mergulhar ainda mais fundo no universo do desenvolvimento de lojas Shopify.

Até agora, construímos uma base sólida, mas hoje, vamos realmente dar um salto no nível de dinamismo e interatividade das nossas lojas. Preparem-se para desvendar os segredos das tags de controle, loops e lógica condicional no Liquid, as ferramentas que transformam um template estático em uma experiência de compra inteligente e responsiva!

—

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 super prática e detalhada, você vai:

• Compreender o conceito e a importância das tags de controle (control flow tags) no Liquid.
• Dominar a lógica condicional usando if, elsif, else e unless para exibir conteúdo de forma inteligente.
• Aprender a utilizar loops for para iterar sobre coleções de dados (produtos, variantes, posts de blog, etc.) e exibir múltiplos itens dinamicamente.
• Explorar a tag case/when para lidar com múltiplas condições de forma elegante.
• Entender as propriedades do objeto forloop, essenciais para estilização e controle dentro de loops.
• Aplicar boas práticas e dicas de otimização para escrever um código Liquid eficiente e de fácil manutenção.
• Transformar a sua loja em um ambiente muito mais dinâmico e personalizado!

—

🔗 Conectando com aulas anteriores

Nas aulas anteriores (especialmente na Aula 30, onde introduzimos o Liquid), vocês aprenderam sobre a sintaxe básica do Liquid, como exibir variáveis ({{ object.property }}) e como usar filtros ({{ object.property | filter_name }}). Essas ferramentas são fundamentais para extrair e formatar dados do Shopify.

No entanto, imagine que você queira exibir uma mensagem “Frete Grátis!” apenas se o carrinho do cliente atingir um determinado valor. Ou queira listar todos os produtos de uma coleção de forma dinâmica, sem ter que escrever cada um deles manualmente. Como você faria isso? 🤔

Simplesmente exibir variáveis não é o suficiente! Precisamos de lógica para tomar decisões, exibir conteúdo baseado em condições ou repetir blocos de código para múltiplos itens. É exatamente isso que as tags de controle, loops e lógica condicional nos permitem fazer. Elas são a espinha dorsal da interatividade e personalização no Liquid, conectando a base de dados do Shopify com a experiência visual que o cliente vê.

—

📖 Conteúdo Principal

As tags de controle no Liquid permitem que você adicione lógica ao seu template. Elas são usadas para:

• Tomar decisões: Exibir ou ocultar conteúdo baseado em certas condições.
• Repetir conteúdo: Iterar sobre uma coleção de itens e exibir cada um deles.

Vamos explorar as mais importantes:

1. Lógica Condicional: if, elsif, else, unless

A lógica condicional é a base para exibir conteúdo de forma inteligente. Você pode pensar nela como um “se isso for verdade, faça aquilo, senão, faça outra coisa”.

a) A tag if (Se)

A tag if avalia uma condição. Se a condição for true (verdadeira), o bloco de código dentro do if é executado.

Sintaxe:

{% if condição %}

{% endif %}

Exemplo: Exibir uma mensagem de frete grátis se o valor total do carrinho for superior a R$ 200.

{% if cart.total_price > 20000 %} {# Preço em centavos, então 20000 = R$200 #}
🎉 Parabéns! Você ganhou frete grátis!

{% endif %}

b) A tag elsif (Senão se)

Você pode adicionar múltiplas condições usando elsif (abreviação de “else if”). Se a condição if for falsa, ele tenta a próxima condição elsif, e assim por diante.

Sintaxe:

{% if condição_1 %}

{% elsif condição_2 %}

{% endif %}

Exemplo: Mensagem diferente para valores de carrinho.

{% if cart.total_price > 50000 %}
🥳 Frete GRÁTIS e um brinde especial!

{% elsif cart.total_price > 20000 %}
🎉 Frete GRÁTIS!

{% endif %}

c) A tag else (Senão)

A tag else define um bloco de código que será executado se nenhuma das condições if ou elsif anteriores for verdadeira.

Sintaxe:

{% if condição %}

{% else %}

{% endif %}

Exemplo:

{% if customer %}
Olá, {{ customer.first_name }}! Seja bem-vindo de volta!

{% else %}
Olá! Faça login ou crie sua conta.

{% endif %}

d) A tag unless (A menos que)

A tag unless é o oposto de if. O bloco de código dentro de unless é executado apenas se a condição for falsa. É útil para expressar negação de forma mais legível.

Sintaxe:

{% unless condição %}

{% endunless %}

Exemplo: Exibir um aviso se o produto não estiver disponível.

{% unless product.available %}
Produto esgotado!

{% endunless %}

e) Operadores de Comparação e Lógicos

Para construir condições, usamos operadores:

• Comparação:
• == (igual a)
• != (diferente de)
• > (maior que)
• < (menor que)
• >= (maior ou igual a)
• <= (menor ou igual a)
• Lógicos:
• and (E): Ambas as condições devem ser verdadeiras.
• or (OU): Pelo menos uma das condições deve ser verdadeira.
• not (NÃO): Inverte o valor booleano da condição.

Exemplo:

{% if product.available and product.price < 5000 %} {# Produto disponível E abaixo de R$50 #}
Oferta relâmpago! Garanta o seu!

{% elsif product.tags contains 'pré-venda' or product.type == 'Serviço' %} {# Pré-venda OU Serviço #}
Este item possui condições especiais.

{% endif %}

2. Loops: for

A tag for é usada para iterar sobre uma coleção de itens (array, lista de produtos, tags, variantes, etc.) e executar um bloco de código para cada item na coleção. Isso é extremamente poderoso para criar listagens dinâmicas.

Sintaxe:

{% for item in collection %}

{% endfor %}

Exemplo: Listar os títulos de todos os produtos em uma coleção.

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

{% endfor %}

a) Propriedades do Objeto forloop

Dentro de um loop for, o Liquid expõe um objeto especial chamado forloop, que fornece informações sobre o estado atual do loop. Isso é super útil para estilização ou lógica específica:

• forloop.length: O número total de itens na coleção.
• forloop.index: O índice da iteração atual (começando em 1).
• forloop.index0: O índice da iteração atual (começando em 0).
• forloop.rindex: O índice inverso da iteração (contando do final, começando em 1).
• forloop.rindex0: O índice inverso da iteração (contando do final, começando em 0).
• forloop.first: true se for a primeira iteração do loop.
• forloop.last: true se for a última iteração do loop.
• forloop.even: true se o forloop.index for um número par.
• forloop.odd: true se o forloop.index for um número ímpar.

Exemplo: Adicionar classes CSS para itens pares/ímpares ou primeiro/último.

{% for product in collection.products %}

{{ product.title }}
{{ product.price | money }}


{% endfor %}

b) Controlando o Loop for

Você pode controlar como o loop itera usando alguns parâmetros opcionais:

• limit: Limita o número de itens a serem iterados.
• offset: Começa a iteração a partir de um determinado índice.
• reversed: Inverte a ordem da iteração.
• cols: (Usado com tablerow para criar tabelas, um caso mais específico que veremos se necessário).

Exemplo: Mostrar apenas os 3 primeiros produtos, pulando o primeiro.

Nossos Destaques:

{% for product in collection.products limit: 3 offset: 1 %} {# Pula o 1º, pega os próximos 3 #}


{{ product.title }}

{% endfor %}

c) for com else

Assim como no if, um loop for pode ter um else opcional que é executado se a coleção estiver vazia.

Exemplo:

{% for product in collection.products %}
{{ product.title }}

{% else %}
Nenhum produto encontrado nesta coleção.

{% endfor %}

3. Estruturas Condicionais Avançadas: case / when

A tag case é útil quando você tem uma variável que pode ter vários valores diferentes, e você quer executar um bloco de código específico para cada um desses valores. É uma alternativa mais limpa para múltiplos elsif.

Sintaxe:

{% case valor_da_variavel %}
{% when 'opcao_1' %}

{% when 'opcao_2' %}

{% else %}

{% endcase %}

Exemplo: Personalizar o cabeçalho de uma página baseada em seu tipo.

{% case page.handle %}
{% when 'contato' %}
Fale Conosco
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 

Estamos prontos para te ajudar!

{% when 'sobre-nos' %}
Nossa História
Conheça a nossa jornada.

{% else %}
{{ page.title }}
Bem-vindo à nossa página.

{% endcase %}

4. Boas Práticas e Otimização no Liquid

• Simplicidade é a chave: Mantenha sua lógica Liquid o mais simples possível. Condições aninhadas demais ou loops complexos podem dificultar a leitura e a manutenção.
• Use variáveis intermediárias: Para condições ou cálculos complexos, armazene os resultados em variáveis (usando {% assign %}) para reutilizá-los e tornar o código mais legível.
• Evite loops desnecessários: Não itere sobre coleções grandes se você só precisa de um item específico.
• Minimize as chamadas de banco de dados: Cada vez que você acessa all_products, all_collections, etc., o Shopify precisa buscar dados. Tente otimizar para buscar apenas o que precisa.
• Comentários: Use {# Seu comentário #} para explicar lógica complexa.
• Testar, testar, testar: Sempre teste suas condições e loops em diferentes cenários para garantir que funcionem como esperado.

---

💻 Exemplos Práticos

Vamos aplicar esses conceitos diretamente em um tema Shopify!

Cenário: Queremos criar um componente de listagem de produtos que se adapta a diferentes situações.

Para simular, vamos imaginar que estamos editando um arquivo de snippet chamado product-grid-item.liquid ou diretamente em um arquivo de seção como main-collection-product-grid.liquid.

Passo 1: Criando um arquivo de snippet para o card de produto

No seu editor de código (ou na seção de "Arquivos" > "Snippets" no tema do Shopify admin), crie um novo arquivo chamado product-card.liquid.

{# snippets/product-card.liquid #}
{% comment %}
Este snippet renderiza um card de produto individual.
Espera receber um objeto 'product' como parâmetro.
{% endcomment %}
{% assign product_url = product.url %}
{% assign compare_at_price = product.compare_at_price %}
{% assign price = product.price %}


{% if product.featured_image %}

alt="{{ product.featured_image.alt | default: product.title }}"
loading="lazy">
{% else %}

Imagem Indisponível


{% endif %}
{{ product.title }}

{% if compare_at_price > price %}

{{ price | money }}


{{ compare_at_price | money }}


Promoção!

{% else %}

{{ price | money }}

{% endif %}

{% unless product.available %}

Esgotado

{% endunless %}
{# Exemplo de CASE/WHEN para tags específicas #}
{% case product.type %}
{% when 'Camiseta' %}
👕 Camiseta
{% when 'Calça' %}
👖 Calça
{% when 'Sapato' %}
👟 Sapato
{% else %}
🛒 {{ product.type }}
{% endcase %}

Passo 2: Usando o snippet em uma seção de coleção

Agora, em um arquivo de seção (ex: sections/main-collection-product-grid.liquid), podemos iterar sobre os produtos da coleção e incluir nosso snippet para cada um:

{# sections/main-collection-product-grid.liquid #}
{% comment %}
Esta seção exibe a grade de produtos de uma coleção.
{% endcomment %}

{% comment %}
Verifica se a coleção tem produtos antes de iniciar o loop.
Caso contrário, exibe uma mensagem amigável.
{% endcomment %}
{% if collection.products.size > 0 %}
{{ collection.title }}

{% for product in collection.products limit: 12 %} {# Limita a 12 produtos por página #}
{% render 'product-card', product: product %}
{% endfor %}

{% else %}
Nenhum produto encontrado nesta coleção. 😢

{% if customer %}
Que tal explorar todos os nossos produtos?

{% else %}
Crie sua conta para ver suas coleções favoritas!

{% endif %}
{% endif %}


{% schema %}
{
"name": "Grid de Produtos da Coleção",
"settings": [],
"presets": [
{
"name": "Grid de Produtos da Coleção"
}
]
}
{% endschema %}

---

🎯 Exercícios e Desafios

Hora de colocar a mão na massa! Estes exercícios vão te ajudar a consolidar o aprendizado:

1. Desafio 1: Mensagem de Carrinho Vazio Personalizada.

• Abra o arquivo sections/main-cart-items.liquid (ou similar, dependendo do seu tema).
• Localize a parte que exibe os itens do carrinho.
• Use um if para verificar se cart.item_count é igual a 0.
• Se for zero, exiba uma mensagem como "Seu carrinho está vazio 😔. Que tal explorar nossos produtos?" com um link para /collections/all. Se não for zero, exiba os itens normalmente.

2. Desafio 2: Destaque de Produtos em Pré-Venda.

• No seu snippet product-card.liquid que criamos (ou em outro lugar onde produtos são listados).
• Use uma condição if para verificar se product.tags contains 'pre-venda'.
• Se a condição for verdadeira, adicione um com a classe product-card__badge product-card__badge--pre-order e o texto "Pré-Venda!". Estilize essa badge com uma cor diferente (ex: azul claro).

3. Desafio 3: Menu de Navegação Ativo Dinâmico.

• Abra o arquivo do seu header (ex: sections/header.liquid ou snippets/main-menu.liquid).
• Em um loop for que itera sobre os links do menu (section.settings.menu.links ou similar).
• Use um if com a propriedade link.active. Se link.active for true, adicione a classe CSS is-active ao item do menu (
• ou ) para destacá-lo (ex: mudar cor, adicionar underline).

4. Desafio 4: Listagem de Variantes Apenas Disponíveis.

• Em uma página de produto (sections/main-product.liquid).
• Você provavelmente tem um loop for que itera sobre product.variants.
• Dentro desse loop, use um unless para verificar se variant.available é false. Se for, adicione uma classe CSS variant-unavailable ao elemento que representa a variante ou exiba a mensagem "(Esgotado)" ao lado do nome da variante.

---

📝 Resumo da Aula

Ufa! Que aula produtiva, não é mesmo? 💪 Hoje, nós desvendamos o poder das tags de controle no Liquid, que são essenciais para construir lojas Shopify dinâmicas e inteligentes.

• Aprendemos a tomar decisões com a lógica condicional (if, elsif, else, unless), exibindo ou ocultando conteúdo baseado em diversas condições.
• Dominamos os loops for, permitindo-nos iterar sobre coleções de dados e gerar listas de produtos, posts, links e muito mais de forma automatizada.
• Exploramos as propriedades do objeto forloop para personalizar ainda mais a estilização e o comportamento dentro dos loops.
• Vimos como a tag case/when oferece uma alternativa elegante para múltiplas condições.
• E, claro, sempre com foco nas boas práticas de código para garantir temas performáticos e fáceis de manter.

Com essas ferramentas em mãos, sua capacidade de criar layouts e funcionalidades complexas no Shopify acaba de aumentar exponencialmente!

---

🚀 Preparação para próxima aula

Parabéns por chegar até aqui! Na próxima aula, vamos dar um passo gigantesco em direção à criação de temas Shopify verdadeiramente profissionais e personalizáveis.

Vamos mergulhar nos "Sections e Blocks: Construindo Temas Modularizados e Editáveis". 🧱

Vocês vão aprender como usar o poder das Sections (seções) e Blocks (blocos) do Shopify para que partes da sua loja possam ser editadas e reordenadas diretamente no Customizer do Shopify, sem tocar no código. Isso é o que permite aos usuários finais criar páginas incríveis com facilidade. As tags de controle e loops que aprendemos hoje são a base para a lógica dentro dessas sections e blocks, então o conhecimento de hoje será crucial!

---

📚 Recursos Adicionais

• Documentação Oficial Liquid - Control Flow: https://shopify.dev/docs/api/liquid/tags/control-flow
• Documentação Oficial Liquid - for loops: https://shopify.dev/docs/api/liquid/tags/for
• Documentação Oficial Liquid - if/elsif/else/unless: (Coberto em Control Flow)
• Documentação Oficial Liquid - case/when: (Coberto em Control Flow)

Pratiquem bastante e não hesitem em experimentar. O Liquid é uma linguagem muito flexível, e a melhor forma de aprender é codificando!

Até a próxima aula! 👋