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

Question

我正在制作购物车。我能够根据数量计算产品价格。

现在我根据产品价格的小计和运费计算总金额。

当我增加产品数量时，它会计算产品价格，但不会计算小计和总金额。

或者有没有其他安全的方法来处理这个问题？

你能帮我解决这个问题吗？

$('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

添加到您的下面的代码中应该可以做到!

添加了一些类名以便于查找值。添加了一个 jQuery，每个产品价格都达到小计并显示在小计行中。然后在总价中加上 20 运费。 jQuery 是非常 self 解释的。

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>