Leodario.com

Leodario.com – Tudo sobre Tecnologia

Aula 38 – Loja Shopify do Zero ao Avançado: Debugging e otimização de código Liquid

Imagem destacada da aula Shopify

Olá, meus queridos e queridas desenvolvedores Shopify! Sejam muito bem-vindos à nossa Aula 38 do curso “Loja Shopify do Zero ao Avançado”! 👋

Chegamos a um ponto crucial da nossa jornada: o debugging e a otimização de código Liquid. Construir lojas incríveis é um desafio, mas garantir que elas funcionem perfeitamente e com a máxima performance é o que realmente nos diferencia como profissionais. Nesta aula, vamos mergulhar nas ferramentas e técnicas para encontrar e corrigir problemas, além de afinar nosso código para que ele rode como um relógio suíço! 🚀

Já cobrimos muita coisa: estrutura de temas, Liquid a fundo, seções, snippets, templates personalizados e até metafields. Agora, vamos garantir que todo esse conhecimento seja aplicado de forma robusta e eficiente. Preparados? Vamos lá!

—

Aula 38 – Loja Shopify do Zero ao Avançado: Debugging e otimização de código Liquid

📚 O que você vai aprender nesta aula

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

  • Identificar e depurar erros comuns em código Liquid utilizando as ferramentas e filtros disponíveis. 🐛
  • Compreender os principais gargalos de performance que podem ser causados por código Liquid ineficiente. 🐢➡️🐇
  • Aplicar técnicas avançadas de otimização de código Liquid para melhorar a velocidade e a performance da sua loja Shopify. ✨
  • Utilizar o cache de Liquid de forma estratégica para acelerar o carregamento de seções e snippets. 💨
  • Adotar boas práticas de desenvolvimento para escrever código Liquid mais robusto, limpo e performático. ✅

🔗 Conectando com aulas anteriores

Nas aulas anteriores, construímos grande parte da estrutura da nossa loja, desde os templates de produto e coleção até a manipulação de dados com metafields e a criação de seções dinâmicas. Tudo isso envolveu a escrita de muito código Liquid para exibir conteúdo, processar dados e controlar a lógica visual da loja.

Por exemplo, na Aula 25: Implementando funcionalidades avançadas com Liquid (filtros, tags, objetos), aprendemos a manipular strings, arrays e objetos. Na Aula 28: Criando seções e blocos dinâmicos, construímos componentes reutilizáveis. E na Aula 33: Personalizando templates de produto e coleção, aplicamos Liquid para exibir informações específicas de cada item.

Agora, imagine que um desses snippets não está exibindo o valor correto de um metafield, ou que uma seção de produtos relacionados está demorando muito para carregar. É exatamente aí que o conhecimento de debugging e otimização se torna indispensável. Vamos pegar todo esse conhecimento de Liquid e dar a ele uma camada de superpoderes! 💪

📖 Conteúdo Principal

1. Entendendo o Problema: Onde o Liquid Pode Falhar?

O Liquid é uma linguagem de template server-side, o que significa que ele é processado no servidor da Shopify antes que a página seja enviada para o navegador do usuário. Erros em Liquid podem não aparecer diretamente no console do navegador como erros de JavaScript, mas podem resultar em:

  • Conteúdo ausente ou incorreto: Um valor de variável não está sendo exibido, um loop não está iterando corretamente.
  • Layout quebrado: Um erro de lógica que impede a renderização de elementos HTML.
  • Performance lenta: Código ineficiente que causa atrasos no processamento da página.
  • Erros no log do Admin: Em casos mais graves, a Shopify pode registrar erros no log do tema.

2. Debugging de Código Liquid: Caçando os Bugs 🕵️‍♀️

A Shopify oferece algumas ferramentas e filtros nativos que são seus melhores amigos na hora de depurar código Liquid.

2.1. O Filtro debugger: Seu Melhor Amigo!

O filtro debugger é, sem dúvida, a ferramenta mais poderosa para inspecionar o estado das suas variáveis Liquid. Quando você aplica este filtro a um objeto ou variável, ele irá renderizar uma representação HTML detalhada desse objeto, mostrando todas as suas propriedades e valores.

Quando usar:

  • Para verificar o conteúdo de um objeto complexo (produto, coleção, cliente, metafields).
  • Para entender a estrutura de um array ou hash.
  • Para garantir que uma variável contém o valor esperado em um determinado ponto do seu código.

Exemplo Básico:



{% assign meu_produto = all_products['nome-do-seu-produto'] %}


Verificando o produto:


{{ meu_produto | debugger }}


{% comment %} Para depurar uma coleção {% endcomment %}


{% assign minha_colecao = collections['nome-da-sua-colecao'] %}


Verificando a coleção:




{{ minha_colecao | debugger }}


{% comment %} Para depurar o objeto global shop {% endcomment %}


Verificando o objeto shop:




{{ shop | debugger }}




Dica: Use a tag 


 para que a saída formatada do debugger seja mais fácil de ler. A saída é HTML, então o navegador a renderiza.


2.2. O Filtro json: Uma Visão Mais Limpa


Para uma representação mais limpa e ideal para copiar e colar ou para inspecionar estruturas de dados que serão usadas em JavaScript, o filtro json é excelente. Ele converte um objeto Liquid em uma string JSON.


Quando usar:


    

  •   Quando você precisa ver rapidamente o conteúdo de um objeto sem a formatação extensa do debugger.
    • 

  •   Para depurar dados que você pretende passar para o JavaScript.
    • 



Exemplo:




{% assign meu_produto = all_products['nome-do-seu-produto'] %}


Produto em JSON:


{{ meu_produto | json }}


{% assign meu_array = "item1,item2,item3" | split: "," %}


Array em JSON:




{{ meu_array | json }}




2.3. Isolando o Problema: Estratégias Práticas


    

  •   Comentários: Se você suspeita que uma parte específica do código está causando um problema, comente-a usando {% comment %} ... {% endcomment %} e veja se o problema desaparece. Isso ajuda a isolar a origem.
    • 

  •   Testes Incrementais: Adicione seu código em pequenos pedaços e teste cada adição. Isso é especialmente útil para lógicas complexas.
    • 

  •   Verificações Condicionais: Use if statements para verificar se variáveis existem ou têm o valor esperado antes de tentar usá-las.
    • 





{% if product.metafields.custom.minha_info %}


{{ product.metafields.custom.minha_info }}


{% else %}


Metafield 'minha_info' não encontrado ou vazio.


{% endif %}






    

  •   Navegador e Ferramentas do Desenvolvedor: Lembre-se que o Liquid gera HTML, CSS e JS. Se algo não aparece na tela, inspecione o HTML gerado (Ctrl+Shift+I no Chrome) para ver se o Liquid realmente imprimiu o que você esperava. Muitos "erros de Liquid" são, na verdade, problemas no HTML ou CSS gerado pelo Liquid.
    • 



3. Otimização de Código Liquid: Construindo Lojas Velozes ⚡


A velocidade da loja é fundamental para a experiência do usuário, SEO e taxas de conversão. Código Liquid otimizado significa menos tempo de processamento no servidor e um carregamento mais rápido para o usuário.


3.1. Por Que Otimizar?


    

  •   Experiência do Usuário (UX): Ninguém gosta de uma loja lenta.
    • 

  •   SEO: Motores de busca como o Google penalizam sites lentos.
    • 

  •   Taxa de Conversão: Lojas mais rápidas vendem mais.
    • 

  •   Core Web Vitals: Métricas importantes de performance que afetam seu ranking.
    • 



3.2. Gargalos Comuns em Liquid e Como Evitá-los


    

  •   Loops Excessivos e Ineficientes:
    • 

  •   Anti-padrão: Iterar sobre objetos all_products ou all_collections sem necessidade, especialmente em loops aninhados. Isso força o servidor a carregar e processar muitos dados.
    • 

  •   Melhor Prática: Acesse objetos diretamente pelo handle ou ID quando possível (ex: all_products['meu-produto']). Se precisar iterar, use filtros como where ou limit para reduzir o escopo.
    • 





{% comment %} Anti-padrão: Busca ineficiente em loop {% endcomment %}


{% for product in collections.all.products %}


{% if product.title contains 'Camiseta' %}




{% endif %}


{% endfor %}


{% comment %} Melhor Prática: Acesse coleções específicas ou use filtros {% endcomment %}


{% for product in collections['camisetas'].products limit: 10 %}




{% endfor %}






    

  •   Acessos Redundantes a metafields ou variants dentro de loops:
    • 

  •   Anti-padrão: Chamar product.metafields ou product.variants repetidamente dentro de um loop de produtos. Embora a Shopify faça algum cache interno, acessos excessivos ainda podem ser caros.
    • 



 Melhor Prática: Se você precisa de um dado de metafield para todos* os produtos em um loop, extraia-o uma vez por produto ou considere se ele pode ser acessado de forma mais eficiente.




{% for product in collection.products %}


{{ product.title }}


{% comment %} Custo repetitivo se muitos produtos {% endcomment %}


{% if product.metafields.custom.promocao %}


Em promoção!


{% endif %}


{% endfor %}






Neste caso, não há uma solução Liquid muito diferente, mas é importante estar ciente de que cada product.metafields é uma chamada (ou acesso a um mapa). Se você está exibindo muitos produtos, minimize a complexidade dentro do loop.


    

  •   Lógica Complexa em Lugares Inapropriados:
    • 

  •   Anti-padrão: Ter um único snippet ou seção com centenas de linhas de lógica Liquid complexa, muitas condicionais e loops aninhados.
    • 

  •   Melhor Prática: Divida sua lógica em snippets menores e reutilizáveis. Isso não só melhora a legibilidade e manutenção, mas também pode ajudar o Shopify a otimizar o cache de partes do seu template.
    • 



    

  •   Saída de JSON Grande e Não Otimizada:
    • 

  •   Anti-padrão: Gerar blocos enormes de JSON (ex: para dados estruturados de SEO) com muitas informações desnecessárias ou redundantes.
    • 

  •   Melhor Prática: Use o filtro json com cuidado, selecionando apenas os campos essenciais. Utilize o strip_newlines e strip para remover espaços em branco desnecessários do JSON gerado, o que reduz o tamanho do arquivo.
    • 





{% assign produto_seo_data = product | pick: 'id', 'title', 'price', 'url' %}








3.3. Cache de Liquid: Acelere Sua Loja! ⚡


A Shopify tem um sistema de cache robusto para Liquid. Entender como ele funciona e como podemos influenciá-lo é vital para a performance.


    

  •   Tags render e include (OBS: include é legado!)
    • 

  •   A tag render substituiu a tag include (que ainda funciona, mas é recomendável evitar). A principal diferença para otimização é que render permite o uso de cache.
    • 

  •   Quando você usa {% render 'snippet-name' %}, o snippet é renderizado e seu output pode ser cacheados se o contexto permitir.
    • 

  •   Parâmetro cache: O mais poderoso! Permite cachear a saída de um snippet por um período.
    • 





{% render 'meu-snippet-carregado' with variavel_do_snippet, cache: true %}






Isso cacheia o output do snippet meu-snippet-carregado por uma hora, por padrão, se não houver variáveis dinâmicas que impeçam o cache. Se você passar um objeto (como um produto) no with, a Shopify usará o ID desse objeto para cachear o snippet de forma inteligente.


Exemplo com objeto:




{% render 'product-card' with product, cache: product.id %}






Aqui, product-card será cacheados individualmente para cada produto, usando o product.id como chave de cache. Isso é extremamente eficiente para grids de produtos!


    

  •   Considerações sobre o Cache:
    • 

  •   O cache é quebrado automaticamente quando o conteúdo que o snippet usa é alterado no Admin da Shopify.
    • 



 Cache é para output idêntico*. Se o conteúdo do snippet muda com base em variáveis dinâmicas (ex: customer.logged_in, cart.item_count), o cache pode não ser efetivo ou precisa de uma chave de cache mais específica.


    

  •   Não cacheie todo o seu tema. Identifique seções que são relativamente estáticas ou que dependem de um objeto específico para gerar seu conteúdo.
    • 



3.4. Boas Práticas de Otimização no Dia a Dia


    

  •   Mantenha o Código Limpo e Modular: Use snippets e seções para organizar a lógica. Código legível é mais fácil de otimizar.
    • 

  •   Minimizar Operações no Loop: Tente fazer o máximo de pré-processamento fora dos loops.
    • 

  •   Use where, map, sort: Filtros Liquid são otimizados para operações de array/coleção.
    • 





{% assign active_products = collection.products | where: "available", true %}


{% for product in active_products %}




{% endfor %}






    

  •   Remova Código Não Utilizado: Deletar snippets, seções ou blocos de código Liquid que não são mais necessários. Cada linha de código adiciona um overhead, mesmo que mínimo.
    • 

  •   Teste com Ferramentas de Performance: Use o Lighthouse do Chrome ou o PageSpeed Insights do Google para identificar gargalos de performance. Embora eles não apontem diretamente "erros de Liquid", a lentidão geral da página frequentemente tem raízes no processamento de templates.
    • 



4. Ferramentas e Recursos Adicionais para Debugging e Otimização


    

  •   Shopify CLI (para desenvolvimento local): Ao usar o shopify theme dev ou shopify theme serve, você pode ver erros de Liquid diretamente no seu terminal, o que é muito útil.
    • 



 Theme Check (extensão VS Code ou CLI): Uma ferramenta da Shopify que analisa seu código em busca de erros, vulnerabilidades e problemas de performance, incluindo boas práticas de Liquid. Isso é um must-have!*


    

  •   Análise de Desempenho do Tema no Admin Shopify: Em Shopify Admin > Loja Virtual > Temas > Ações > Analisar desempenho do tema. Fornece insights sobre a velocidade da sua loja e sugestões de otimização.
    • 



---


💻 Exemplos Práticos


Vamos aplicar o que aprendemos com alguns exemplos.


Exemplo 1: Depurando um Metafield que Não Aparece


Cenário: Você tem um metafield personalizado product.metafields.custom.informacao_extra para seus produtos, mas ele não está sendo exibido na página do produto.


Código no sections/main-product.liquid (simplificado):






{{ product.title }}


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



{{ product.description }}


{% comment %} Linha que deveria exibir o metafield {% endcomment %}


Informação extra: {{ product.metafields.custom.informacao_extra }}








Passos para Depurar:


1.  Suspeita: O metafield não está sendo carregado, ou o nome está errado, ou ele está vazio.


2.  Usar debugger: Adicione o filtro debugger ao objeto product ou diretamente ao metafield.






{{ product.title }}


{{ product.description }}


{% comment %} Debugging do objeto produto completo {% endcomment %}


DEBUGGER PRODUTO: {{ product | debugger }}


{% comment %} Debugging específico do namespace custom {% endcomment %}


DEBUGGER METAFOLDS CUSTOM: {{ product.metafields.custom | debugger }}


Informação extra: {{ product.metafields.custom.informacao_extra }}








3.  Analisar a Saída:


    

  •   Se product | debugger mostrar o produto completo mas sem a propriedade metafields.custom.informacao_extra, o problema pode ser:
    • 

  •   Nome do metafield incorreto (ex: informacao_extra vs informacao_adicional).
    • 

  •   Metafield não preenchido para aquele produto específico.
    • 

  •   Metafield deletado no Admin.
    • 

  •   Se product.metafields.custom | debugger mostrar o namespace custom e dentro dele o informacao_extra com o valor correto, então o problema pode ser de renderização HTML ou CSS que está escondendo-o (use o inspetor do navegador).
    • 

  •   Se o debugger mostrar que o valor está nil ou vazio, você encontrou a razão: o metafield não contém dados.
    • 



Screenshot/Vídeo (descrição): Eu mostraria a página do produto com a saída do debugger e do json na tela, destacando a estrutura do objeto product e onde o metafield deveria aparecer. Em seguida, mostraria o Admin da Shopify verificando o metafield para confirmar seu nome e valor.


---


Exemplo 2: Otimizando um Loop de Produtos Relacionados


Cenário: Você tem uma seção de produtos relacionados que exibe 10 produtos da mesma coleção, mas ela está lenta.


Código Ineficiente (sections/related-products.liquid):




{% comment %} ASSUMIMOS que 'product' é o produto atual da página {% endcomment %}


{% assign current_product_tags = product.tags %}


Produtos Relacionados




{% for related_product in collections.all.products %}


{% if related_product.id != product.id and related_product.tags contains current_product_tags.first and forloop.index <= 10 %}






{{ related_product.title }}


{{ related_product.title }}


{{ related_product.price | money }}






{% endif %}


{% endfor %}








Problema: collections.all.products itera sobre todos os produtos da loja, o que é um custo altíssimo para uma seção que só precisa de 10 produtos. O filtro contains em tags também não é o mais eficiente aqui.


Código Otimizado:




{% comment %} ASSUMIMOS que 'product' é o produto atual da página {% endcomment %}


{% comment %} Tentaremos encontrar produtos da mesma coleção ou com a mesma tag principal {% endcomment %}


{% assign related_collection = product.collections.first %}


{% assign related_products_count = 0 %}


Produtos Relacionados




{% if related_collection %}


{% for related_product in related_collection.products %}


{% if related_product.id != product.id %}


{% render 'product-card', product: related_product, cache: related_product.id %}


{% assign related_products_count = related_products_count | plus: 1 %}


{% if related_products_count == 10 %}


{% break %}


{% endif %}


{% endif %}


{% endfor %}


{% else %}


Não há produtos relacionados para exibir.


{% endif %}








Explicação da Otimização:


1.  Escopo Reduzido: Em vez de collections.all.products, agora iteramos sobre related_collection.products (assumindo que o produto atual pertence a pelo menos uma coleção). Isso reduz drasticamente o número de produtos a serem processados.


2.  Uso de Snippet e Cache: Criamos um snippet product-card.liquid (que conteria o HTML de um cartão de produto) e o renderizamos com {% render 'product-card', product: related_product, cache: related_product.id %}. Isso garante que cada cartão de produto seja cacheados individualmente, evitando re-renderização desnecessária para produtos que já foram vistos.


3.  break para Limitar o Loop: Usamos {% break %} assim que atingimos 10 produtos, evitando iterações desnecessárias.


4.  Lógica Direta: Removemos a lógica de tags contains dentro do loop, que é menos eficiente. Agora a relação é feita pela coleção. Poderíamos refinar ainda mais a lógica de seleção de produtos, talvez por tags ou metafields, mas sempre visando minimizar as iterações e a complexidade.


Screenshot/Vídeo (descrição): Eu mostraria a ferramenta Lighthouse ou PageSpeed Insights com a pontuação de performance antes e depois da otimização, destacando a melhoria no tempo de carregamento. Em seguida, mostraria o código otimizado e o snippet product-card.liquid para ilustrar a modularidade e o cache.


---


🎯 Exercícios e Desafios


Hora de colocar a mão na massa!


1.  Debugando um Campo Ausente:


    

  •   Crie um metafield personalizado para pages (páginas) chamado page.metafields.custom.autor_pagina. Preencha-o em uma página de exemplo.
    • 

  •   No template page.liquid (ou em um snippet carregado por ele), tente exibir este metafield.
    • 

  •   Desafio: Force um erro (por exemplo, escreva o nome do metafield errado) e use os filtros debugger e json para identificar o problema e corrigi-lo. Exiba tanto o objeto page quanto o objeto page.metafields.custom para entender a estrutura.
    • 



2.  Otimizando um Menu Dinâmico:


 Imagine que você tem um menu lateral que lista todas* as suas coleções com uma imagem em destaque de cada coleção.


    

  •   Código inicial (ineficiente):
    • 











    

  •   Desafio: Otimize este código para que ele só exiba as 5 coleções mais recentes, e use o cache para cada item do menu. Pense em como garantir que a imagem seja pequena o suficiente para não atrasar o carregamento.
    • 



3.  Identificando Gargalos:


    

  •   Abra a sua loja de desenvolvimento (ou a loja que estamos construindo) no Chrome e execute uma auditoria Lighthouse (no painel de Desenvolvedor, aba "Lighthouse").
    • 

  •   Desafio: Anote as recomendações de "Tempo de Carregamento" e "Melhores Práticas". Tente identificar se alguma delas pode estar relacionada ao processamento de Liquid ou à forma como o Liquid gera o HTML. (Ex: "Reduza o tempo de execução do JavaScript" - o Liquid não é JS, mas o HTML gerado pelo Liquid pode carregar JS pesado).
    • 



---


📝 Resumo da Aula


Nesta aula avançada, você aprendeu que:


    

  •   Debugging de Liquid é essencial para encontrar e corrigir erros de lógica ou dados. As principais ferramentas são o filtro debugger (para inspeção detalhada de objetos) e o filtro json (para uma representação limpa).
    • 

  •   Isolar o problema com comentários e testes incrementais é uma estratégia eficaz.
    • 

  •   Otimização de Liquid visa melhorar a velocidade e performance da loja, impactando UX, SEO e conversões.
    • 

  •   Gargalos comuns incluem loops excessivos, acessos redundantes a dados e lógica complexa em um único bloco.
    • 

  •   O uso inteligente da tag render com o parâmetro cache é fundamental para acelerar o carregamento de snippets e seções.
    • 

  •   Boas práticas como código modular, remoção de código não utilizado e o uso de ferramentas como Theme Check e Lighthouse são cruciais para manter a loja performática.
    • 



Com essas habilidades, você está pronto para não apenas construir lojas Shopify, mas para garantir que elas sejam robustas e rápidas! 🚀


---


🚀 Preparação para próxima aula


Na nossa próxima aula, a Aula 39, vamos aprofundar ainda mais na performance, mas agora focando na integração de JavaScript e CSS de forma otimizada em temas Shopify. Abordaremos:


    

  •   Carregamento assíncrono e deferido de scripts.
    • 

  •   Minificação e concatenação de assets.
    • 

  •   Melhores práticas para otimização de imagens e ícones.
    • 

  •   Como Liquid pode auxiliar na otimização de assets (ex: caminhos dinâmicos).
    • 



Será uma continuação natural da otimização, expandindo para os assets front-end que o Liquid ajuda a gerenciar. Preparem-se para deixar suas lojas ainda mais rápidas! 💡


---


📚 Recursos Adicionais



Continuem praticando e explorando! A otimização é um processo contínuo, e dominar Liquid é o primeiro passo para ter total controle sobre a performance da sua loja. Até a próxima! 👋🎓




🚀 Pronto para a próxima aula?


Continue sua jornada Shopify!


 Ver todas as aulas 




Related Posts

Categories:

Tags:

, ,

Leodario