数量和删除购物车中的项目

Question

我将商店中的 "items" 存储在会话中的唯一数组中并传递到购物车中，我想为每件商品添加数量，如果我想从中删除商品要从数组中删除的购物车。我为 "plus" 和 "minus" 制作了 html 表单和数量按钮，但我无法弄清楚如何在输入值随按钮变化时捕获输入值，然后将其乘以每个项目的成本所以稍后我可以获得总成本（在代码中可以看出我为每个项目设置了 value="1"，因此每个项目的基值为 1）。我还使用 JS 从我想要的已删除项目中删除了行，但也没有弄清楚如何从数组中删除该项目

这是我的购物车:

<div class="container">  
<div class="jumbotron">
    <div class="container text-center">
        <h3>Shopping Cart</h3>     
        <table  class="table table-striped" >
            <tr>
                <th class="items" > Product </th> 
                <th class="items"> Quantity </th>
                <th class="items"> Unit Price </th>
                <th>Total Cost</th>
                <th></th>
            </tr>
            <?php foreach ($selectedItems as $item): ?>
                <tr>
                    <th class="items"><?= $item->name ?></th>
                    <th class="items ">
                        <div>
                            <button type="button" class="sub" title="If u want less quantity">-</button>
                            <input type="text" value="1" id="quantity" class="quantity" name="quantity[]" onchange="quantityChange(this)" > 
                            <button type="button" class="add" title="If u want more quantity" >+</button>
                        </div>
                    </th>
                    <th id="price" class="items"> <?= $item->price ?></th>
                    <th><span class="allcost"> </span></th>
                    <th class="items">
                        <button class="remove_field " title="Click to delete product" >
                            <div class="glyphicon glyphicon-trash" ></div>
                        </button>
                    </th>
                </tr>
            <?php endforeach; ?>
        </table>
        <?= Html::a('Return to Shop', ['/stock/shop'], ['class' => 'btn btn-default']) ?>
        <?= Html::a('Checkout', ['/stock/checkout'], ['class' => 'btn btn-default']) ?>
    </div>
</div>

<script type="text/javascript">
$(document).on('click', 'button.remove_field', function () {
    $(this).closest('tr').remove();
});
$('.add').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    target.value = +target.value + 1;
    target.onchange();
});
$('.sub').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    if (target.value > 1) {
        target.value = +target.value - 1;
    }
    target.onchange();
});
function quantityChange(sender) {
    var quantity = $(sender).val();

    console.log(quantity);
};

我的行动车：

   public function actionCart() {
    Yii::$app->session->open();

    Yii::$app->session->open();
    $selectedItems = Yii::$app->session['selectedItems'];

    $stockItems = Stock::find()->where(['id' => $selectedItems])->all();


    $data = [
        'selectedItems' => $stockItems,
    ];

    return $this->render('cart', $data);
}

Answer 1

数量和成本解决方案：

在HTML代码中：

<?php foreach ($selectedItems as $item): ?>
                <tr class="product" data-price="<?= $item->price ?>">
                    <th class="items"><?= $item->name ?></th>
                    <th id="price" class="items middle-th "> <!-- the 3rd column -->
                        <div >
                            <button type="button" class="sub" title="If u want less quantity">-</button>
                            <input class="quantityTxt quantity " id="quantity" name="quantity[]" type="text" value="1" onchange="quantityChange(this)" > 
                            <button type="button" class="add" title="If u want more quantity" >+</button>
                        </div>
                    </th>
                    <th>       
                        <span class="productTotal"></span>       
                    </th>
                    <th id="price" class="items  ">
                        <button class="remove_field " data-value="<?= $item->id ?>" title="Click to delete product" >
                            <div class="glyphicon glyphicon-trash" ></div>
                        </button>
                    </th>
                </tr>
            <?php endforeach; ?>

JavaScript代码：

 $('.add').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    target.value = +target.value + 1;
    updateTotal();
});
$('.sub').click(function () {
    var target = $('.quantity', this.parentNode)[0];
    if (target.value > 1) {
        target.value = +target.value - 1;
    }
    updateTotal();
});

function quantityChange(sender) {
    var quantity = $(sender).val();

    console.log(quantity);
}
;

var updateTotal = function () {

    var sum = 0;
    //Add each product price to total
    $(".product").each(function () {
        var price = $(this).data('price');
        var quantity = $('.quantityTxt', this).val();
        //Total for one product
        var subtotal = price * quantity;
        //Round to 2 decimal places.
        subtotal = subtotal.toFixed(2);
        //Display subtotal in HTML element
        $('.productTotal', this).html(subtotal);
    });
    // total
    $('.productTotal').each(function () {
        sum += Number($(this).html());
    });
    $('#sum').html(sum.toFixed(2));
};

//Update total when quantity changes
$(".product").keyup(function () {
    updateTotal();
});

//Update totals when page first loads
updateTotal();

// set this from local
$('span.productTotal').each(function () {
    $(this).before("&euro;");
});

// unit price
$('.product').each(function () {
    var $price = $(this).parents("div").data('price');
    $(this).before($price);
});

数量和删除购物车中的项目

quantity and remove item in shopping cart

javascript

php

jquery

yii2

product-quantity