2017-09-30 200 views
1

我正在購物車。我能夠根據數量計算產品價格。如何計算總金額取決於小計和運費在PHP?

現在我計算的總金額取決於產品價格的小計和運費。

當我增加產品數量時,它會計算產品價格,但不計算小計和總金額。

或者還有其他安全的方法來處理這個問題嗎?

你能幫我解決嗎?

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

+1

你沒寫,計算小計和總的任何代碼。小計和總計的公式是什麼? –

+0

@PhaniKumarM,我用PHP更新了我的代碼。請檢查一下。 –

+0

你用錯誤的PHP與jQuery,這是一個JavaScript庫。可能是由於使用'$'造成的。 – Mouser

回答

1

添加到您的代碼下面應該這樣做!

添加了一些類名,使其更容易找到值。添加了一個jQuery,每個產品的價格最高達到小計,並顯示在小計行中。然後增加20個運輸成本。 jQuery很自我解釋。

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('&#163;' + 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>

+0

請給我一些時間來了解它的流程 –

+0

更新了答案,使其更加健壯。 – Mouser

+1

非常感謝您的回答,我面對這個問題超過11天,並在5分鐘內解決了它。萬分感激。 Upvote從我身邊。 –