Olá, pessoal! 👋 Que bom ter vocês de volta para mais uma aula emocionante do nosso curso “Loja Shopify do Zero ao Avançado”!

Nas últimas aulas, começamos a explorar o universo do Shopify e, mais especificamente, a linguagem que dá vida e dinamismo às nossas lojas: o Liquid. Entendemos que o Liquid nos permite exibir informações dinâmicas, o que é crucial para qualquer e-commerce. Hoje, vamos dar um passo gigantesco e mergulhar fundo em como o Liquid armazena, organiza e nos permite acessar todos esses dados.

Preparem-se, pois esta aula é a base para qualquer personalização avançada no Shopify! Vamos descomplicar as variáveis, os objetos e as estruturas de dados no Liquid, e vocês verão como isso abre um leque de possibilidades para criar lojas verdadeiramente únicas e funcionais.

—

Aula 30 – Loja Shopify do Zero ao Avançado: Variáveis, objetos e estruturas de dados no Liquid

📚 O que você vai aprender nesta aula

Ao final desta aula, você será capaz de:

• Entender o conceito e a importância das variáveis no Liquid.
• Utilizar as tags assign e capture para declarar e atribuir valores a variáveis.
• Compreender o papel dos objetos Liquid e como eles fornecem acesso aos dados da sua loja Shopify.
• Identificar e acessar as propriedades de objetos globais do Shopify, como shop, product e collection.
• Distinguir e manipular as principais estruturas de dados no Liquid: strings, numbers, booleans, arrays e hashes.
• Aplicar for loops para iterar sobre arrays de dados, como listas de produtos ou imagens.
• Implementar boas práticas de código Liquid para torná-lo mais legível e eficiente.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, começamos a desvendar o Liquid, a poderosa linguagem de template que faz a magia acontecer no Shopify. Vimos como usar as chaves duplas {{ }} para exibir conteúdo dinâmico e as tags com chaves e percentuais {% %} para lógica de programação, como as condições if/else.

No entanto, para exibir um título de produto, o nome da loja, uma lista de imagens ou o preço de um item, precisamos saber de onde essas informações vêm e como o Liquid as organiza. É exatamente isso que vamos abordar hoje. Pensem nas variáveis, objetos e estruturas de dados como os “ingredientes” que o Liquid usa para “cozinhar” as informações que mostramos na nossa loja. Sem eles, nosso código seria estático e sem graça!

📖 Conteúdo Principal

Vamos mergulhar de cabeça nos pilares do tratamento de dados no Liquid. Entender cada um desses conceitos é fundamental para criar templates dinâmicos e flexíveis.

1. Variáveis no Liquid: Seus Contêineres de Informação 📦

Imagine que você precisa guardar um pedaço de informação (um nome, um número, uma frase) para usá-lo várias vezes em seu código, ou para fazer algum cálculo. As variáveis são como pequenas caixas ou contêineres que guardam esses valores. Elas permitem que você nomeie um valor e o referencie mais tarde, tornando seu código mais organizado, fácil de ler e reutilizável.

No Liquid, existem duas tags principais para criar variáveis: assign e capture.

a) A Tag assign: Atribuindo Valores Diretos

A tag assign é usada para atribuir um valor diretamente a uma variável. O valor pode ser uma string, um número, um booleano, ou até mesmo o resultado de uma expressão.

{% assign meu_nome = 'Professor Shopify' %}
{% assign idade = 10 + 5 %} {# idade será 15 #}
{% assign produto_disponivel = true %}

Para exibir o valor de uma variável, usamos a sintaxe de saída (chaves duplas {{ }}):

Olá, eu sou o {{ meu_nome }} e tenho {{ idade }} anos de experiência com Shopify!

b) A Tag capture: Capturando Blocos de Conteúdo

A tag capture é um pouco diferente. Ela permite que você “capture” o conteúdo gerado dentro de um bloco de código Liquid e atribua esse conteúdo (geralmente uma string) a uma variável. Isso é útil quando você precisa construir uma frase ou um trecho de HTML complexo e guardá-lo para uso posterior.

{% capture mensagem_boas_vindas %}
Bem-vindo(a) à nossa loja, {{ shop.name }}! Esperamos que você encontre o que procura.
{% endcapture %}
{{ mensagem_boas_vindas }}

Neste exemplo, todo o texto dentro do bloco capture, incluindo a variável shop.name que veremos a seguir, é processado e armazenado na variável mensagem_boas_vindas como uma única string.

💡 Dica de Boas Práticas: Use nomes de variáveis descritivos. Evite x, y, z. Prefira nome_produto, total_carrinho, titulo_pagina.

2. Objetos no Liquid: Portas de Acesso aos Dados da Shopify 🚪

Se as variáveis são contêineres de informações que você define, os objetos no Liquid são como grandes “dicionários” ou “estruturas” que a Shopify já te entrega, recheados com todos os dados da sua loja!

Cada página que você visita no Shopify (uma página de produto, uma coleção, o carrinho, etc.) torna certos objetos globais disponíveis para você usar no seu Liquid. Esses objetos contêm propriedades (pedaços específicos de informação) que descrevem o item em questão.

Alguns dos objetos globais mais importantes que você encontrará são:

• shop: Contém informações sobre a sua loja (nome, URL, endereço, configurações, etc.).
• product: Contém todos os detalhes do produto que está sendo exibido (título, preço, descrição, imagens, variantes, etc.). Disponível em páginas de produto.
• collection: Contém informações sobre a coleção atual (título, descrição, produtos associados, etc.). Disponível em páginas de coleção.
• customer: Informações sobre o cliente logado (nome, e-mail, pedidos, etc.).
• cart: Informações sobre o carrinho de compras do cliente (itens, total, etc.).
• page: Informações sobre a página estática atual (título, conteúdo, etc.).
• article e blog: Informações sobre posts de blog e o blog em si.

Acessando Propriedades de Objetos com o Ponto (.)

Para acessar uma propriedade específica dentro de um objeto, usamos a notação de ponto (.):

{{ objeto.propriedade }}

Exemplos:

• Nome da loja: {{ shop.name }}
• Título do produto: {{ product.title }}
• Preço do produto: {{ product.price }}
• Descrição da coleção: {{ collection.description }}
• Primeiro nome do cliente logado: {{ customer.first_name }}

É assim que obtemos dados dinâmicos da Shopify e os exibimos em nossos templates! A mágica acontece quando a Shopify preenche esses objetos com os dados corretos no momento em que a página é carregada.

3. Estruturas de Dados no Liquid: Os Tipos de Informação 📊

Os valores que guardamos em variáveis e que vêm dos objetos podem ser de diferentes “tipos”. Conhecer esses tipos de dados é crucial para saber como você pode manipulá-los.

a) String (Texto) 🅰️🅱️

Uma string é uma sequência de caracteres, ou seja, texto. É o tipo de dado mais comum.

{% assign nome = 'João' %}
{% assign saudacao = "Olá mundo!" %}

Strings são usadas para nomes, descrições, títulos, URLs, etc.

b) Number (Número) 🔢

Números podem ser inteiros (10, 100) ou decimais (3.14, 99.99).

{% assign quantidade = 5 %}
{% assign preco = 19.99 %}

Você pode realizar operações matemáticas básicas com números (usando filtros, que veremos na próxima aula, ou expressões simples com assign).

c) Boolean (Verdadeiro/Falso) ✅❌

Um booleano tem apenas dois valores possíveis: true (verdadeiro) ou false (falso). Eles são fundamentais para controlar a lógica condicional (if/else).

{% assign produto_em_estoque = true %}
{% assign usuario_logado = false %}
{% if produto_em_estoque %}
Produto disponível para compra!

{% else %}
Produto esgotado.

{% endif %}

Muitas propriedades de objetos são booleanas, como product.available ou customer.logged_in.

d) Array (Lista/Vetor) 📚

