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

Código CSS/HTML
,
1

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:

image
image1191×192 7.47 KB

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

image
image1532×588 72.9 KB

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

image
image1072×585 39.5 KB

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.

2 curtidas
2

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??

Screenshot_20231124-084517-142
Screenshot_20231124-084517-1421080×1613 124 KB

3

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
4

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

5

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

1 curtida
6

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
7

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

1 curtida
8

Bom dia mano, tmj… abraço

1 curtida
9

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

1 curtida
10

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

1 curtida
12

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

2 curtidas
13

Me ajuda em outro assunto?

1 curtida
14

Se eu conseguir rsrsrs, com certeza. Manda ai

15

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
16

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

17

Ele hoje ta assim.

TA FEIO
TA FEIO1920×1026 124 KB

18

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

queria assim
queria assim1920×1026 171 KB

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

image
image1896×846 176 KB

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%;
    }
    
}

image
image565×877 152 KB

image
image1857×894 149 KB

2 curtidas
20

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

nao foi
nao foi1190×816 38.4 KB

21

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

segue como ta
segue como ta1899×1016 195 KB