How to display item that has been added to shopping cart with javascript?

Asked

Viewed 1,310 times

1

Hello people a hangman here to modify a following script: when executing the code below I have a system where I click the + on the right side, that adds up the value below then everything working well more... I wonder if it would be possible to display below the product name and quantity as you add in + or - besides the total, I know nothing of javascript a friend who made this code for me someone helps in this modification ? 

total = 0.00;
        
        function adiciona(id)
        {
            calcula(id,"adicao");
        }
        
        function remove(id)
        {
            calcula(id,"subtracao");
        }    
            
        function calcula(id,operacao)
        {
                nomeid  = "nome"+id;
                precoid = "preco"+id;
                qtdid   = "qtd"+id;
                
                nome  = document.getElementById(nomeid).innerHTML;
                
                preco = document.getElementById(precoid).innerHTML;    
                preco = textoParaFloat(preco);
                
                qtd   = document.getElementById(qtdid).innerHTML;
                qtd   = parseInt(qtd);

                //Debug
                //alert("Produto: " + nome + "\n Preço: " + preco);    
                
                if(operacao=="adicao")
                {
                    total = total + preco;
                    qtd = qtd + 1;
                }
                else
                {
                    total = total - preco;
                    qtd = qtd - 1;
                }
                
                document.getElementById(qtdid).innerHTML = qtd;
 
                document.getElementById("total").innerHTML = floatParaTexto(total);
        }  


    // Converte   [valor texto com vírgula para  centavos]    para    [float]

    function textoParaFloat(texto)
    {
        // Retira pontos que separam milhar se existirem. Ex: 1.000,25 vira 1000,25
        texto = texto.replace("." , "");

        // Substitui vírgula separando a casa decimal por ponto ex: 1000,25 vira 1000.25
        texto = texto.replace("," , "."); // isso é necessário para converter para float corretamente

        // Converte de texto para número real
        numero = parseFloat(texto);

        return numero;  // Retorna um número float para ser usado para fazer cálculos    
    }



    // Converte   [valor float com ponto para casa decimal]  para  [texto com vírgula para separar centavos]

    function floatParaTexto(numero)
    {
        numero = numero.toFixed(2); // Duas casas decimais

        texto = numero.toString(); 
        texto = texto.replace("." , ","); // substitui a vírgula por ponto 

        return texto;
    }



    // Apenas prevenção para pessoas que digitam ponto de milhar por costume
    function removePonto(x)
    {
        x.value = x.value.replace('.', '');
    }		
            
 div {text-align:center;}
        table {  border-collapse: collapse; border:1px solid #777; width:800px; margin:auto; }
        .prodtd { width:700px; height:80px; }
        .nomeprod { background-color:#ffa;}
        .preco { background-color:#eee;}
 <table>
        
            <!-- Bloco gerado por PHP -->
            <tr>
                <td class="prodtd">
                
                    <div id="nome1"     class="nomeprod">Nome Prod 1</div>
                    
                    <div id="preco1" class="preco">10,00</div>
                    
                </td>
                <td align="center" valign="middle">
                
                    <input type="button" value="-" onclick="remove(1)"> 
                    
                    <span id="qtd1">0</span> 
                    
                    <input type="button" value="+" onclick="adiciona(1)">
                    
                </td>
            </tr>
            <!-- Fim Bloco gerado por PHP -->
            
            
            
            <!-- Bloco gerado por PHP -->
            <tr>
                <td class="prodtd">
                
                    <div id="nome2"  class="nomeprod">Nome Prod 2</div>
                    
                    <div id="preco2" class="preco">22,50</div>
                    
                </td>
                <td align="center" valign="middle">
                
                    <input type="button" value="-" onclick="remove(2)"> 
                    
                    <span id="qtd2">0</span> 
                    
                    <input type="button" value="+" onclick="adiciona(2)">
                    
                </td>
            </tr>
            <!-- Fim Bloco gerado por PHP -->        
            
            <tr>
                <td align="center"><b>Total: <span id="total">0,00<span></b></td>
                <td>&nbsp;</td>
            </tr>
            
        </table>

javascript html

  • But you are already writing the name and quantity ... It could be more specific, pass more details than exactly you want ?

  • When I click on the + will add the value below making calculation displays only the total value wanted that in addition to the value the name of the product being added

2 answers

1


It was not very clear his doubt, but it would be so?

    total = 0.00;

    function adiciona(id) {
      calcula(id, "adicao");
    }


    function remove(id) {
      calcula(id, "subtracao");
    }

    function calcula(id, operacao) {
      nomeid = "nome" + id;
      precoid = "preco" + id;
      qtdid = "qtd" + id;

      nome = document.getElementById(nomeid).innerHTML;

      preco = document.getElementById(precoid).innerHTML;
      preco = textoParaFloat(preco);

      qtd = document.getElementById(qtdid).innerHTML;
      qtd = parseInt(qtd);

      //Debug
      //alert("Produto: " + nome + "\n Preço: " + preco);    

      if (operacao == "adicao") {
        total = total + preco;
        qtd = qtd + 1;
        var s = document.getElementById("exibe").innerHTML;
        // verificando se ele nao existe na exibiçao
        if (s.indexOf(nome) == -1) {
          //mostra a mensagem
          document.getElementById("exibe").innerHTML += "<span id=\""+nome+"\">"+nome + "(<a class='"+nome+"'>" + qtd + "</a>)<a onclick=\"remover('"+nome+"')\">X</a></span><br>";
        } else {
          document.getElementsByClassName(nome)[0].innerHTML=qtd;
        }
      } else {
        
        var s = document.getElementById("exibe").innerHTML;
        // verificando se ele nao existe na exibiçao
        if (s.indexOf(nome) == -1) {
          //mostra a mensagem
          s += "<span id=\""+nome+"\">"+nome + "(<a class='"+nome+"'>" + qtd-1 + "</a>)<a onclick=\"remover('"+nome+"')\">X</a></span><br>";
        } else {
          if(qtd>1){     
          document.getElementsByClassName(nome)[0].innerHTML=qtd-1;
            }
          else{
          
        document.getElementById("exibe").innerHTML=s.replace("<span id=\""+nome+"\">"+nome + "(<a class=\""+nome+"\">" + qtd + "</a>)<a onclick=\"remover('"+nome+"')\">X</a></span><br>"," ");
          
          }}
        total = total - preco;
        qtd = qtd - 1;
        
        
      }
      

      document.getElementById(qtdid).innerHTML = qtd;

      document.getElementById("total").innerHTML = floatParaTexto(total);
    }


    // Converte   [valor texto com vírgula para  centavos]    para    [float]

    function textoParaFloat(texto) {
      // Retira pontos que separam milhar se existirem. Ex: 1.000,25 vira 1000,25
      texto = texto.replace(".", "");

      // Substitui vírgula separando a casa decimal por ponto ex: 1000,25 vira 1000.25
      texto = texto.replace(",", "."); // isso é necessário para converter para float corretamente

      // Converte de texto para número real
      numero = parseFloat(texto);

      return numero; // Retorna um número float para ser usado para fazer cálculos    
    }



    // Converte   [valor float com ponto para casa decimal]  para  [texto com vírgula para separar centavos]

    function floatParaTexto(numero) {
      numero = numero.toFixed(2); // Duas casas decimais

      texto = numero.toString();
      texto = texto.replace(".", ","); // substitui a vírgula por ponto 

      return texto;
    }

    function remover(nome){
      alert(nome);
      var x = document.getElementById(nome);
var produtosListados =	document.getElementsByClassName("nomeprod");
	 for(var i =0; i<produtosListados.length; i++){
		 if(produtosListados.item(i).innerHTML==nome){
			 var itemEx=(produtosListados.item(i).parentNode);
			 var el=itemEx.parentElement.children[1];
			 var valor=parseFloat(itemEx.parentElement.children[0].children[1].innerHTML);
			 var quantidade=parseInt(el.children[1].innerHTML);
			 el.children[1].innerHTML=0;
			 retirarTotal=(parseFloat(document.getElementById("total").innerHTML))-(parseFloat(quantidade*valor));
		alert(parseFloat(quantidade*valor));
			  document.getElementById("total").innerHTML = floatParaTexto(retirarTotal);
			 }
		 }
    x.remove(0);


    }

    // Apenas prevenção para pessoas que digitam ponto de milhar por costume
    function removePonto(x) {
      x.value = x.value.replace('.', '');
    }
div {
  text-align: center;
}
table {
  border-collapse: collapse;
  border: 1px solid #777;
  width: 800px;
  margin: auto;
}
.prodtd {
  width: 700px;
  height: 80px;
}
.nomeprod {
  background-color: #ffa;
}
.preco {
  background-color: #eee;
}
<table>

  <!-- Bloco gerado por PHP -->
  <tr>
    <td class="prodtd">

      <div id="nome1" class="nomeprod">Nome Prod 1</div>

      <div id="preco1" class="preco">10,00</div>

    </td>
    <td align="center" valign="middle">

      <input type="button" value="-" onclick="remove(1)">

      <span id="qtd1">0</span> 

      <input type="button" value="+" onclick="adiciona(1)">

    </td>
  </tr>
  <!-- Fim Bloco gerado por PHP -->



  <!-- Bloco gerado por PHP -->
  <tr>
    <td class="prodtd">

      <div id="nome2" class="nomeprod">Nome Prod 2</div>

      <div id="preco2" class="preco">22,50</div>

    </td>
    <td align="center" valign="middle">

      <input type="button" value="-" onclick="remove(2)">

      <span id="qtd2">0</span> 

      <input type="button" value="+" onclick="adiciona(2)">

    </td>
  </tr>
  <!-- Fim Bloco gerado por PHP -->

  <tr>
    <td align="center"><b>Total: <span id="total">0,00<span></b>
    </td>
    <td>&nbsp;</td>
  </tr>
 

</table>
  <div id="exibe"></div>

  • That even lacks only a fit Thanks bro you’re understanding

  • @Hemersonprestes Lacked what? :)

  • as if it were an example cart Name Prod 2(2) Name Prod 2 (1) this appearing only 1

  • @Hemersonprestes like this?

  • That perfect bro!

  • Mano missing remove the name as quantity and the name if the quantity is zero remove the name can be ?

  • Decreasing the value also works only the +

  • @Hemersonprestes take a look now

  • you and top file ! manooo

  • Thanks partner!

  • You’re welcome :) If you don’t understand what I’ve done, I can explain...

  • Quiet not much use of javascript now I will adapt here in my system that is in wordpress

  • You have personal website ?

  • @hemersonPrestes I have no friend, I am well without time, and when I have some time I come to relax answering some questions here kk

  • Next Brother - I sent you only the javascript that makes the sum below the table has another that takes the values to a php page after you modified is not working the sending butao to the next page- I will paste below now with your code and javascript below the table as this

  • Below the table

  • Let’s go continue this discussion in chat.

  • @Hemersonprestes I made the X as Voce said, this removing, but this rounding the value at the time of extracting the total, I believe that Voce can correct

Show 13 more comments

0

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
  text-align: center;
}
table {
  border-collapse: collapse;
  border: 1px solid #777;
  width: 800px;
  margin: auto;
}
.prodtd {
  width: 700px;
  height: 80px;
}
.nomeprod {
  background-color: #ffa;
}
.preco {
  background-color: #eee;
}
    </style>
   <script type="text/javascript">
        total = 0.00;

function adiciona(id) {
  calcula(id, "adicao");
}

function remove(id) {
  calcula(id, "subtracao");
}

function calcula(id, operacao) {
  nomeid = "nome" + id;
  precoid = "preco" + id;
  qtdid = "qtd" + id;

  nome = document.getElementById(nomeid).innerHTML;

  preco = document.getElementById(precoid).innerHTML;
  preco = textoParaFloat(preco);

  qtd = document.getElementById(qtdid).innerHTML;
  qtd = parseInt(qtd);

  //Debug
  //alert("Produto: " + nome + "\n Preço: " + preco);    

  if (operacao == "adicao") {
    total = total + preco;
    qtd = qtd + 1;
    var s = document.getElementById("exibe").innerHTML;
    // verificando se ele nao existe na exibiçao
    if (s.indexOf(nome) == -1) {
      //mostra a mensagem
      document.getElementById("exibe").innerHTML += nome + "(<a class='"+nome+"'>" + qtd + "</a>)<br>";
    } else {
      document.getElementsByClassName(nome)[0].innerHTML=qtd;
    }
  } else {
    
    var s = document.getElementById("exibe").innerHTML;
    // verificando se ele nao existe na exibiçao
    if (s.indexOf(nome) == -1) {
      //mostra a mensagem
      s += nome + "(<a class='"+nome+"'>" + qtd-1 + "</a>)<br>";
    } else {
      if(qtd>1){     
      document.getElementsByClassName(nome)[0].innerHTML=qtd-1;
        }
      else{
      
    document.getElementById("exibe").innerHTML=s.replace(nome + "(<a class=\""+nome+"\">" + qtd + "</a>)<br>"," ");
      
      }}
    total = total - preco;
    qtd = qtd - 1;
    
    
  }
  

  document.getElementById(qtdid).innerHTML = qtd;

  document.getElementById("total").innerHTML = floatParaTexto(total);
}


// Converte   [valor texto com vírgula para  centavos]    para    [float]

function textoParaFloat(texto) {
  // Retira pontos que separam milhar se existirem. Ex: 1.000,25 vira 1000,25
  texto = texto.replace(".", "");

  // Substitui vírgula separando a casa decimal por ponto ex: 1000,25 vira 1000.25
  texto = texto.replace(",", "."); // isso é necessário para converter para float corretamente

  // Converte de texto para número real
  numero = parseFloat(texto);

  return numero; // Retorna um número float para ser usado para fazer cálculos    
}



// Converte   [valor float com ponto para casa decimal]  para  [texto com vírgula para separar centavos]

function floatParaTexto(numero) {
  numero = numero.toFixed(2); // Duas casas decimais

  texto = numero.toString();
  texto = texto.replace(".", ","); // substitui a vírgula por ponto 

  return texto;
}



// Apenas prevenção para pessoas que digitam ponto de milhar por costume
function removePonto(x) {
  x.value = x.value.replace('.', '');
}
    </script>
    </head>
<body>
    <table>

  <!-- Bloco gerado por PHP -->
  <tr>
    <td class="prodtd">

      <div id="nome1" class="nomeprod">Nome Prod 1</div>

      <div id="preco1" class="preco">10,00</div>

    </td>
    <td align="center" valign="middle">

      <input type="button" value="-" onclick="remove(1)">

      <span id="qtd1">0</span> 

      <input type="button" value="+" onclick="adiciona(1)">

    </td>
  </tr>
  <!-- Fim Bloco gerado por PHP -->



  <!-- Bloco gerado por PHP -->
  <tr>
    <td class="prodtd">

      <div id="nome2" class="nomeprod">Nome Prod 2</div>

      <div id="preco2" class="preco">22,50</div>

    </td>
    <td align="center" valign="middle">

      <input type="button" value="-" onclick="remove(2)">

      <span id="qtd2">0</span> 

      <input type="button" value="+" onclick="adiciona(2)">

    </td>
  </tr>
  <!-- Fim Bloco gerado por PHP -->

  <tr>
    <td align="center"><b>Total: <span id="total">0,00<span></b>
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td align="center" id="exibe"></td>

  </tr>

