Olá, pessoal! Professor aqui de novo, pronto para mergulhar em mais um tópico fascinante e super prático do universo Shopify. 🚀

Chegamos à Aula 35 do nosso curso “Loja Shopify do Zero ao Avançado”, e hoje vamos levar a personalização das suas lojas a um novo nível: formulários dinâmicos e captura de dados com Liquid. Preparem-se para criar interações mais ricas e coletar informações valiosas dos seus clientes!

—

Aula 35 – Loja Shopify do Zero ao Avançado: Formulários dinâmicos e captura de dados com Liquid

📚 O que você vai aprender nesta aula

Nesta aula avançada, você irá:

• Compreender a estrutura e o funcionamento dos formulários no ambiente Shopify.
• Dominar a tag form do Liquid para criar diferentes tipos de formulários.
• Criar formulários de contato personalizados para necessidades específicas da sua loja.
• Implementar Line Item Properties para adicionar informações customizadas a produtos no carrinho.
• Desenvolver campos de formulário dinâmicos com base em lógica Liquid.
• Entender a importância e o uso do token CSRF para segurança nos formulários.
• Capturar e processar dados customizados enviados pelos usuários.
• Aprender dicas de boas práticas e otimização para formulários.

—

🔗 Conectando com aulas anteriores

Nas nossas aulas anteriores, especialmente aquelas sobre personalização de produtos, páginas de carrinho e contas de cliente, vocês já tiveram contato com a exibição e manipulação de dados usando Liquid. Vimos como iterar sobre product.variants, exibir customer.first_name, e até mesmo como o formulário de cart/add funciona por baixo dos panos.

Hoje, vamos pegar todo esse conhecimento de Liquid sobre objetos, loops e condicionais, e aplicá-lo para coletar informações. Em vez de apenas mostrar dados, vamos permitir que o usuário os insira, e de forma inteligente! A compreensão de como as sections e snippets são estruturadas será fundamental, pois construiremos nossos formulários dentro delas. Lembrem-se da nossa aula sobre customização do tema e como adicionar blocos de conteúdo – isso será útil aqui! 😉

—

📖 Conteúdo Principal

1. Entendendo Formulários em Shopify

Shopify oferece uma estrutura robusta para formulários que, por padrão, já lidam com diversas funcionalidades essenciais, como adicionar itens ao carrinho, registrar clientes ou enviar mensagens de contato. No entanto, para ir além, precisamos entender como o Liquid nos ajuda a estender essas capacidades.

Formulários Nativos vs. Customizados

• Nativos: customer/register, contact, cart/add, customer/login, customer/addresses etc. Eles têm endpoints e comportamentos pré-definidos no Shopify.
• Customizados: Usam a estrutura nativa, mas com campos e lógicas personalizadas. Podemos criar formulários de “pedido de orçamento”, “feedback de produto” ou “solicitação de personalização”.

A Importância de action e method

Todo formulário HTML tem atributos action (para onde os dados serão enviados) e method (GET ou POST). Em Shopify, a tag {% form %} já configura o action e method corretos para o tipo de formulário especificado.

A Tag form do Liquid

Esta é a ferramenta principal! Ela simplifica a criação de formulários, garantindo que eles se integrem corretamente ao Shopify.

Sintaxe básica:

{% form 'tipo_de_formulario', objeto_associado %}

{% endform %}

• tipo_de_formulario: Define a finalidade do formulário (ex: 'contact', 'product', 'cart', 'customer').
• objeto_associado: Em alguns casos, você pode associar o formulário a um objeto específico (ex: product para o formulário de adicionar ao carrinho).

Quando você usa a tag {% form %}, o Liquid automaticamente:

• Define o action e method corretos.
• Adiciona um campo input oculto para o token CSRF (Cross-Site Request Forgery), essencial para a segurança. Mais sobre isso em breve!
• Adiciona outros campos ocultos necessários para o processamento do formulário pelo Shopify.

Respostas do Formulário

Após a submissão, você pode usar variáveis Liquid para verificar o status:

• form.posted_successfully: true se o formulário foi enviado com sucesso.
• form.errors: Um objeto contendo erros de validação, se houver.
• form.success_message: Mensagem de sucesso padrão ou customizada.

2. Captura de Dados Customizados

Aqui é onde a mágica acontece para ir além do básico!

Formulários de Contato Customizados

Embora o Shopify tenha um template contact.liquid, você pode criar formulários de contato em qualquer página ou seção, com campos totalmente personalizados. Os dados enviados por um formulário {% form 'contact' %} são enviados para o email principal da loja.

Convenção para nomes dos campos: Use name="contact[nome_do_campo]".

Line Item Properties (Propriedades do Item do Carrinho)

