2017-09-30 12 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

あなたはJavaScriptライブラリであるjQueryでPHPを誤解しています。おそらく '$'の使用によって引き起こされます。 – 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。 –

関連する問題