数量和删除购物车中的物品

Question

我从商店的“物品”被存储在会话中的唯一数组中，并在购物车上传递，并且我想为每个物品提供数量，如果我想要从购物车删除项目以从阵列中删除。我为“加号”和“减号”制作了html表单和数量按钮，但是我无法弄清楚如何在按钮更改输入时捕捉输入值，然后将其与每个项目的成本相乘，以便稍后我可以得到总成本（在代码中可以看出，我为每个项目设置了值=“1”，因此每个项目的基值为1）。我还与JS作出删除，我想，但也已删除项目的行didnt弄清楚如何从阵列中删除该项目

这是我的购物车：

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

我ActionCart：

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("€"); 
}); 

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