Um array é uma coleção ordenada de itens. Pense em uma lista de compras, onde a ordem dos itens importa. No Shopify, você encontrará arrays em muitos lugares, como a lista de imagens de um produto, a lista de produtos em uma coleção, ou a lista de variantes de um produto.

{% assign cores = 'vermelho,azul,verde' | split: ',' %}
{# 'split' é um filtro que transforma uma string em um array, veremos mais sobre filtros na próxima aula #}
{# Exemplo de array vindo de um objeto global: #}
{% assign imagens_produto = product.images %} {# isso será um array de objetos de imagem #}
{% assign produtos_colecao = collection.products %} {# isso será um array de objetos de produto #}

Acessando itens de um Array:

Você pode acessar itens individuais em um array usando seu índice (posição), que começa em 0 para o primeiro item.

{{ cores[0] }} {# Saída: vermelho #}
{{ imagens_produto[1].src }} {# Saída: A URL da segunda imagem do produto #}

Iterando sobre um Array com for loop:

A maneira mais comum e poderosa de trabalhar com arrays é usar a tag for para percorrer cada item da lista.

{% for cor in cores %}
{{ cor }}

{% endfor %}

{# Para exibir todas as imagens de um produto: #}

{% for image in product.images %}
 {# 'img_url' é um filtro #}
{% endfor %}

A tag for possui algumas propriedades úteis dentro do loop:

• forloop.index: O índice da iteração atual (começa em 1).
• forloop.index0: O índice da iteração atual (começa em 0).
• forloop.first: true se for a primeira iteração.
• forloop.last: true se for a última iteração.
• forloop.length: O número total de itens no array.

{% for item in collection.products %}
{% if forloop.first %}
Este é o primeiro produto da coleção!

{% endif %}
{{ forloop.index }}. {{ item.title }}
{% endfor %}

e) Hash (Objeto/Dicionário) 🔑

Um hash (muitas vezes chamado de objeto ou dicionário em outras linguagens) é uma coleção não ordenada de pares chave-valor. Cada item dentro de um hash tem um “nome” (a chave) e um “valor” associado. Pense neles como objetos JavaScript.

O uso mais comum de hashes no Shopify é para dados mais complexos e estruturados, como metafields. Metafields são campos personalizados que você pode adicionar a produtos, coleções, clientes, etc., para armazenar dados adicionais que o Shopify não oferece por padrão.

{# Exemplo de acesso a um metafield aninhado #}
{{ product.metafields.informacoes_extras.tabela_nutricional }}
{# Aqui, 'informacoes_extras' é o namespace e 'tabela_nutricional' é a chave do metafield. #}

Você acessa os valores de um hash da mesma forma que acessa as propriedades de um objeto: usando a notação de ponto (.).

💡 Dica de Otimização: Minimizar o número de iterações e chamadas a objetos desnecessárias pode melhorar a performance da sua loja. Pense sempre no que você realmente precisa exibir.

—

💻 Exemplos Práticos

Vamos aplicar o que aprendemos com alguns exemplos práticos que você pode usar na sua loja.

Cenário: Você está personalizando a página de detalhes de um produto (product.liquid ou em um section de produto).

Exemplo 1: Usando assign e capture para uma Mensagem Dinâmica

Vamos criar uma mensagem de boas-vindas na página de um produto, que varie se o produto estiver disponível ou não.

{% comment %}
Primeiro, vamos atribuir algumas variáveis básicas
{% endcomment %}
{% assign nome_produto_curto = product.title | split: ' ' | first %} {# Apenas a primeira palavra do título, usaremos filtros que veremos depois #}
{% assign produto_disponivel = product.available %}
{% comment %}
Agora, usamos capture para construir a mensagem
{% endcomment %}
{% capture mensagem_produto %}
Olá! Você está vendo o incrível {{ product.title }}.

{% if produto_disponivel %}
Temos este item em estoque por apenas {{ product.price | money }}! Não perca!

{% else %}
Ops! Parece que o {{ nome_produto_curto }} está temporariamente fora de estoque. Que pena! 😞

{% endif %}
{% endcapture %}

{{ mensagem_produto }}

Explicação:

• nome_produto_curto: pegamos a primeira palavra do título do produto para uma mensagem mais casual.
• produto_disponivel: uma variável booleana que nos diz se o produto está em estoque.
• mensagem_produto: usa capture para construir toda a mensagem, incluindo lógica condicional, e depois a exibimos.

Exemplo 2: Exibindo Informações da Loja (shop Object)

Podemos exibir o nome e a URL da sua loja em qualquer lugar, por exemplo, no rodapé ou cabeçalho.

Explicação:

• shop.name: Pega o nome da loja configurado no admin.
• shop.url: Pega a URL principal da loja.
• 'now' | date: "%Y": Um filtro (veremos na próxima aula) para pegar o ano atual.

Exemplo 3: Detalhes do Produto (product Object)

Vamos exibir os detalhes mais importantes de um produto.

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

{{ product.price | money }}
 {# 'money' é um filtro para formatar o preço #}

{% if product.compare_at_price > product.price %}
De: {{ product.compare_at_price | money }}

{% endif %}

{{ product.description }}

{% if product.available %}
Adicionar ao Carrinho
{% else %}
Esgotado

{% endif %}

Explicação:

• Acessamos product.title, product.price, product.compare_at_price, product.description e product.available.
• Usamos uma condição if para mostrar o preço original se o produto estiver em promoção (compare_at_price é maior que price).
• Usamos product.available (booleano) para decidir qual botão de compra exibir.

Exemplo 4: Criando uma Galeria de Imagens com for loop (Array)

Um dos usos mais comuns de arrays é exibir uma lista de imagens.

{% for image in product.images %}

{% if forloop.first %}
Imagem Principal
{% endif %}
{% else %} {# Isso acontece se o array estiver vazio #}
Nenhuma imagem disponível para este produto.

{% endfor %}

Explicação:

• Iteramos sobre product.images, que é um array de objetos de imagem.
• Para cada image no array, acessamos sua propriedade src (URL da imagem).
• Usamos img_url: 'grande' (um filtro) para especificar o tamanho da imagem.
• A condição forloop.first é usada para adicionar um rótulo especial à primeira imagem.
• A tag else dentro do for loop é executada se o array product.images estiver vazio, garantindo que sempre haja uma mensagem.

Exemplo 5: Acessando Metafields (Hash)

Suponha que você tenha criado um metafield para um produto chamado detalhes_tecnicos (namespace) com uma chave material e outra peso.

{% comment %}
Configurar metafields no admin Shopify (Configurações > Metafields > Produtos)
Namespace: detalhes_tecnicos
Key: material (tipo: texto de linha única)
Key: peso (tipo: número inteiro)
{% endcomment %}
{% if product.metafields.detalhes_tecnicos.material or product.metafields.detalhes_tecnicos.peso %}

Especificações Técnicas
{% if product.metafields.detalhes_tecnicos.material %}
Material: {{ product.metafields.detalhes_tecnicos.material }}

{% endif %}
{% if product.metafields.detalhes_tecnicos.peso %}
Peso: {{ product.metafields.detalhes_tecnicos.peso }} kg

{% endif %}

{% endif %}

Explicação:

• Acessamos os metafields usando a notação product.metafields.namespace.key.
• Usamos condições if para verificar se os metafields existem antes de tentar exibi-los, evitando erros caso o campo esteja vazio.

—

🎯 Exercícios e Desafios

Hora de colocar a mão na massa e solidificar o que aprendemos!

Desafio 1 (Básico): Minha Apresentação no Liquid 📝

Crie um novo snippet (meu-perfil.liquid) e faça o seguinte:

1. Use assign para criar uma variável seu_nome com seu nome.

2. Use assign para criar uma variável sua_profissao com “Desenvolvedor Shopify” (ou sua profissão).

3. Use capture para montar uma frase de apresentação que inclua seu nome e profissão. Ex: “Olá, meu nome é [Seu Nome] e eu sou um(a) [Sua Profissão].”

4. Exiba essa frase em seu snippet.

5. Inclua este snippet em um arquivo de template principal (ex: index.liquid ou product.liquid) para ver o resultado.

Desafio 2 (Intermediário): Listando Produtos de uma Coleção 🛍️

Vamos simular uma lista de produtos em uma página de coleção (você pode testar isso no collection.liquid ou em um section de coleção).

1. Assumindo que você tem acesso ao objeto collection (que estará disponível em uma página de coleção real).

2. Use um for loop para iterar sobre os primeiros 5 produtos da coleção (collection.products). Você pode usar o filtro limit: 5 para isso, que veremos na próxima aula, mas por enquanto, pode simplesmente deixar o loop percorrer todos os produtos e o Shopify limitará se houver menos de 5, ou você pode usar forloop.index <= 5 dentro do loop.

3. Para cada produto, exiba:

• O título do produto (product.title).
• O preço formatado (product.price | money).
• Uma imagem em miniatura (product.featured_image.src | img_url: 'small').

4. Adicione uma condição: se for o primeiro produto da lista (forloop.first), adicione a classe CSS primeiro-produto ao contêiner dele.

Desafio 3 (Avançado): Selo de Oferta com Condição 🏷️

Baseando-se no Desafio 2, vamos aprimorar a exibição dos produtos:

1. Para cada produto que você está exibindo, adicione uma condição if que verifica se o produto está em promoção. Um produto está em promoção se seu product.compare_at_price for maior que seu product.price.

2. Se o produto estiver em promoção, exiba um OFERTA! ao lado do título do produto.

3. Se o produto estiver esgotado (product.available for false), exiba um ESGOTADO no lugar do preço.

Dica: Para testar, você pode criar alguns produtos no admin com preços de comparação e outros esgotados.

---

📝 Resumo da Aula

Ufa! Que aula intensa e produtiva! Cobrimos a espinha dorsal do manuseio de dados no Liquid:

• As variáveis, que são seus contêineres para armazenar dados usando assign e capture.
• Os objetos Liquid, que são as portas de entrada para todos os dados da sua loja Shopify (como shop, product, collection).
• As estruturas de dados fundamentais: strings (texto), numbers (números), booleans (verdadeiro/falso), arrays (listas) e hashes (pares chave-valor).
• Vimos como acessar propriedades de objetos com a notação de ponto (.) e como iterar sobre arrays com o poderoso for loop.

Dominar esses conceitos é o que diferencia um desenvolvedor Shopify novato de um intermediário. Agora você tem as ferramentas para acessar praticamente qualquer dado na sua loja e começar a construir lógicas complexas e dinâmicas!

🚀 Preparação para próxima aula

Com o entendimento sólido de variáveis, objetos e estruturas de dados, estamos prontos para a próxima etapa: Filtros Liquid!

Na próxima aula, vamos aprender como manipular, formatar e transformar esses dados de maneiras incríveis. Quer colocar uma string em maiúscula? Formatar um preço em moeda? Reduzir um texto? Pegar a primeira imagem de um array? Os filtros Liquid são a resposta para tudo isso e muito mais! Prepare-se para tornar seus dados ainda mais apresentáveis e funcionais.

📚 Recursos Adicionais

• Documentação Oficial do Liquid - Variáveis: https://shopify.dev/docs/api/liquid/tags/assign
• Documentação Oficial do Liquid - Capture: https://shopify.dev/docs/api/liquid/tags/capture
• Documentação Oficial do Shopify - Objetos Globais Liquid (Visão Geral): https://shopify.dev/docs/themes/liquid/reference/objects
• Documentação Oficial do Shopify - Objeto product: https://shopify.dev/docs/themes/liquid/reference/objects/product
• Documentação Oficial do Shopify - Objeto forloop: https://shopify.dev/docs/api/liquid/objects/forloop

Vejo vocês na próxima aula para desvendar o poder dos filtros! 👋 Até lá, pratiquem bastante os desafios!