1

Olá, Tenho um problema que estou quebrando a cabeça a tempos e simplesmente não consigo entender por qual motivo isso ocorre... Na minha aplicação eu tenho um carrinho que até então insere produtos normalmente, faz a soma dos seus valores e adiciona ao total, porém, quando eu tento remover um item do carrinho ele simplesmente está bagunçando o valor total

inserir a descrição da imagem aqui

Por exemplo, quando removo o Atum que é o primeiro item da lista, ele simplesmente subtrai o valor triplicado, se eu removo o salmão que é o segundo item da lista, ele remove duplicado...

Exemplo removendo o Atum:

inserir a descrição da imagem aqui

O valor fica negativo e no console é como se ele tivesse sido removido 3x com um único click...

Nos elementos ele foi deletado corretamente até

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Seguem os códigos que utilizei para criar os elementos, remover e atualizar o valor total do carrinho quando deletado algum item:

Criação dos itens

$(document).ready(function(){
var btnAdcionaCarrinho = $(".btn-adicionar-carrinho");
btnAdcionaCarrinho.click(function(){
    adicionaProduto($(this));
    totalPedido(buscaItensPedido());
});
});
function adicionaProduto(el){ //adiciona produto ao carrinho
    console.log(el);
    var nomeProduto = el.parent().find(".titulo-produto");
    var qtdProduto = el.parent().find(".qtd-produto").val();
    var precoProduto = el.parent().find(".preco-produto").text();
 
    alteraQtdItensCarrinho("add");
    buildItemPedido(nomeProduto.text(),qtdProduto,precoProduto);
    carrinho.find(".btn-remover-item").click(function(){
        console.log($(this));
        alteraQtdItensCarrinho("del");
        removeProduto($(this));
    });
  
}

function buildItemPedido(nomeProduto,qtdProduto,precoProduto){//cria a linha na tabela contendo as informações sobre o pedido
    var novoItem = $("<tr></tr>");
   
    var nomeItem = $("<td></td>").addClass("nome-pedido").text(nomeProduto);
    var qtdItem = $("<td></td>").addClass("qtd-pedido").text(qtdProduto);
    var qtdPrecoItem = $("<td></td>").addClass("qtd-preco-pedido").text(precoProduto);
    var removerItem = $("<td></td>").addClass("remover-item");
    var botaoRemover = $("<span></span>").append("<i></i>").addClass("icon-close btn-remover-item");
    removerItem.append(botaoRemover);
   
    novoItem.append(nomeItem,qtdItem,qtdPrecoItem,removerItem);
    carrinho.append(novoItem);
    
    console.log(novoItem);
    console.log(carrinho);
    return carrinho;
}

Remoção do item

function removeProduto(el){// deleta produto do carrinho
    var item = el.parent().parent();
    var itemPreco = item.find(".qtd-preco-pedido").text();
    var itemQtd = item.find(".qtd-pedido").text();
    console.log(item,itemPreco,itemQtd);
    
    subtraiValorTotal(itemPreco,itemQtd);
    
    item.remove();
}

Alteração do valor total

function subtraiValorTotal(itemPreco,itemQtd){//diminui o valor total quando um item é removido
   // console.log(itemPreco,itemQtd);
    var precoItem = parseFloat(removeSifrao(itemPreco).replace(",",".")) * parseInt(itemQtd);
    var total = parseFloat(removeSifrao($("#valor-total").text()).replace(",","."));
   // console.log(precoItem.toFixed(2));
   // console.log(total);
    var novoTotal = total - precoItem;
    $("#valor-total").text("R$" + novoTotal.toFixed(2).toString().replace(".",","));
}

5
  • Boa pergunta, vou aqui no vizinho checar se ele tem o HTML pra gente poder reproduzir o problema.
    – user60252
    Commented 24/06/2018 às 22:40
  • O que tem nessa função removeSifrao()?
    – Sam
    Commented 24/06/2018 às 22:51
  • Ela remove o R$ do pedido, já que quando adiciono algum item ao carrinho ele acaba indo em forma de string (exemplo: R$ 40,00) e preciso realizar cálculos e para isso ela remove através de uma RegEx o R$ e me retorna o valor convertido já para float Commented 24/06/2018 às 23:14
  • Quanto ao HTML, ele é basicamente uma tabela sem <tr> alguma, eu as crio na função buildItemPedido quando adiciono um produto ao carrinho Commented 24/06/2018 às 23:15
  • Tem muitos vícios no código.
    – Sam
    Commented 24/06/2018 às 23:17

1 Resposta 1

1

Tem alguns problemas no códigos que devem ser corrigidos. Aqui por exemplo:

novoTotal.toFixed(2).toString().replace(".",",")

Por que .toString() se o .toFixed(2) já converte o número em string? É redundante fazer isso. Você está convertendo string em string.

Não sei como está a sua função removeSifrao mas esta aqui dá conta do recado:

function removeSifrao(i){
   i = i.replace("R$","").replace(".","").replace(",",".");
   i = parseFloat(i).toFixed(2);
   return i;
}

Veja que você pode tratar o número dentro da função e retornar ele mais limpo do que usar parseFloat lá no meio dos códigos.

Compara o código do exemplo funcionando abaixo com o seu e faça as correções:

function removeSifrao(i){
   i = i.replace("R$","").replace(".","").replace(",",".");
   i = parseFloat(i).toFixed(2);
   return i;
}

function removeProduto(el){// deleta produto do carrinho
    var item = $(el).closest("tr");
    var itemPreco = item.find(".qtd-preco-pedido").text();
    var itemQtd = item.find(".qtd-pedido").text();
    subtraiValorTotal(itemPreco,itemQtd);
    item.remove();
}

function subtraiValorTotal(itemPreco,itemQtd){//diminui o valor total quando um item é removido
    var precoItem = (removeSifrao(itemPreco) * itemQtd).toFixed(2);
    var total = removeSifrao($("#valor-total").text());
    var novoTotal = total - precoItem;
    $("#valor-total").text("R$" + novoTotal.toFixed(2).replace(".",","));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
   <tr>
      <td>prod 1</td>
      <td class="qtd-pedido">5</td>
      <td class="qtd-preco-pedido">R$5,80</td>
      <td><button onclick="removeProduto(this)">X</button></td>
   </tr>
   <tr>
      <td>prod 2</td>
      <td class="qtd-pedido">3</td>
      <td class="qtd-preco-pedido">R$10,90</td>
      <td><button onclick="removeProduto(this)">X</button></td>
   </tr>
   <tr>
      <td>prod 3</td>
      <td class="qtd-pedido">3</td>
      <td class="qtd-preco-pedido">R$5,90</td>
      <td><button onclick="removeProduto(this)">X</button></td>
   </tr>
</table>
Total: <div id="valor-total">R$79,40</div>

Outra coisa, para fazer multiplicações e divisões de números, não precisa converter o tipo (usar parseInt ou parseFloat). Só seria necessário em caso de soma ou subtração.

4
  • Agora tudo funciona corretamente x.x Eu ainda to iniciando com JS e ainda tenho muito o que aprender xD Mal sabia que o replace já converte para String... Obrigado por compartilhar um conhecimento extra =D Commented 24/06/2018 às 23:37
  • O replace não, o toFixed que converte pra string :)
    – Sam
    Commented 24/06/2018 às 23:38
  • ops, exato kkkkk Commented 24/06/2018 às 23:38
  • Obgradíssimo!...
    – Sam
    Commented 24/06/2018 às 23:39

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 .