Essa é uma das funcionalidades mais poderosas para personalizar produtos! Ela permite adicionar informações extras a um item específico no carrinho, que não são variantes do produto. Pense em:

• Mensagens para presente.
• Textos para gravação.
• Anexos de arquivos (via apps ou upload para um serviço externo).
• Preferências de cores ou tamanhos que não são variantes SKU.

Essas propriedades aparecerão no carrinho, no checkout e nos detalhes do pedido.

Convenção para nomes dos campos: Use name="properties[nome_da_propriedade]".

Formulários de Clientes (Customer Data)

A tag {% form 'customer' %} é usada principalmente para login, registro, recuperação de senha e atualização de endereços. Para capturar dados customizados e associá-los diretamente a um perfil de cliente (como metafields do cliente) de forma nativa via frontend, é um processo mais complexo que geralmente envolve:

1. Apps de Metafields: Muitos apps permitem criar e gerenciar metafields de clientes e até mesmo gerar formulários para isso.

2. API do Shopify com um App Customizado: Criar um app que receba os dados do frontend e use a API para atualizar os metafields do cliente.

3. Formulário de Contato Inteligente: A forma mais simples de coletar informações extras sobre um cliente logado, sem um app, é usar um formulário {% form 'contact' %} e pré-preencher com os dados do cliente, enviando a mensagem para o email da loja. Assim, o lojista pode processar manualmente.

Nesta aula, focaremos nas Line Item Properties e formulários de contato customizados, que são diretamente manipuláveis com Liquid.

3. A Segurança do Formulário: Token CSRF

CSRF (Cross-Site Request Forgery) é um tipo de ataque onde um invasor engana o navegador de um usuário para fazer solicitações indesejadas a um site autenticado.

A tag {% form %} do Liquid automaticamente inclui um campo oculto com um token CSRF, por exemplo:

html

Este authenticity_token é vital. Ele garante que a requisição de formulário realmente veio da sua loja e não de um site malicioso. Nunca removam esse token! O Shopify verifica esse token em cada submissão. Se ele estiver faltando ou for inválido, a submissão será rejeitada.

4. Criando Campos Dinâmicos com Liquid

A verdadeira força do Liquid para formulários está na sua capacidade de gerar campos de forma dinâmica.

Exemplos:

• Campos condicionais: Mostrar um campo de “mensagem” apenas se o cliente marcar “embalagem para presente”.
• Dropdowns baseados em dados do produto/loja: Um dropdown de “opções de acabamento” que lista os valores de um metafield de produto.
• Listas de opções: Usar um loop for para gerar uma série de checkboxes ou radio buttons a partir de uma lista definida no tema ou em um metafield.

{% comment %} Exemplo de campo condicional {% endcomment %}

Adicionar embalagem para presente?

Mensagem para o presente:

Neste exemplo, usamos JavaScript para mostrar/esconder o campo, mas o Liquid preparou a estrutura. O JS é fundamental para a “dinâmica” da interface.

5. Boas Práticas e Otimização

• Validação: Use required no HTML para validação básica. Para validações mais complexas, você precisará de JavaScript no frontend.
• Acessibilidade: Sempre inclua label tags para seus campos de formulário e associe-as via for e id.
• Feedback ao Usuário: Mostre mensagens claras de sucesso ou erro (usando form.posted_successfully e form.errors).
• Limpeza do Código: Mantenha seus formulários em snippets ou seções organizadas.
• Segurança: Mantenha o token CSRF. Evite armazenar informações sensíveis diretamente em campos ocultos sem criptografia.

—

💻 Exemplos Práticos

Vamos criar dois exemplos práticos que são muito comuns em lojas Shopify.

Exemplo 1: Formulário de Pedido de Cotação Personalizado

Imagine que você tem uma loja que vende produtos sob medida e quer que os clientes preencham um formulário detalhado para pedir um orçamento, em vez de apenas um contato simples. Vamos criar este formulário em uma nova seção.

Passo a passo:

1. Crie uma nova seção (sections/custom-quote-form.liquid):

{% if section.settings.title != blank %}
{{ section.settings.title }}
{% endif %}
{% if section.settings.description != blank %}
{{ section.settings.description }}
{% endif %}
{% form 'contact' %}
{% if form.posted_successfully %}
Obrigado! Sua solicitação de orçamento foi enviada com sucesso. Entraremos em contato em breve.

{% elsif form.errors %}

Ops! Houve um problema com o seu formulário:

{% for field in form.errors %}

{{ form.errors.messages[field] }}

{% endfor %}


{% endif %}

Seu Nome Completo *



Seu Email *



Seu Telefone (opcional)



Tipo de Serviço Desejado *

-- Selecione uma opção --

Design Personalizado

Fabricação sob Medida

Consultoria de Projeto

