Remove items and change total value

Question

Remove items and change total value

Navigation

#1 by (1 votes)

1

Hello, I have a problem that I am breaking my head at times and I just can not understand why this occurs ... In my application I have a cart that until then inserts products normally, adds the sum of its values and adds to the total, however, when I try to remove an item from the cart it is simply messing up the total value

Forexample,whenIremoveTunawhichisthefirstiteminthelist,itsimplysubtractsthetriplicatevalue,ifIremovethesalmonwhichistheseconditeminthelist,itremovesduplicate...

ExampleremovingtheTuna:

Thevalueisnegativeandintheconsoleitisasifithasbeenremoved3xwithasingleclick...

Intheelementsithasbeencorrectlydeleteduntil

HerearethecodesIusedtocreatetheelements,removeandupdatethetotalvalueofthecartwhenIdeletedanitem:

CreatingItems

$(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;
}

Removing the 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();
}

Change in total value

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(".",","));
}

javascript html css

asked by anonymous 25.06.2018 / 00:31

1 answer

Access attributes of type Object Mount page dynamically with PHP

score 1 · Accepted Answer

You have some problems with the codes that should be fixed. Here for example:

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

Why .toString() if .toFixed(2) already converts the number to string? It is redundant to do this. You are converting string to string.

I do not know how your function is removeSifrao but this one gives the message:

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

See that you can handle the number inside the function and return it cleaner than using parseFloat there in the middle of the codes.

Compare the example code working below with yours and make the corrections:

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><tableborder="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>

Another thing, to multiply and divide numbers, you do not need to convert the type (use parseInt or parseFloat ). It would only be necessary in case of addition or subtraction.