Fórum OpenCart Brasil

[turcorossi]

Olá pessoal, tudo bem!

Vou compartilhar com vocês uma maneira fácil que achei para o botão flutuante do whatsapp no O.C 3x.
Ele puxa o telefone cadastro que é cadastrado lá nas configurações/Gerenciar Lojas/Ação/loja/Telefone da loja que puxa a variavel {{ telephone }}. Ao alterar esse número muda o número do telefone do whastapp e do botão automaticamente.
Se você usa o campo de FAX para indicar o whatsapp, troque na parte do codigo que diz data-phone="{{ telephone }}" - por data-phone="{{ fax }}" .

Localize o arquivo do footer catalog/view/theme/*seu tema*/template/common/footer.twig

Adicione o seguinte código antes do </footer>

Código: Selecionar todos

<!-- Conteúdo do seu site aqui -->
<div 
    class="whatsapp-float" 
    data-phone="{{ telephone }}" 
    onclick="openWhatsApp(this.getAttribute('data-phone'))"
>
    <i class="fa fa-whatsapp"></i>
</div>
<script>
function openWhatsApp(phone) {
    // Remove todos os caracteres não numéricos
    let cleanedPhone = phone.replace(/\D/g, '');
    
    // Se o número já começar com 55, mantém, caso contrário, adiciona
    if (!cleanedPhone.startsWith('55')) {
        cleanedPhone = '55' + cleanedPhone;
    }
    window.open(`https://wa.me/${cleanedPhone}`, '_blank');
}
</script>

Localize o arquivo do footer catalog/controller/template/common/footer.php
Localize a linha:

Código: Selecionar todos

$data['newsletter'] = $this->url->link('account/newsletter', '', true);

Adicione o seguinte codigo:

Código: Selecionar todos

$data['telephone'] = $this->config->get('config_telephone');

Abra o arquivo stylesheet.css no caminho catalog/view/theme/*seu tema*/template/stylesheet/stylesheet.css
Localize a tag footer e cole antes:

Código: Selecionar todos

        /* Botão WhatsApp Flutuante */
        .whatsapp-float {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 48px;
            height: 48px;
            background: #25D366; /* Cor oficial do WhatsApp */
            color: white;
            border-radius: 50%; /* Deixa redondo */
            text-align: center;
            font-size: 24px;
            line-height: 48px; /* Centraliza o ícone verticalmente */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
            z-index: 1000; /* Garante que fique acima de outros elementos */
            transition: all 0.3s ease; /* Efeito suave ao passar o mouse */
        }

        /* Efeito ao passar o mouse */
        .whatsapp-float:hover {
            background: #128C7E; /* Cor mais escura do WhatsApp */
            transform: scale(1.1); /* Aumenta levemente */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* Ícone do WhatsApp (ajuste fino) */
        .whatsapp-float i {
            vertical-align: middle;
			font-size: 32px;
        }

Não sei existe um modulo grátis ou outro tópico com a mesma informação, mas achei mais pratico fazer assim.

OBS: os arquivo do controller e view do footer, podem estar na pasta de modificação, você pode alterar nos caminhos indicados por mim e não surgir efeito, ai será necessário editar no caminho da sua modificação.

Valeu

[robaoi]

Boa solução, mas você teria algo para a versão 4.0.2.3