Aula 30 – Loja Shopify do Zero ao Avançado: Variáveis, Objetos e Estruturas de Dados no Liquid

🎉 Bem-vindos de volta, futuros experts em Shopify! Nesta aula, mergulharemos no universo do Liquid, explorando variáveis, objetos e estruturas de dados. Dominar esses conceitos é crucial para criar temas dinâmicos e personalizados, exibindo informações relevantes de forma eficiente na sua loja.

📚 O que você vai aprender nesta aula

• O que são variáveis no Liquid e como utilizá-las.
• Tipos de variáveis disponíveis: strings, numbers, booleans, arrays e nil.
• Entender a estrutura de objetos e como acessar seus atributos (propriedades).
• Manipular estruturas de dados como arrays e loops.
• Aplicar filtros para formatar e transformar dados.
• Implementar lógica condicional para exibir conteúdo dinamicamente.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, aprendemos sobre HTML, CSS e JavaScript no contexto do Shopify. Vimos como estruturar o layout da loja, estilizar sua aparência e adicionar interatividade. Agora, com o Liquid, vamos dar vida aos nossos temas, exibindo informações dinamicamente a partir do banco de dados da sua loja Shopify. Lembre-se da estrutura de arquivos de um tema Shopify que vimos na Aula 20!

📖 Conteúdo Principal

Variáveis

Variáveis em Liquid são representadas por duas chaves duplas {{ }} e armazenam valores que podem ser usados no seu tema. Pense nelas como recipientes que guardam informações como o nome do produto, o preço, a descrição, etc.

• Tipos de Variáveis:
• String: Texto entre aspas simples ou duplas. Ex: {{ "Olá, mundo!" }}
• Number: Números inteiros ou decimais. Ex: {{ 10 }}, {{ 2.5 }}
• Boolean: Verdadeiro ou falso. Ex: {{ true }}, {{ false }}
• Array: Lista de valores. Ex: {{ product.images }} (array de imagens do produto)
• Nil: Representa a ausência de valor.

Objetos

Objetos são estruturas que agrupam informações relacionadas. No Shopify, temos acesso a diversos objetos globais como shop, customer, product, cart, etc. Para acessar os atributos (propriedades) de um objeto, usamos a notação de ponto ..

Exemplo: {{ product.title }} (exibe o título do produto), {{ shop.name }} (exibe o nome da loja).

Estruturas de Dados: Arrays e Loops

Frequentemente, precisamos lidar com listas de itens, como uma coleção de produtos ou as variantes de um produto. Para isso, usamos loops.

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

{% endfor %}

Este código itera sobre cada produto em uma coleção e exibe o título e o preço. Note o uso do filtro | money para formatar o preço como moeda.

Lógica Condicional

Podemos controlar o que é exibido no tema com base em certas condições.

{% if customer %}
Olá, {{ customer.first_name }}!

{% else %}
Bem-vindo, visitante!

{% endif %}

💻 Exemplos Práticos

Vamos criar um exemplo prático exibindo informações do produto na página de detalhes:

{{ product.title }}
 
📚 Informações da Aula
 
Nível: Intermediário
 
Tempo estimado: 15-20 minutos
 


{{ product.description }}

Preço: {{ product.price | money }}

{% if product.available %}
Comprar
{% else %}
Produto indisponível

{% endif %}

🎯 Exercícios e Desafios

1. Crie um loop que exiba os 5 produtos mais recentes da sua loja.

2. Exiba uma mensagem diferente para clientes logados e não logados.

3. Crie uma lista de links para as suas coleções.

📝 Resumo da Aula

Nesta aula, aprendemos sobre variáveis, objetos, estruturas de dados e lógica condicional no Liquid. Esses conceitos são fundamentais para criar temas dinâmicos e personalizados para sua loja Shopify.

🚀 Preparação para próxima aula

Na próxima aula, vamos aprofundar nossos conhecimentos sobre o Liquid, explorando tags, filtros e snippets, permitindo a criação de temas ainda mais complexos e reutilizáveis.

📚 Recursos Adicionais

• Documentação do Liquid
• Tutoriais do Shopify

Lembre-se de praticar! A prática é a chave para o domínio do Liquid e a criação de lojas online incríveis! 🚀