CST - Botão de Compra Fixo (Sticky Buy Button)

Esta seção fornece um botão de compra fixo (Sticky) que aparece nas páginas de produto após o usuário fazer scroll passando pelo botão de compra original. Ela é projetada para aumentar a taxa de conversão, mantendo a chamada para ação (CTA) sempre visível.

Funcionalidades

• Gatilho Inteligente: A barra aparece automaticamente apenas quando o botão de compra principal da página sai do campo de visão.
• Sincronização de Variantes: Atualiza automaticamente a imagem, o preço e o ID da variante conforme a seleção do usuário na página.
• AJAX Add to Cart: Adiciona o produto ao carrinho sem recarregar a página, utilizando a lógica nativa do tema (Dawn).
• Design Premium & Mobile First: Fixada no rodapé em dispositivos móveis para facilitar o clique com o polegar.
• Customização Completa: Controle de cores e arredondamento (border-radius) via Editor de Temas.

Onde Encontrar os Arquivos

1. Seção: sections/cst-sticky-buy-button.liquid (Contém o HTML, CSS e Lógica JS).
2. Configuração no Template: templates/product.json (Onde a seção deve ser adicionada para aparecer nas páginas de produto).

Como Configurar

No Editor de Temas

1. Acesse a página de qualquer produto no Editor de Temas do Shopify.
2. Clique em Adicionar Seção e procure por CST - Botão Compra Fixo.
3. Configure as opções disponíveis:
   • Habilitar em Desktop: Ativa ou desativa a barra em telas grandes.
   • Arredondamento (Bordas): Ajusta o border-radius do botão e da imagem do produto.
   • Cor de Fundo: Cor da barra fixa.
   • Cor do Texto: Cor do título e preço do produto.
   • Cor de Fundo do Botão: Cor de destaque do botão "Adicionar ao carrinho".
   • Cor do Texto do Botão: Cor do texto dentro do botão.

Detalhes Técnicos (Para Desenvolvedores)

Lógica de Visibilidade (Scroll)

O script utiliza a API IntersectionObserver para monitorar o botão de compra original. A barra sticky só recebe a classe .is-visible quando o botão original NÃO está intersectando a viewport e está ACIMA dela (ou seja, o usuário já passou por ele).

Sincronização de Dados

Para manter a barra atualizada, o script utiliza:

1. MutationObserver: Monitora o campo oculto input[name="id"] do formulário principal para detectar trocas de variantes.
2. Event Listeners: Ouve mudanças em seletores de variantes (variant-selects, variant-radios) para garantir que o preço e a imagem reflitam a seleção atual.

Integração AJAX

A seção utiliza o componente customizado <product-form> do tema Dawn. Ao submeter o formulário da barra sticky, ele dispara os mesmos eventos e comportamentos do botão original, incluindo a abertura do carrinho lateral (Cart Drawer) ou notificações de erro.

Solução de Problemas (Troubleshooting)

A barra não aparece ao rolar a página:

• Certifique-se de que a seção foi adicionada ao template de produto no Editor de Temas.
• Verifique se o botão de compra original da página possui o atributo name="add". O script depende deste seletor padrão.
• Em alguns temas personalizados, o seletor do botão pode ser diferente. Nesse caso, ajuste o querySelector no script da seção.

As cores não estão aplicando corretamente:

• Verifique se você definiu as cores nos campos específicos da seção.
• O script aplica as cores diretamente via CSS para garantir prioridade sobre os estilos globais do tema.