1

Estou trabalhando num projeto, basicamente um cardápio online que transfere os dados do pedido por WhatsApp.

Cloquei um input number para captar os valores da quantidade de pedidos e multiplicar pelo pedido selecionado via checkbox. Consegui fazer isso. O problema é que ele sempre pega a soma do último input number e faz o cálculo.

Gostaria que ele fizesse o cálculo separadamente, e no fim, somar com o total do pedido. Já rodei a internet inteira atrás dessa solução e não consegui aplicar no projeto. Qualquer ajuda será mais que bem-vinda! Obs.: Estou estudando Javascript a pouco tempo, por isso estou com essa dificuldade.

//validação do input number
        
    numero = 0;

   function less() {
     numero--;
     setValue(numero);
   }

   
   function more() {
     numero++;
     setValue(numero);
   }

   
   function setValue(value) {
     document.getElementById('num').value = value;
     
   }
   
   setValue(numero);


//formulario de envio

$(document).ready(function(){
 $("#enviar").click(function(){
 
// Pedido Selecionado
        
        var pedido = "" 
        const pedidosDisponiveis = document.querySelectorAll("input[type=checkbox]")
        var pedidoSelecionado = ""
        for ( pedido of pedidosDisponiveis) {
            var pedidoSelecionados = pedido.checked
            
            if(pedido.checked == true) {
                pedidoSelecionado +=` ${pedido.id} -> ${pedido.value} Reais; ` 
                var pedidosValores  =  parseInt(pedido.value)
            }
        }

 //quantidade selecionada
        
 var quantidade = ""
 const quantidadeDisponivel = document.querySelectorAll("input[type=number]")
        var quantidadeSelecionada = ""

        for ( quantidade of quantidadeDisponivel) {

            if(quantidade.value){
                quantidadeSelecionada +=`${quantidade.alt} ${quantidade.id} -> ${quantidade.value} `
                var quantidadeValor = parseInt(quantidade.value)
                var qtdped = 0;
                qtdped += pedidosValores * quantidadeValor

                
            }

        }
        
  


//impressão no whatsapp

var texto=`Nome: ${nome};Endereço: ${endereco}; N°: ${numero}; Região: ${bairro};  Obs: ${observacao}; 
    // Forma de Pagamento: ${formaSelecionada}, Pedido: ${pedidoSelecionado}, ${adicionalSelecionado}, ${quantidadeSelecionada},
    Valor do Pedido = ${qtdped},00
    ;Taxa de entrega = ${TaxaDeEntrega},00
    ;Desconto = ${desconto},00 
    ;Valor Total: ${qtdped + TaxaDeEntrega - desconto},00`
    var site="https://&text="+texto.replace(" ","%20","%0a")
    
    if(confirm("Confirma seu pedido?")){
        window.location.href=site;
    } else {
    }
})
})
<div class="item-info item-info-1">

    <div class="item-img">
        <img src="img/lanches/pizza.jpg" alt="Pizza">
    </div>

    <div class="item-txt">
        <strong>Pizza</strong>
        <span class="item-sub-txt"> Molho, mussarela, calabresa, cebola fatiada e orégano</span>
    </div>

    <div class="item-numeros-container">
        <div class="item_valor">
            <div>R$ 7,00</div>
        </div>

        <div class="item_quant">

            <div>
                <input type="checkbox" value="7,00" name="item-checkbox" class="item-checkbox"
                    id="Pizza">
            </div>

        </div>

        <div class="item_add">
            <i class="fas fa-plus btnAdd1"></i>
        </div>

    </div>

    <div id="adicionais1" class="adicionais hidden">
        <div class="itens-adicionais">
            <strong>Adicionais</strong>

            <div class="contcont">
                <div class="row">
                    <div class="col-md-12">
                    <button type="button" id="menos" onclick="less()"><i class="fa fa-minus-circle"aria-hidden="true">-</i></button> &nbsp; <input type="number" name="numero" id="num"> &nbsp; <button type="button" id="mais" onclick="more()">+<i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                    </div>
                </div>
                </div>

1

1 Resposta 1

0

Uma maneira de fazer isso seria assim:

<input type="checkbox" name="acr[0]" data-id="1" data-valor="2.00" value="Queijo" /><label>Queijo - R$ 2,00</label>
<input type="number" name="quantidade_acr[0]" step="1" value="1" min='1' max="5" /><br/>

<input type="checkbox" data-id="2" data-valor="0.50" name="acr[1]" value="Alho" /><label>Alho - R$ 0,50</label>
<input type="number" name="quantidade_acr[1]" step="1" value="1" min="1" max="5" /><br/>

<input type="checkbox" data-id="3" data-valor="0.50" name="acr[2]" value="Oregano" /><label>Orégano - R$ 0,50</label>
<input type="number" name="quantidade_acr[2]" step="1" value="1" min="1" max="5" /><br/>

<button id="salvar">Salvar</button>
<br>
<div id="dados"></div>
<div id="subtotal"></div>

Javascript:

$(document).ready(function(){
    $('#salvar').on('click', function() {
        var list = [], subtotal= 0;
         $('[name*="acr"]:checked').each(function(key) {
          
             var qtde = $('[name*="quantidade_acr['+key+']"]').val();
             var produto = $(this).val();
             var id = $(this).data('id');
             var valor = $(this).data('valor');
             var total = qtde * valor;
            list[key] = {
                          produto: produto,
                          quantidade: qtde ,
                          id: id,
                          valor: valor,
                          total_valor: total
                         };
              subtotal+=parseFloat(valor);           
                 
           });
        if(list.length > 0) {
          $('#dados').html('<br><strong>'+list.length+'</strong> produto(s) selecionado(s):<br><pre>'+JSON.stringify(list, null, '   ') + '</pre>');
           $('#subtotal').html('<b> Subtotal '+subtotal+'</b>');
        } else {
        $('#dados').html('<br>Selecione algum produto.');
        }
    
    });
});

Veja no exemplo o jsfiddle.

1
  • Obrigado pela resposta! O modelo é ótimo, embora eu quisesse fazer com que o subtotal ficasse separado dos demais itens na parte de finalizar o pedido. Pela dificuldade, to achando melhor incluir todos os itens do cardápio juntos para aplicar essa fórmula mesmo (lanche, bebidas e etc.). Mais uma vez obrigado pela ajuda! 23/03/2021 às 21:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .