post

Checkbox Switch para Orçamento no WhatsApp (HTML + JS)

Publicado em: 21/11/2023 / Atualizado em: 21/11/2023

Categorias: BlogHTMLJavaScript (JS)JSWhatsApp

Esta calculadora é capaz de somar e multiplicar os serviços presentes na lista pré-programada e depois que o usuario esta satisfeito com a quantidade de itens adicionados, pode clicar no botão abaixo para enviar seu pedido completo via WhatsApp:

Segue playground para analise e testes: https://replit.com/@brunoalbim/Checkbox-Switch-para-Orcamento-no-WhatsApp

Segue código fonte abaixo:

<div class="container-switch">
  <label class="switch">
    <input type="checkbox" value="550">
    <span class="slider"></span>
    <span class="switch-text">Página de Links <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="250">
    <span class="slider"></span>
    <span class="switch-text">Banners Mensais <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="3000">
    <span class="slider"></span>
    <span class="switch-text">Página de Vendas <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="1590">
    <span class="slider"></span>
    <span class="switch-text">Página de Captura <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="400">
    <span class="slider"></span>
    <span class="switch-text">Paginas Adicionais <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>

  <label class="switch">
    <input type="checkbox" value="650">
    <span class="slider"></span>
    <span class="switch-text">Suporte Mensal <span class="switch-value"></span></span>
    <input type="number" min="1" value="1" class="quantity-input" style="display:none" />
  </label>
</div>

<br>
<div id="whatsapp-button">
  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="whatsapp" style="fill: #fff"><path d="M16.7,3.3c-1.8-1.8-4.1-2.8-6.7-2.8c-5.2,0-9.4,4.2-9.4,9.4c0,1.7,0.4,3.3,1.3,4.7l-1.3,4.9l5-1.3c1.4,0.8,2.9,1.2,4.5,1.2 l0,0l0,0c5.2,0,9.4-4.2,9.4-9.4C19.5,7.4,18.5,5,16.7,3.3 M10.1,17.7L10.1,17.7c-1.4,0-2.8-0.4-4-1.1l-0.3-0.2l-3,0.8l0.8-2.9 l-0.2-0.3c-0.8-1.2-1.2-2.7-1.2-4.2c0-4.3,3.5-7.8,7.8-7.8c2.1,0,4.1,0.8,5.5,2.3c1.5,1.5,2.3,3.4,2.3,5.5 C17.9,14.2,14.4,17.7,10.1,17.7 M14.4,11.9c-0.2-0.1-1.4-0.7-1.6-0.8c-0.2-0.1-0.4-0.1-0.5,0.1c-0.2,0.2-0.6,0.8-0.8,0.9 c-0.1,0.2-0.3,0.2-0.5,0.1c-0.2-0.1-1-0.4-1.9-1.2c-0.7-0.6-1.2-1.4-1.3-1.6c-0.1-0.2,0-0.4,0.1-0.5C8,8.8,8.1,8.7,8.2,8.5 c0.1-0.1,0.2-0.2,0.2-0.4c0.1-0.2,0-0.3,0-0.4C8.4,7.6,7.9,6.5,7.7,6C7.5,5.5,7.3,5.6,7.2,5.6c-0.1,0-0.3,0-0.4,0 c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.8,0.8-0.8,2c0,1.2,0.8,2.3,1,2.4c0.1,0.2,1.7,2.5,4,3.5c0.6,0.2,1,0.4,1.3,0.5 c0.6,0.2,1.1,0.2,1.5,0.1c0.5-0.1,1.4-0.6,1.6-1.1c0.2-0.5,0.2-1,0.1-1.1C14.8,12.1,14.6,12,14.4,11.9"></path></svg>
  <div>Enviar pedido <span id="valor-total">R$0,00</span></div>
</div>

