Tudo o que quer saber antes de instalar.
Uma análise detalhada de como o Botão Adicionar ao Carrinho Fixo para PrestaShop funciona, porque o construímos assim e o raciocínio por trás das funcionalidades acima.
Porquê um botão de compra fixo
No telemóvel, mais de 60 por cento dos visitantes passam para além do botão Adicionar ao carrinho sem clicar. No computador é quase o mesmo nas fichas de produto longas, com descrição detalhada, avaliações de clientes e produtos associados. Uma barra fixa que acompanha o visitante recupera essa intenção de compra exatamente no momento em que ela se dissipa. Os grandes marketplaces, a começar pela Amazon, usam-na por predefinição há anos.
Uma experiência adaptada a cada formato de ecrã
No telemóvel (menos de 992 píxeis de largura), uma barra compacta fixa-se em baixo, respeitando as áreas seguras dos iPhone com entalhe. No computador, dois modos à escolha no back-office: barra lateral flutuante à direita que entra com uma animação discreta, ou barra centrada em baixo, ao estilo do telemóvel. Decide conforme o seu design e o tipo de ficha de produto.
Miniseletor de combinação inteligente
O seletor compacto mostra todas as combinações disponíveis com o respetivo preço e disponibilidade. Quando o cliente muda de combinação na barra fixa, o módulo sincroniza automaticamente a interface de combinações da página principal (botões de opção ou listas pendentes), o que aciona o motor de combinações nativo do PrestaShop: preço recalculado, stock verificado e imagem atualizada, exatamente como se o cliente clicasse na própria ficha.
Integração limpa, sem surpresas
O módulo usa os hooks oficiais do PrestaShop e mantém-se fora da árvore DOM principal do seu tema. O clique em Adicionar ao carrinho na barra fixa aciona programaticamente o botão original, o que preserva a janela de confirmação, os eventos updateCart, as notificações de sucesso e qualquer personalização já existente no seu tema ou nos seus outros módulos.
Desempenho cuidado
Sem frameworks, sem dependências externas. O CSS pesa cerca de 7 kB e o JavaScript cerca de 12 kB, com gzip incluído. Os recursos só são carregados nas páginas de produto, nunca na página inicial, no catálogo ou no checkout. A visibilidade da barra é gerida pelo IntersectionObserver nativo, muito mais eficiente do que um listener contínuo de scroll.
Personalização a partir do back-office
Tudo se configura na interface do PrestaShop, sem mexer no código: ativação global, apresentação por dispositivo (telemóvel e/ou computador), modo no computador (barra lateral flutuante ou barra em baixo), desvio superior para temas com cabeçalho fixo, apresentação da miniatura, do seletor de combinação e do seletor de quantidade, e paleta de cores completa (fundo, botão, texto do botão, cor do texto, cor do preço).
Acessibilidade e boas práticas
A barra fixa respeita as recomendações ARIA: função region, rótulos explícitos para cada controlo, anúncios aria-live para as alterações de preço, foco visível em todos os botões e suporte completo de teclado. A media query prefers-reduced-motion desativa as transições para utilizadores sensíveis a animações. Todos os textos são traduzíveis.
Ainda não existem avaliações.