</table>

 <script>
            function verifica_e_envia()
            {
                array_dados = new Array();
            
                colecao = document.getElementsByTagName("tr");
                
                qtd_blocos = colecao.length - 1; // O último tr da tabela é onde fica o total e está sendo descontado
                // É necessário saber a quantidade de blocos para poder usar em um loop catando os valores
                
                // Percorre os blocos catando nomes, quantidades e valores dos produtos com quantidade maior que zero
                for(i=1; i<=qtd_blocos ;i++)
                {
                    qtdid = "qtd"+i;
                    qtd   = document.getElementById(qtdid).innerHTML;
                    qtd   = parseInt(qtd);
                    
                    if(qtd>0)
                    {
                        obj_tmp = {};
                        
                        nomeid = "nome"+i;
                        nome   = document.getElementById(nomeid).innerHTML;
                        
                        precoid = "preco"+i;
                        preco   = document.getElementById(precoid).innerHTML;
                        preco   = textoParaFloat(preco);

                        obj_tmp.nome  = nome;
                        obj_tmp.preco = preco;
                        obj_tmp.qtd   = qtd;
                        obj_tmp.subtotal = qtd*preco;
                        
                        // adiciona elemento no array de dados que será enviado
                        array_dados.push(obj_tmp);
                    }
                }
                
                // põe o array_dados no input hidden json_dados
                document.getElementById("json_dados").value = JSON.stringify(array_dados);
                
                // envia o formulário form_pedido_produtos
                document.getElementById("form_pedido_produtos").submit();

            }
        </script>        
        
        <form action="pedido_produtos.php" method="post" id="form_pedido_produtos" >
            <input type="hidden" name="json_dados" id="json_dados">        
            <input type="button" value="Verifica e envia valores" onclick="verifica_e_envia()">
        </form>
   
</body>
</html>

Browser other questions tagged javascript html

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