<script>
  let total = 0;
  let selectedServices = [];
  const services = {};

  document.querySelectorAll('.switch').forEach((element, index) => {
    const phoneNumber = "5511900009999"; // Número de telefone
    const input = element.querySelector('input');
    const value = Number(input.value);
    const serviceName = element.querySelector('.switch-text').textContent;

    const switchValueElement = element.querySelector('.switch-value');
    switchValueElement.textContent = new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL"
    }).format(value);

    services[`#servico${index + 1}`] = serviceName;

    function calculateTotal() {
      total = 0;
      selectedServices = [];

      document.querySelectorAll('.switch').forEach((element, index) => {
        const input = element.querySelector('input');
        const value = Number(input.value);
        const serviceName = element.querySelector('.switch-text').textContent;
        const quantity = Number(element.querySelector('.quantity-input').value);

        if (input.checked) {
          total += value * quantity;
          selectedServices.push(`${serviceName} (Quantidade: ${quantity})`);
        }
      });

      const valueFormatted = new Intl.NumberFormat("pt-BR", {
        style: "currency",
        currency: "BRL"
      }).format(total);

      const encodedMessage = encodeURIComponent("Olá, simulei um orçamento e o valor total foi " + valueFormatted + ". Os serviços solicitados foram: " + selectedServices.join(", "));

      const whatsappURL = `https://wa.me/${phoneNumber}?text=${encodedMessage}`;
      whatsappButton.setAttribute("onclick", `location.href='${whatsappURL}'`);

      totalText.innerHTML = valueFormatted;

      if (total === 0) {
        whatsappButton.removeAttribute("onclick");
        whatsappButton.classList.remove("button-active");
      } else {
        whatsappButton.classList.add("button-active");
      }
    }

    const quantityInput = element.querySelector('.quantity-input');
    input.addEventListener("change", calculateTotal);
    quantityInput.addEventListener("change", calculateTotal);

    function toggleQuantityField() {
      const quantityContainer = element.querySelector('.quantity-input');
      quantityContainer.style.display = input.checked ? 'block' : 'none';
    }
  
    input.addEventListener("change", toggleQuantityField);
  });

  const totalText = document.querySelector("#valor-total");
  const whatsappButton = document.querySelector("#whatsapp-button");
</script>



<style>
.switch {
 --button-width: 3.5em;
 --button-height: 2em;
 --toggle-diameter: 1.5em;
 --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
 --toggle-shadow-offset: 10px;
 --toggle-wider: 3em;
 --color-grey: #cccccc;
 --color-green: #4296f4;
  display: flex;
  align-items: center;
  gap: 16px;
}

.slider {
 display: inline-block;
 width: var(--button-width);
 height: var(--button-height);
 background-color: var(--color-grey);
 border-radius: calc(var(--button-height) / 2);
 position: relative;
 transition: 0.3s all ease-in-out;
}

.slider::after {
 content: "";
 display: inline-block;
 width: var(--toggle-diameter);
 height: var(--toggle-diameter);
 background-color: #fff;
 border-radius: calc(var(--toggle-diameter) / 2);
 position: absolute;
 top: var(--button-toggle-offset);
 transform: translateX(var(--button-toggle-offset));
 box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
 transition: 0.3s all ease-in-out;
}

span.switch-text {
  font-size: 18px;
}

.container-switch {
    display: flex;
    gap: 16px;
    flex-direction: column;
}

.switch input[type="checkbox"]:checked + .slider {
 background-color: #0001ff;
}

.switch input[type="checkbox"]:checked + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
 box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
 display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
 width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
 transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}
</style>




<!-- CSS Opcional -->
<style>
body, html {
    font-family: arial;
}
  
#whatsapp-button {
  background: #cacaca;
  padding: 16px 24px;
  color: #ffffff;
  display: flex;
  gap: 16px;
  align-items: center;
  border-radius: 8px;
  justify-content: center;
  width: fit-content;
  cursor: pointer;
  transition: all linear .3s;
}

#whatsapp-button.button-active {
    background: #02b866;
}

input.quantity-input {
    padding: 6px 8px;
    width: 60px;
    border-radius: 8px;
    border: 1px solid #ccc;
}
</style>

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/3904

ID de Referência: 3904

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários