0

Possuo o seguinte loop:

<?php foreach($order_details as $v_order): ?>
<?php $others_price = $v_order->others_price; ?>

<?php
    $adicional = ($v_order->others_price * count($order_details));
    $vlr_adc = ($adicional / count($order_details));                                    
?>
<tr>
    <td><?php echo $counter ?></td>
    <td><?php echo $v_order->product_name ?></td>
    <td class="media_price_<?php echo $v_order->product_code; ?>"><?php echo $this->localization->currencyFormat($v_order->buying_price); ?></td>
    <td><input type="number" name="product_quantity"  value="<?php echo $v_order->product_quantity ?>" class="form-control product_quantity" data-id="<?php echo $v_order->product_code; ?>" style="width: 75%"></td>
    <td class="total_price_<?php echo $v_order->product_code; ?> linhas"><?php echo $this->localization->currencyFormat($v_order->sub_total) ?></td>
    <td><?php if($counter>1){ ?><button class="btn btn-primary remove_product_<?php echo $v_order->product_code; ?>"><i class="fa fa-minus"></i></button><?php } ?></td>
</tr>
    <?php $counter ++?>
<?php endforeach; ?>

E o seguinte jQuery:

$(".product_quantity").keyup(function(){
    var product_code = $(".product_quantity").data("id");
    var product_quantity = $('.product_quantity').val();
    var media_price = $('.media_price_'+product_code).html();
    var total_price = $('.total_price_'+product_code).html();

    var media_price_r = media_price.replace("R$ ", "");
    var media_price_r2 = media_price_r.replace(/\./g, "").replace(",", ".") || 0;

    var calc = ((parseFloat(media_price_r2))*product_quantity).toFixed(3);
    calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);
    calc = parseFloat(calc);
    $('.total_price_'+product_code).html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));

    $(".linhas").each(function(){
        var linhas = $(".linhas").val()
        var linhas_r = linhas.replace("R$ ", "");
        var linhas_r2 = linhas_r.replace(/\./g, "").replace(",", ".") || 0;
        var soma += parseFloat(linhas_r2);        
    })        
    $(".fechado").html(soma);
});

O problema é: Ao modificar o campo product_quantity, deveria calcular e mostrar ao lado, no total_price. Isto é feito somente na primeira linha, nas demais, não é calculado.

E o segundo problema, seria a soma completa de todos os valores contidos na class linhas, para apresentar o valor total logo mais abaixo:

<h3 class="text-right fechado">Total: <?php echo $this->localization->currencyFormat($order_info->grand_total) ?></h3>

inserir a descrição da imagem aqui

O que tem de errado?

1
  • Cara, não tem como fazer um MVCE? Pelo que estou vendo o problema é apenas no jQuery e o PHP só está atrapalhando a leitura do código. Seria bom se você pudesse adicionar um Snipper só com jQuery e HTML. Commented 25/01/2019 às 17:59

1 Resposta 1

1

O código possui vários problemas. Um deles é o var soma += parseFloat(linhas_r2);. Usando var na variável que se auto-soma, você está redeclarando ela em cada volta do loop. Ao redeclarar ela não tem valor inicial e não pode ser somada com ela mesmo, resultando em erro. Tem que declarar ela antes do loop com valor 0: var soma = 0;, e no loop sem o var.

Aqui, no loop: var linhas = $(".linhas").val(), em vez de ".linhas" deveria ser this, que é o elemento da vez no loop. Se usar ".linhas" irá pegar apenas o primeiro elemento da classe. E não deve usar .val(), mas sim .text() por ser uma div, para pegar o texto da div.

Da mesma forma aqui:

var product_code = $(".product_quantity").data("id");
var product_quantity = $('.product_quantity').val();

Troque os seletores ".product_quantity" por this, para pegar os valores do elemento que disparou o evento:

var product_code = $(this).data("id");
var product_quantity = $(this).val();

Outra coisa é que você precisa colocar o valor final dentro de um span com a classe .fechado, para alterar apenas o valor e não o h3 todo:

<h3 class="text-right">Total: <span class="fechado">R$ 7,00</span></h3>

E no resultado da soma use também o .toLocaleString para formatar o resultado:

$(".fechado").html(soma.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));

Também é preciso usar uma regex no replace, porque o .toLocaleString acrescenta um espaço usando &nbsp; (entidade HTML que cria um espaço). Usando apenas linhas.replace("R$ ", ""); o &nbsp; não será substituído e irá ocasionar problema de NaN na soma. Ficará assim:

var linhas_r = linhas.replace(/R\$\s|&nbsp;/, "");

A regex /R\$\s|&nbsp;/ irá substituir o R$ seguido tanto de um espaço simples (\s) quando do &nbsp;.

Veja:

$(".product_quantity").keyup(function(){
    var product_code = $(this).data("id");
    var product_quantity = $(this).val();
    var media_price = $('.media_price_'+product_code).html();
    var total_price = $('.total_price_'+product_code).html();

    var media_price_r = media_price.replace("R$ ", "");
    var media_price_r2 = media_price_r.replace(/\./g, "").replace(",", ".") || 0;

    var calc = ((parseFloat(media_price_r2))*product_quantity).toFixed(3);
    calc = calc.substr(0, calc.indexOf(".")) + calc.substr(calc.indexOf("."),3);
    calc = parseFloat(calc);
    $('.total_price_'+product_code).html(calc.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));

    var soma = 0;
    $(".linhas").each(function(){
        var linhas = $(this).text();
        var linhas_r = linhas.replace(/R\$\s|&nbsp;/, "");
        var linhas_r2 = linhas_r.replace(/\./g, "").replace(",", ".") || 0;
        soma += parseFloat(linhas_r2);        
    })        
    $(".fechado").html(soma.toLocaleString("pt-BR", { style: "currency" , currency:"BRL"}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
       <td>1</td>
       <td>Prod 2</td>
       <td class="media_price_1">5</td>
       <td><input type="number" name="product_quantity"  value="1" class="form-control product_quantity" data-id="1" style="width: 75%"></td>
       <td class="total_price_1 linhas">R$ 5,00</td>
       <td><button class="btn btn-primary remove_product_1"><i class="fa fa-minus"></i></button></td>
   </tr>
   <tr>
       <td>2</td>
       <td>Prod 1</td>
       <td class="media_price_2">2</td>
       <td><input type="number" name="product_quantity"  value="1" class="form-control product_quantity" data-id="2" style="width: 75%"></td>
       <td class="total_price_2 linhas">R$ 2,00</td>
       <td><button class="btn btn-primary remove_product_2"><i class="fa fa-minus"></i></button></td>
   </tr>
</table>
<h3 class="text-right">Total: <span class="fechado">R$ 7,00</span></h3>

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 .