Botão “Comprar pelo WhatsApp” na vitrine e página produto (Presentinho de Natal)

Olá Comunidade, segue minha contribuição para comunidade, vulgo “presente de Natal” rsrs.
Com essa ferramenta, quem não possui ainda, é possível definir ao mesmo tempo um botão de comprar pelo whatsapp na vitrine da sua loja e na página do produto, onde o resultado da mensagem sai automaticamente com os dados do produto:

Esse é o padrão esperado do botão na vitrine:

Esse é o padrão esperado na página do produto:
image

Código:

<script>
var Config = {
  numeroWhats: "2199999999",         // Adicione o número aqui
  textoBotao: "Comprar pelo Whatsapp" // Texto do botão
};

$(function() {
  setTimeout(function() {
     
      function criarBotaoWhatsApp(item, isPaginaProduto) {
          var produto, valor, codigo, link;

          if (isPaginaProduto) { 
              produto = $(item).closest('.produto').find('.nome-produto.titulo.cor-secundaria').first().text().trim();
              valor = $(item).closest('.produto').find('.preco-produto .preco-promocional').first().text().trim().replace(/\s+/g, ' ');
              codigo = $(item).closest('.produto').find('.codigo-produto span[itemprop="sku"]').text().trim();
              link = window.location.href;
          } else { 
              produto = $(item).closest('.listagem-item').find('.nome-produto').text().trim();
              valor = $(item).closest('.listagem-item').find('.preco-promocional').first().text().trim().replace(/\s+/g, ' ');
              codigo = $(item).closest('.listagem-item').find('.produto-sku').text().trim();
              link = $(item).closest('.listagem-item').find('a').attr('href');
          }

         

          valor = valor ? valor.replace("R$", "").trim() : "Indisponível";
          var valorFormatado = "R$ " + (parseFloat(valor) ? parseFloat(valor).toFixed(2) : "0,00");

          var mensagem = "*Olá, pode me ajudar? Eu gostaria de mais informações para a compra do produto:*\n";
          mensagem += "Produto: " + produto + "\n";
          mensagem += "Valor: " + valorFormatado + "\n";
          mensagem += "Cód: " + (codigo ? codigo : "Indisponível") + "\n";
          mensagem += link ? link : "Link indisponível";

          var linkWhatsApp = "https://api.whatsapp.com/send/?phone=+55" + Config.numeroWhats + "&text=" + encodeURIComponent(mensagem);

          $(item).after($('<div class="botao-whatsapp"> <a href="' + linkWhatsApp + '" target="_blank" tabindex="0"><span>' + Config.textoBotao + '</span><svg enable-background="new 0 0 308 308" version="1.1" viewBox="0 0 308 308" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m227.9 176.98c-0.6-0.288-23.054-11.345-27.044-12.781-1.629-0.585-3.374-1.156-5.23-1.156-3.032 0-5.579 1.511-7.563 4.479-2.243 3.334-9.033 11.271-11.131 13.642-0.274 0.313-0.648 0.687-0.872 0.687-0.201 0-3.676-1.431-4.728-1.888-24.087-10.463-42.37-35.624-44.877-39.867-0.358-0.61-0.373-0.887-0.376-0.887 0.088-0.323 0.898-1.135 1.316-1.554 1.223-1.21 2.548-2.805 3.83-4.348 0.607-0.731 1.215-1.463 1.812-2.153 1.86-2.164 2.688-3.844 3.648-5.79l0.503-1.011c2.344-4.657 0.342-8.587-0.305-9.856-0.531-1.062-10.012-23.944-11.02-26.348-2.424-5.801-5.627-8.502-10.078-8.502-0.413 0 0 0-1.732 0.073-2.109 0.089-13.594 1.601-18.672 4.802-5.385 3.395-14.495 14.217-14.495 33.249 0 17.129 10.87 33.302 15.537 39.453 0.116 0.155 0.329 0.47 0.638 0.922 17.873 26.102 40.154 45.446 62.741 54.469 21.745 8.686 32.042 9.69 37.896 9.69h1e-3c2.46 0 4.429-0.193 6.166-0.364l1.102-0.105c7.512-0.666 24.02-9.22 27.775-19.655 2.958-8.219 3.738-17.199 1.77-20.458-1.348-2.216-3.671-3.331-6.612-4.743z"></path><path d="m156.73 0c-83.416 0-151.28 67.354-151.28 150.14 0 26.777 7.166 52.988 20.741 75.928l-25.983 76.645c-0.484 1.429-0.124 3.009 0.933 4.085 0.763 0.779 1.798 1.199 2.855 1.199 0.405 0 0.813-0.061 1.211-0.188l79.92-25.396c21.87 11.685 46.588 17.853 71.604 17.853 83.408 1e-3 151.26-67.346 151.26-150.13 0-82.789-67.857-150.14-151.27-150.14zm0 268.99c-23.539 0-46.338-6.797-65.936-19.657-0.659-0.433-1.424-0.655-2.194-0.655-0.407 0-0.815 0.062-1.212 0.188l-40.035 12.726 12.924-38.129c0.418-1.234 0.209-2.595-0.561-3.647-14.924-20.392-22.813-44.485-22.813-69.677 0-65.543 53.754-118.87 119.83-118.87 66.064 0 119.81 53.324 119.81 118.87 1e-3 65.535-53.746 118.85-119.81 118.85z"></path></svg></a></div>'));
      }

      
      $('.botao.botao-comprar.principal').each(function() {
          var isPaginaProduto = $('.pagina-produto').length > 0;
          criarBotaoWhatsApp(this, isPaginaProduto);
      });
  }, 500); 
})
</script>
<style>
    /* comprar Whatsapp */