Outro




Detalhes do seu Projeto *



Orçamento Estimado (opcional)


Enviar Solicitação
{% endform %}

{% schema %}
{
"name": "Formulário de Cotação",
"settings": [
{
"type": "text",
"id": "title",
"label": "Título da Seção",
"default": "Solicite seu Orçamento Personalizado"
},
{
"type": "richtext",
"id": "description",
"label": "Descrição",
"default": "
Preencha os campos abaixo com os detalhes do seu projeto.
"

}
],
"presets": [
{
"name": "Formulário de Cotação Personalizado"
}
]
}
{% endschema %}

2. Adicione CSS (em assets/theme.css ou similar):

css

.custom-quote-form-section {
max-width: 800px;
margin: 40px auto;
padding: 30px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.custom-quote-form-section .section-title {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.custom-quote-form-section .section-description {
text-align: center;
margin-bottom: 30px;
color: #555;
line-height: 1.6;
}
.custom-quote-form-section .form-field {
margin-bottom: 20px;
}
.custom-quote-form-section label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #444;
}
.custom-quote-form-section input[type="text"],
.custom-quote-form-section input[type="email"],
.custom-quote-form-section input[type="tel"],
.custom-quote-form-section select,
.custom-quote-form-section textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box; / Garante que padding não aumente a largura /
font-size: 1rem;
}
.custom-quote-form-section textarea {
resize: vertical; / Permite redimensionar verticalmente /
}
.custom-quote-form-section input:focus,
.custom-quote-form-section select:focus,
.custom-quote-form-section textarea:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.custom-quote-form-section .button {
display: block;
width: 100%;
padding: 15px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.custom-quote-form-section .button:hover {
background-color: #0056b3;
}
.custom-quote-form-section .form-success-message {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
}
.custom-quote-form-section .form-errors {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}
.custom-quote-form-section .form-errors h3 {
margin-top: 0;
color: #721c24;
}
.custom-quote-form-section .form-errors ul {
margin-bottom: 0;
padding-left: 20px;
}

3. Adicione a seção a uma página: Vá em Admin Shopify > Online Store > Temas > Personalizar. Crie uma nova página, por exemplo, “Solicitar Orçamento”. Na página, adicione uma nova seção do tipo “Formulário de Cotação Personalizado”.

Observação: Os campos name="contact[Seu Campo]" garantem que cada campo seja enviado como parte da mensagem de contato para o email da sua loja. Você pode ver esses dados no corpo do email que Shopify envia.

Exemplo 2: Adicionando Opções Personalizadas a Produtos (Line Item Properties)

Vamos permitir que o cliente adicione uma “mensagem para presente” e escolha um “tipo de embalagem” para um produto diretamente na página do produto.

Passo a passo:

1. Edite o snippet do formulário “Add to Cart” (geralmente em sections/main-product.liquid ou um snippet como snippets/product-form.liquid):

Localize o formulário {% form 'product', product %} e adicione os campos ANTES do botão de submit.

{% comment %}
Suponha que este código esteja dentro do {% form 'product', product %}
e após os campos de seleção de variante.
{% endcomment %}

Opções de Personalização:


Deseja embalagem para presente?



Mensagem para o presente:

Máximo 100 caracteres


Tipo de Embalagem:

Padrão (Grátis)

Luxo (+R$15)

Eco-friendly (+R$10)







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

2. Adicione JavaScript para a lógica dinâmica (em assets/theme.js ou similar):

javascript

document.addEventListener('DOMContentLoaded', function() {
const giftWrapToggle = document.getElementById('gift-wrap-toggle');
const giftMessageArea = document.getElementById('gift-message-area');
const giftMessageInput = document.getElementById('gift-message');
if (giftWrapToggle && giftMessageArea) {
// Inicializa o estado com base no toggle (se a página for recarregada com o checkbox marcado)
if (giftWrapToggle.checked) {
giftMessageArea.style.display = 'block';
giftMessageInput.setAttribute('required', 'required'); // Torna o campo obrigatório
} else {
giftMessageArea.style.display = 'none';
giftMessageInput.removeAttribute('required'); // Remove o atributo required
}
giftWrapToggle.addEventListener('change', function() {
if (this.checked) {
giftMessageArea.style.display = 'block';
giftMessageInput.setAttribute('required', 'required');
} else {
giftMessageArea.style.display = 'none';
giftMessageInput.value = ''; // Limpa o campo se desmarcado
giftMessageInput.removeAttribute('required');
}
});
}
});

3. Adicione CSS para estilização (em assets/theme.css ou similar):

css

.product-custom-options {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.product-custom-options h3 {
font-size: 1.2rem;
margin-bottom: 15px;
color: #333;
}
.product-custom-options .form-field {
margin-bottom: 15px;
}
.product-custom-options label {
display: inline-block;
margin-left: 8px;
vertical-align: middle;
color: #555;
font-weight: normal;
}
.product-custom-options input[type="checkbox"] {
vertical-align: middle;
width: auto;
}
.product-custom-options textarea,
.product-custom-options select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 5px;
box-sizing: border-box;
}
.product-custom-options small {
display: block;
margin-top: 5px;
color: #777;
font-size: 0.85rem;
}

Como ver os dados:

Quando o cliente adicionar o produto ao carrinho, as propriedades aparecerão abaixo do nome do produto no carrinho. No admin do Shopify, ao ver o pedido, essas informações estarão visíveis como “Propriedades do item de linha”. ✨

Screenshot Conceitual:

Imagine a página de produto com a descrição, preço, seletor de variantes e, logo abaixo, os novos campos “Deseja embalagem para presente?” (checkbox) e, se marcado, “Mensagem para o presente” (textarea) e “Tipo de Embalagem” (dropdown).

—

🎯 Exercícios e Desafios

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

1. Formulário de Feedback de Produto: Crie um formulário em uma seção customizada (como no Exemplo 1), mas que colete feedback sobre um produto específico. Inclua campos para:

• Nome do cliente (pré-preenchido se logado).
• Email do cliente (pré-preenchido se logado).
• ID do Produto (campo oculto, preenchido automaticamente com product.id se o formulário for em uma página de produto, ou um campo de texto se for uma página genérica).
• Avaliação (dropdown de 1 a 5 estrelas ou radio buttons).
• Comentários (textarea).
• Pergunta “Você recomendaria este produto?” (radio Sim/Não).

Envie este formulário para o email da loja.

2. Opção “Gravação Personalizada” para Produtos Selecionados: Modifique a página de produto para adicionar uma opção de “Gravação Personalizada” (campo de texto). No entanto, este campo só deve aparecer se o produto tiver a tag custom-gravacao.

• Dica: Use um {% if product.tags contains 'custom-gravacao' %} em Liquid para controlar a visibilidade da seção no HTML.

3. Desafio Avançado: Carrinho com Condicionais de Preço (Conceitual): No Exemplo 2, a opção “Luxo (+R$15)” e “Eco-friendly (+R$10)” são apenas texto. Tente pesquisar (ou antecipar para as próximas aulas!) como você poderia ajustar o preço do produto no carrinho automaticamente via JavaScript (com AJAX) ou usando uma “cart attribute” para que o lojista veja esse custo extra no pedido.

• Dica: Isso geralmente envolve manipulação do carrinho via AJAX e pode requerer um cart.attributes ou um app. Não se preocupe se não conseguir ainda, é um desafio para provocar a curiosidade!

—

📝 Resumo da Aula

Ufa! Que aula produtiva, não é mesmo? Vimos como os formulários Shopify vão muito além do básico, permitindo que você:

• Utilize a poderosa tag {% form %} do Liquid para criar formulários de contato customizados e coletar dados específicos.
• Implemente Line Item Properties para oferecer personalização profunda nos produtos, adicionando informações valiosas que acompanharão o item até o pedido final.
• Crie campos dinâmicos e reativos, usando Liquid para lógica de exibição e JavaScript para interações em tempo real.
• Garanta a segurança dos seus formulários com o token CSRF integrado.

Com essas técnicas, você tem o poder de criar experiências de usuário muito mais interativas e coletar dados cruciais para o seu negócio!

—

🚀 Preparação para próxima aula

Nesta aula, focamos na estrutura Liquid dos formulários e na captura de dados. Na próxima aula, vamos levar a interatividade para o próximo nível: Submissão de Formulários com AJAX e Integração com APIs Externas!

Isso significa que vamos aprender a:

• Enviar dados de formulários sem recarregar a página, melhorando a experiência do usuário.
• Integrar seus formulários Shopify com serviços externos, como Mailchimp para capturar leads, ou outros CRMs.
• Usar JavaScript de forma mais avançada para criar essas interações.

Será uma aula cheia de JavaScript e integração! Preparem seus editores! 💡

—

📚 Recursos Adicionais

• Documentação da Tag form do Liquid: Shopify Liquid: form tag
• Documentação sobre Line Item Properties: Shopify Help Center: Get customization information for products
• Artigo da Shopify sobre atributos de carrinho (Cart Attributes vs. Line Item Properties): Shopify.dev: Cart attributes (Importante para entender a diferença!)
• Boas Práticas de Acessibilidade em Formulários: MDN Web Docs: Accessible forms

Não hesitem em praticar e experimentar! Se tiverem dúvidas, anotem e tragam para a nossa sessão de tira-dúvidas.

Até a próxima! 👋