Shopping cart item is not removed

Asked

Viewed 694 times

1

I have a shopping cart created dynamically, but the problem is that when I delete an item it even removes, but if I try to add another item it takes the one that has been removed and adds again in the shopping cart and the item that I added. What is wrong with me? Remembering that this cart only shows the products to the user and removes.

Add code:

  // JQUERY ADICIONAR AO CARRINHO DE COMPRAS
  $(document).on("click",".btn-adicionar-carrinho",function(e)
  {
    // esvaziar o carrinho de compras
    carrinhovazio = $('.car-vazio').empty();
    // id do produto
    var idProduto = $('.nomeproduto').attr("id");
    // nome do produto
    var nomeproduto =  $('.header-ingrediente').text();
    // valor do produto
    var valorproduto = $('.v-lor').text();
    // quantidade do produto
    var quantidadeproduto = $('.item-qtd-produto').text();
    // imagem do produo
    var imagemproduto =  $('.imagemprodseq').data('id-imagem');

    mostraProdutos += "<div class='prodmostra'><div class='imagem-prod' data-id-prod-carrinho=" + idProduto + ">"
    mostraProdutos += "<img class='imagem-carrinho' title='" + nomeproduto + "' src='" + urlBase + "imagem/produto/" +  imagemproduto + "/jpg' alt='Imagem carrinho de compras CloudDelivery' width='100' height='70' />"
    mostraProdutos += "</div><div class='produto'><a href='' style='float: right;' class='excluir-produto-carrinho' title='Retirar produto'>Remover[x]</a><div class='nomeprodutocart'>"+ nomeproduto+ "</div>"
    mostraProdutos += "<div class='qtd-texto'>Quantidade: </div><div class='quantidadeprodutocart'>"+ quantidadeproduto  + "</div><div id='valorprodutocart' class='valorprodutocart'><span>"+ valorproduto +"</span></div></div></div>";
    // mostra os dados do carrinho de compras selecionado
    tabelacarrinho.html(mostraProdutos);

    somaValores();
  });

Delete button code:

      // botão para fechar a tela de produtos do carrinho
      $(document).on("click",".excluir-produto-carrinho", function(e)
      {
        e.preventDefault();
        var c = "";

        if (urlselecionada == valorurl1)
        {
          $(this).fadeOut('slow', function(c)
          {
            var quantitem = 1;
            var contTotal = "";
            var quantcarrinho = $('#quantidadecarrinho').text();
            var idStorage = $('#nomeproduto').text();
            var listaquantcarrinho = $('#quantidadecarrinho');

            contTotal += (quantcarrinho - quantitem);

            $(this).closest('.cart-sec').remove();
            listaquantcarrinho.html(contTotal);
            JSON.stringify(excluirProdutoStorage(idStorage));

          });
        }
        else
        {
          var prodmostra = $(".prodmostra").length;
          //remove o produto conforme o total do carrinho
          var precoproduto = $(this).parent().find('.valorprodutocart span').text().replace('R$','');
          precoproduto = precoproduto.replace(',','.');
          // pega o valor total
          var pegatotalcarrinho = $('.total-carrinho').text().replace('R$','');
          pegatotalcarrinho = pegatotalcarrinho.replace(',','.');
          subtotal = subtrairValorTotal(pegatotalcarrinho, precoproduto);
          replacetotal = formataReal(subtotal);
          resultadoitem = Money.format(replacetotal);
          $(".total-carrinho").html(resultadoitem);

          // remove o item no carrinho de compras
          $(this).parent().parent().remove();

          if (prodmostra == 1)
          {
            carrinhovazio = $('.car-vazio').text('Carrinho vazio');
          }
          else
          {
            carrinhovazio = $('.car-vazio').empty();
          }
        }

      });
javascript jquery

  • it seems that you always concatenate the values present in the cart by var shows Products but does not clean when the item is removed, and when you add another already using +=('displaProducts +='), the previous item already removed comes together.

  • It even worked, put after $(this). Parent(). Parent(). remove(); the item shows Products = "", but when adding it deletes what is already in the cart. How can I resover?

  • Blz. You can use the find on the variable and remove each element, or assign to a var mediator who delivers the correct products at the end. I’ll send you the code in the answer.

  • Ok. Problem solved. Thank you very much