.botao-whatsapp {margin-top:6px;border: 1px solid;border-radius: 4px;  border-color: #30a77e;}
.botao-whatsapp a {display:flex;align-items:center;justify-content:center;width: 100%;font-size: 13px;line-height: 18px;padding: 5px;}
.botao-whatsapp svg {width: 16px;height: 16px;margin-left: 5px; fill: #30a77e;}
.produto-detalhes .botao-whatsapp {box-shadow: 0 1px 4px 0 #b1b1b175;margin-top: 10px;}
.produto-detalhes .botao-whatsapp a {width:364px;}
</style>

Como aplicar o código:
1 - Acesse o painel da sua loja integrada, navegue até o menu lateral: Personalize sua loja > Incluir código HTML

2 - Clique no botão Adicionar código

3 - Cole o conteúdo copiado acima (código) no campo Conteúdo

4 - Preencha os campos com as mesmas informações:

Descrição: Bt Compre pelo Whatsapp
Local publicação: Rodapé
Página publicação: Todas as Páginas
Tipo: HTML

5 - Agora basta salvar clicando no botão Criar código:

Importante:
Devido a estrutura de vários temas serem diferentes alguns comportamentos podem se tornar incomuns, mas chame por aqui que a ajuda vem.

Essa estrutura foi criada no tema padrão da Loja Integrada.

Abraço a todos.

1 curtida

Bom dia @Mauricio_Pereira, cara muito top parabéns :clap::clap:
já coloquei aqui kkkkk
Só me tira uma dúvida ele está pegando mais que uma descrição quando vai para o whatsapp da minha loja está certo??

Opa fala comigo, esse evento acontece na home?
me envia o link da sua loja por favor para eu dar uma olhada, talvez devido o tema precise de um pequeno ajuste. Tmj

1 curtida

Opa, pelo que percebi e na página do produto que ele acrescenta as outras descrições…
Tá sem fotos os produtos tô finalizando ainda kkk

desculpa amigo hoje foi corrido aqui vou dar uma olhada para vc agora

1 curtida

fiz uma pequena correção, altere a linha do produto para :

              produto = $(item).closest('.produto').find('.nome-produto.titulo.cor-secundaria').first().text().trim();

Veja se resolve para você. abraço.

1 curtida

Bom dia, @Mauricio_Pereira top demais funcionou certinho muito obrigado :facepunch::facepunch::facepunch:

1 curtida

Bom dia mano, tmj… abraço

1 curtida

Obrigado por compartilhar o código Maurício , estou tentando aqui mas não tem aparecido , o tema que utilizo é o gratuito.

1 curtida

Olá, compartilhe o link da sua loja, para que eu possa verificar o seu tema e poder ver o ajuste para você.

1 curtida

Hoje refiz novamente o processo e deu certo, obrigado @Mauricio_Pereira

2 curtidas

Me ajuda em outro assunto?

1 curtida

Se eu conseguir rsrsrs, com certeza. Manda ai

Tudo bem? Vi muita coisa que você colocou aqui nesse fórum, gratidão eterna! Então, vamos lá, eu navegando por aqui vi um topico ensinando a colocar a a descrição na lateral do produto, é até facil e eu fiz. Só que em baixo do produto ficou agora um vazio enorme agora.

Teria como eu preencher com alguma “segunda descrição” ou imagens, logotipo, algo do tipo em baixo do produto pra nao ficar vazio? Se não for possivel isso, teria como dividir a descrição (acho isso mais dificil)!?

Ou simplesmente colocar imagens ao lado do produto ali perto do frete, etc, e manter normal a descrição em baixo do produto.

Ps: eternamente grato por voce disponibilizar o “comprar pelo whatsapp” procurei isso muito tempo, gratidão eterna!!

1 curtida

Ou simplesmente trazer para esse espaço em branco os “produtos relacionados”, seila as imagens segundárias, mas preencher esse espaço em branco que é o que ta incomodando kkkkkk

Ele hoje ta assim.

Queria simplesmente assim, acho que assim é o mais simples e menos trabalhoso. Não sei.

$(function(){
    $('.span12.produto  >.row-fluid > .span6 > .produto-compartilhar').after($('.listagem.com-caixa.aproveite-tambem.borda-alpha'))
})

com a CSS

.listagem.com-caixa.aproveite-tambem .listagem-linha > ul > li {
    width: 48%;
    margin:1%
}

@media only screen and (max-width: 767px) {
    .listagem.com-caixa.aproveite-tambem .listagem-linha > ul > li {
        width: 47%;
        margin:1%;
        display:inline-block;
    }
    .listagem.com-caixa.aproveite-tambem .listagem-item .imagem-produto, 
    .listagem.com-caixa.aproveite-tambem .listagem-item .info-produto {
        float: left;
        width: 100%;
    }
    
}

2 curtidas

beleza amigo? tudo bem? é no Editar CSS ou no HTML? Se for no HTML quais são as coordenadas? Editar CSS não foi não. E no HTML coloquei rodapé e apenas ficou espaçado la em baixo, sem subir

ficou assim, apenas espaçou la em baixo, faltou algo para eu colocar, ou coloquei errado?