Question

我正在使用正在运行的会话创建购物车。现在我正在制作数量部分我的意思是用户可以增加产品数量并减少数量，并且根据该总量将在屏幕上显示而不刷新页面。我只需要当用户点击加号时，金额就会根据数量而变化。

<?php echo $product['qty'];?>我从会话中获取此值

知道我该怎么办？我还在https://jsfiddle.net/Narendra2015/uLx0912t/

中添加了相同的代码

 /*increase the product qty*/
  $(".ddd").on("click", function () {
    var $button = $(this),
        $input = $button.closest('.sp-quantity').find("input.quntity-input");
    var oldValue = $input.val(),
        newVal;
    if ($.trim($button.text()) == "+") {
        newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $input.val(newVal);
});

建议Mr.A.后的第二段代码Iglesias的

$('a.ddd').click(function() {

    var $productContainer = $(this).closest('div.sp-quantity');
    var $pro_list = $(this).closest('tr.pro-list');
    var productPrice = parseInt($pro_list.find('span.price_cal').text());
    var $quantityInput = $productContainer.find('input.quntity-input');
    var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));

    if (newQuantity>= 0) {

        // Refresh quantity input.
        $quantityInput.val(newQuantity);

        // Refresh total div.
        var currentChange = productPrice*parseInt($(this).data('multi'));
        var total = parseInt($('div#total').text());
        $('div#total').text(total + currentChange);
    }

});

的CSS

.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;
}

HTML

<?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 id="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>&#163;<?php $_SESSION['total_cost']=$total;echo $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;?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

总金额，我在剧本中添加了这个。

  // Refresh total div.
 var subtotal_amount = subtotal_amount+lineTotal; 
  $pro_list.find('td.subtotal_amount').data('price','&#163;'+subtotal_amount).html('&#163;'+subtotal_amount);

HTML <tr class="pro-list">

中的HTML

<td class='subtotal_amount' data-price='&#163;<?php echo $total;?>'>&#163;<?php echo $total;?></td>

Answer 1

首先，您可以将您的产品价格和div中的总金额与类或ID放在一起，以便于选择，例如...

<?php $product=10;?>

<div class="sp-quantity">

    <div class="product-price"><?=$product?></div>

    <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>

<?php
$single_total = $product['qty']*$product;
echo $total = $total + $single_total;
?>
<div id="total"><?=$total?></div>

然后，在您更改产品数量时随时刷新其值...

$('a.ddd').click(function() {

    var $productContainer = $(this).closest('div.sp-quantity');
    var productPrice = parseInt($productContainer.find('div.product-price').text());
    var $quantityInput = $productContainer.find('input.quntity-input');
    var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));

    if (newQuantity>= 0) {

        // Refresh quantity input.
        $quantityInput.val(newQuantity);

        // Refresh total div.
        var currentChange = productPrice*parseInt($(this).data('multi'));
        var total = parseInt($('div#total').text());
        $('div#total').text(total + currentChange);
    }

});

我希望它有所帮助

Answer 2

我不确定是否理解，但总金额相当于总价（取决于产品的数量），不是吗？

如果我是对的，我认为更好的方法是在'div'标签中显示总金额（例如），其中包含属性'data-total'和产品的价格。

然后，在JS中，您可以访问属性的数据并使用价格和数量更新总数。这样的事情：

<div class='total_amount' data-price='<?php echo $product['price']?>' >
  0
</div>

然后将您的JS文件更新为：

$(".ddd").on("click", function () {
    var $button = $(this),
        $input = $button.closest('.sp-quantity').find("input.quntity-input");
    var oldValue = $input.val(),
        newVal;
    if ($.trim($button.text()) == "+") {
        newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 1;
        }
    }
    $input.val(newVal);
    var price = $('.total_amount').data('price');
    $('.total_amount').html(price * newVal);
});

希望它会对你有所帮助:)。

PS：对不起我的英语，我是法国人：P

如何使用php根据数量更改总金额

2 个答案: