CST - Barra de Frete Progressiva

Esta seção fornece uma barra de progresso dinâmica que incentiva os clientes a atingirem uma meta de valor no carrinho para ganhar Frete Grátis. Ela é otimizada para temas modernos (como Dawn) e funciona em tempo real sem a necessidade de recarregar a página.

Funcionalidades

• Atualização em Tempo Real: Detecta adições, remoções e mudanças de quantidade no carrinho instantaneamente.
• Multi-Barra: Pode ser usada simultaneamente no Cart Drawer (carrinho lateral) e como uma seção em qualquer página.
• Design Personalizável: Cores, mensagens e metas totalmente editáveis via Admin do Shopify.
• Efeito Shine: Animação de brilho contínua na barra de progresso para maior destaque visual.

Onde Encontrar os Arquivos

1. Snippet Core: snippets/cst-shipping-bar.liquid (Contém o HTML, CSS e Lógica JS).
2. Seção: sections/cst-shipping-bar.liquid (Permite adicionar a barra em páginas via Editor de Temas).
3. Integração no Carrinho: snippets/cart-drawer.liquid (Onde a barra é renderizada dentro do carrinho lateral).
4. Configurações Globais: config/settings_schema.json (Define os campos no menu "Configurações do Tema").

Como Configurar

1. No Cart Drawer (Carrinho Lateral)

As configurações para a barra que aparece no carrinho lateral ficam em: Personalizar Tema > Configurações do Tema > CST - Barra de Frete (Veja os blocos JSON necessários em Configuração Global)

Campos disponíveis:

• Meta de Frete Grátis (R$): O valor total necessário (Ex: 200).
• Mensagem Inicial: Use [amount] para onde o valor restante deve aparecer.
• Mensagem de Sucesso: Texto exibido quando a meta é atingida.
• Cor da Barra: Cor do preenchimento enquanto a meta não é atingida.

2. Como Seção na Página

Você pode adicionar a barra em qualquer lugar da sua loja (Home, Produto, etc.): Adicionar Seção > CST - Barra de Frete

Detalhes Técnicos (Para Desenvolvedores)

Lógica de Atualização

O script utiliza três métodos redundantes para garantir que a barra sempre reflita o valor real do carrinho:

1. MutationObserver: Monitora mudanças no body da página para detectar quando o Shopify re-renderiza o carrinho via AJAX.
2. Event Listeners: Ouve eventos padrão como cart:updated e shopify:cart:updated.
3. Click & Change Listeners: Detecta cliques em botões de +, - e lixeira, além de mudanças manuais nos campos de quantidade.
4. Polling: Uma verificação de segurança ocorre a cada 4 segundos como último recurso.

Sanitização de Dados

O script processa a meta (goal) removendo qualquer caractere não numérico e convertendo vírgulas em pontos, garantindo compatibilidade com diferentes formatos de entrada.

Estilização Forçada

Para evitar que o CSS do tema esconda a barra, o JavaScript aplica os estilos de largura (width) e cor (background-color) usando .style.setProperty(..., 'important').

Solução de Problemas (Troubleshooting)

A barra não aparece ou não preenche:

• Verifique se o elemento possui o atributo data-target preenchido com um número.
• Certifique-se de que o id do container começa com CstShippingBar-.
• Se a barra estiver invisível, verifique se a cor de preenchimento (var(--bar-fill)) não é igual à cor de fundo.

A frase não muda quando atinge a meta:

• Verifique se a Meta configurada não é um valor absurdamente alto (Ex: digitar 20000 achando que são centavos, o que exigiria R$ 20.000,00 para completar).
• O script multiplica o valor digitado por 100 automaticamente para comparar com os centavos do Shopify.