如何根据php中的小计和运费计算总金额？

Question

I am making the shopping cart. I am able to calculate the product price depending upon the quantity.

Now I am calculating the total amount depending upon the subtotal and shipping charges with the product price.

When I am increasing the quantity of product it's calculating the product price but not calculating the subtotal and total amount.

Or Is there any other secure way to handle this?

Would you help me out in this?

 $('a.ddd').click(function() { var $productContainer = $(this).closest('div.sp-quantity'); var $pro_list = $(this).closest('tr.pro-list'); var productPrice = parseFloat($pro_list.find('span.price_cal').text()); var $quantityInput = $productContainer.find('input.quntity-input'); var newQuantity = parseFloat($quantityInput.val()) + parseFloat($(this).data('multi')); if (newQuantity>= 1) { // Refresh quantity input. $quantityInput.val(newQuantity); // Refresh total div. var lineTotal = productPrice*newQuantity; $pro_list.find('td.total_amount').data('price','£'+lineTotal).html('£'+lineTotal); } });

 .sp-quantity { width:124px; height:42px; float: left; } .sp-minus { width:40px; height:40px; border:1px solid #e1e1e1; float:left; text-align:center; } .sp-input { width:40px; height:40px; border:1px solid #e1e1e1; border-left:0px solid black; float:left; } .sp-plus { width:40px; height:40px; border:1px solid #e1e1e1; border-left:0px solid #e1e1e1; float:left; text-align:center; } .sp-input input { width:30px; height:34px; text-align:center; border: none; } .sp-input input:focus { border:1px solid #e1e1e1; border: none; } .sp-minus a, .sp-plus a { display: block; width: 100%; height: 100%; padding-top: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table class="table cart-table"> <thead class="table-headings"> <tr> <th class="pname">Product</th> <th class="punit">Unit Price</th> <th class="pquant">Quantity</th> <th class="ptotal">Total price</th> </tr> </thead> <?php if(!empty($_SESSION['products'])): foreach($_SESSION['products'] as $key=>$product):?> <tbody> <tr class="pro-list"> <td> <div class="ordered-product cf"> <div class="pro-img"> <img src="admin/images/products/<?php echo $product['p_images'];?>" alt=" prodcut image"> </div> <div class="pro-detail-name"> <h3><?php echo $product['p_name'];?></h3> </div> <?php $p_delete=$product['p_id']; //$decrypted_delete_id = decryptIt($p_delete); $encrypted_user_id = encryptIt($p_delete); $delete_product_id=urlencode($encrypted_user_id); ?> <a href="my-cart?action=empty&deletekey=<?php echo $delete_product_id;?>" class="cross-cta"><i class="fa fa-times" aria-hidden="true"></i></a> </div> </td> <td>&#163;<span class="price_cal"><?php echo $product['p_currentprice'];?></span></td> <td> <div class="sp-quantity"> <div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div> <div class="sp-input"> <input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" /> </div> <div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div> </div> </td> <?php $single_total = $product['qty']*$product['p_currentprice'];?> <td class='total_amount' data-price='&#163;<?php echo $single_total;?>'>&#163;<?php echo $single_total;?></td> </tr> <?php $total = $total+$single_total; $_SESSION['total_cost']=$total; endforeach;?> <tr class="pro-list"> <td></td> <td></td> <td><span>Subtotal</span></td> <td class='total_amount' data-price='&#163;<?php echo $single_total;?>'>&#163;<?php echo $single_total;?></td> <!-- <td><span>Shiping Cost</span></td> <td><i class="fa fa-fighter-jet" aria-hidden="true"></i>&#163;<?php echo $total;?></td> --> </tr> <tr class="pro-list"> <td></td> <td></td> <td><span>Total Cost</span></td> <td>&#163;<?php echo $total;?></td> </tr> </tbody> <?php endif;?> </table>

Answer 1

The addition to your code below should do it!

Added some class names to make it easier to find values. Added with a jQuery each the product prices up to a subtotal and displayed in the subtotal line. Then add 20 shipping cost to the total. The jQuery is pretty self explanatory.

 updateTotal(); $('a.ddd').click(function() { var $productContainer = $(this).closest('div.sp-quantity'); var $pro_list = $(this).closest('tr.pro-list'); var productPrice = parseFloat($pro_list.find('span.price_cal').text()); var $quantityInput = $productContainer.find('input.quntity-input'); var newQuantity = parseFloat($quantityInput.val()) + parseFloat($(this).data('multi')); if (newQuantity >= 1) { // Refresh quantity input. $quantityInput.val(newQuantity); // Refresh total div. var lineTotal = productPrice * newQuantity; $pro_list.find('td.total_amount').html('£' + lineTotal); $pro_list.find('td.total_amount').data('price', lineTotal); //update data-price } updateTotal(); }); function updateTotal() { var subTotal = 0; var currencySymbol = "£"; //start getting the total amounts from each product row. //add them as a subtotal. $("tr.pro-list > td.total_amount").each(function(index, element) { subTotal += parseFloat($(element).data("price")); //more secure to use data! }); var total = subTotal + $("tr.pro-list.ship > td[data-price]").data("price"); $("tr.pro-list.sub > td.subtotal").html(currencySymbol + "" + subTotal); $("tr.pro-list.total > td.total").html(currencySymbol + "" + total); }

 .sp-quantity { width: 124px; height: 42px; float: left; } .sp-minus { width: 40px; height: 40px; border: 1px solid #e1e1e1; float: left; text-align: center; } .sp-input { width: 40px; height: 40px; border: 1px solid #e1e1e1; border-left: 0px solid black; float: left; } .sp-plus { width: 40px; height: 40px; border: 1px solid #e1e1e1; border-left: 0px solid #e1e1e1; float: left; text-align: center; } .sp-input input { width: 30px; height: 34px; text-align: center; border: none; } .sp-input input:focus { border: 1px solid #e1e1e1; border: none; } .sp-minus a, .sp-plus a { display: block; width: 100%; height: 100%; padding-top: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <table> <tbody> <tr class="pro-list"> <td> <div class="ordered-product cf"> <div class="pro-detail-name"> <h3>ProductName</h3> </div> </div> </td> <td>&#163;<span class="price_cal">55</span></td> <td> <div class="sp-quantity"> <div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div> <div class="sp-input"> <input type="text" class="quntity-input" value="2" /> </div> <div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div> </div> </td> <td class='total_amount' data-price='110'>&#163;110</td> </tr> <tr class="pro-list"> <td> <div class="ordered-product cf"> <div class="pro-detail-name"> <h3>ProductName</h3> </div> </div> </td> <td>&#163;<span class="price_cal">45</span></td> <td> <div class="sp-quantity"> <div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div> <div class="sp-input"> <input type="text" class="quntity-input" value="2" /> </div> <div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div> </div> </td> <td class='total_amount' data-price='90'>&#163;90</td> </tr> <tr class="pro-list sub"> <td></td> <td></td> <td><span>Subtotal</span></td> <td class="subtotal">&#163;110</td> </tr> <tr class="pro-list ship"> <td></td> <td></td> <td><span>Shipping charges</span></td> <td data-price="20">&#163;20</td> </tr> <tr class="pro-list total"> <td></td> <td></td> <td><span>Total Amount</span></td> <td class="total">&#163;110</td> </tr> </tbody> </table>