1 answer

1


Changed as requested.

Follow code as we speak.

// JQUERY ADICIONAR AO CARRINHO DE COMPRAS
$(document).on("click",".btn-adicionar-carrinho",function(e) {
    // esvaziar o carrinho de compras
    carrinhovazio = $('.car-vazio').empty();
    // id do produto
    var idProduto = $('.nomeproduto').attr("id");
    // nome do produto
    var nomeproduto =  $('.header-ingrediente').text();
    // valor do produto
    var valorproduto = $('.v-lor').text();
    // quantidade do produto
    var quantidadeproduto = $('.item-qtd-produto').text();
    // imagem do produo
    var imagemproduto =  $('.imagemprodseq').data('id-imagem');

    //Alteração 1!
    //Reload a var com os produtos presentes no carrinho.
    //Aqui vamos buscar os valores atuais que estão no carrinho para unir com o novo produto.
    mostraProdutos = tabelacarrinho.html();

    //Carrega o novo produto

    //Alteração 2!
    //Foi criada uma referência para cada produto, onde podemos com facilidade encontrar este elemento e manipular como quisermos.
    mostraProdutos += "<div id='prd_" + idProduto + "'>";

    mostraProdutos += "<div class='prodmostra'><div class='imagem-prod' data-id-prod-carrinho=" + idProduto + ">"
    mostraProdutos += "<img class='imagem-carrinho' title='" + nomeproduto + "' src='" + urlBase + "imagem/produto/" +  imagemproduto + "/jpg' alt='Imagem carrinho de compras CloudDelivery' width='100' height='70' />"
    mostraProdutos += "</div><div class='produto'><a href='' style='float: right;' class='excluir-produto-carrinho' title='Retirar produto'>Remover[x]</a><div class='nomeprodutocart'>"+ nomeproduto+ "</div>"
    mostraProdutos += "<div class='qtd-texto'>Quantidade: </div><div class='quantidadeprodutocart'>"+ quantidadeproduto  + "</div><div id='valorprodutocart' class='valorprodutocart'><span>"+ valorproduto +"</span></div></div></div></div>";
    // mostra os dados do carrinho de compras selecionado
    tabelacarrinho.html(mostraProdutos);

    somaValores();
});

Rule out:

// botão para fechar a tela de produtos do carrinho
$(document).on("click",".excluir-produto-carrinho", function(e) {

    e.preventDefault();
    var c = "";

    if (urlselecionada == valorurl1)
    {
      $(this).fadeOut('slow', function(c)
      {
        var quantitem = 1;
        var contTotal = "";
        var quantcarrinho = $('#quantidadecarrinho').text();
        var idStorage = $('#nomeproduto').text();
        var listaquantcarrinho = $('#quantidadecarrinho');

        contTotal += (quantcarrinho - quantitem);

        $(this).closest('.cart-sec').remove();
        listaquantcarrinho.html(contTotal);
        JSON.stringify(excluirProdutoStorage(idStorage));

        //Alteração 3!
        //Remover o produto do carrinho.
        //Busca pela referência que criamos na funcao acima o produto, localiza dentro do html corrente da pagina, e remove o elemento.
        tabelacarrinho.find('#prd_'+ idProduto).remove();

      });
    }
    else
    {
      var prodmostra = $(".prodmostra").length;
      //remove o produto conforme o total do carrinho
      var precoproduto = $(this).parent().find('.valorprodutocart span').text().replace('R$','');
      precoproduto = precoproduto.replace(',','.');
      // pega o valor total
      var pegatotalcarrinho = $('.total-carrinho').text().replace('R$','');
      pegatotalcarrinho = pegatotalcarrinho.replace(',','.');
      subtotal = subtrairValorTotal(pegatotalcarrinho, precoproduto);
      replacetotal = formataReal(subtotal);
      resultadoitem = Money.format(replacetotal);
      $(".total-carrinho").html(resultadoitem);

      // remove o item no carrinho de compras
      $(this).parent().parent().remove();

      if (prodmostra == 1)
      {
        carrinhovazio = $('.car-vazio').text('Carrinho vazio');
      }
      else
      {
        carrinhovazio = $('.car-vazio').empty();
      }
    }

});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.