#20210420 更新
本篇是接續 PHP laravel-admin 購物車清單 的文章。
上一篇介紹點了選購的按鈕後會把商品加到購物車中，這一篇就是介紹如何刪除購物車的物品且不需要刷新頁面，就是利用ajax。
先新增一個action。
php artisan admin:action Product\\DeleteCart --name="刪除購物車"DeleteCart.php的內容。
use App\Models\Cart;
use App\Models\Product;
public function handle(Request $request)
{
// $request ...
$product_name = Product::find($request->get('_product'))->name;
$cart = Cart::where('sale_id', $request->get('_saleid'))->where('product_id', $request->get('_productid'));
$cart->forceDelete();
return $this->response()->success($product_name.'已刪除');
}新增iScript裡的內容。 此方法無法刪除購物車內之商品
$('.delete-cart').off('click').on('click', function() {
var data = $(this).data();
var key = $(this).data('_key');
var target = $(this);
Object.assign(data, []);
var process = new Promise(function (resolve,reject) {
Object.assign(data, {
_token: $.admin.token,
_action: 'App_Admin_Actions_Product_DeleteCart',
_productid: key,
_saleid:urlParams.get('saleid'),
});
$.ajax({
method: 'POST',
url: '../_handle_action_',
data: data,
success: function (data) {
$('#p'+key).remove();
resolve([data, target]);
},
error:function(request){
//reject(request); debug用
reject('商品刪除失敗');
}
});
});
process.then(actionResolver).catch(actionCatcher);
});因購物車的商品項目是使用ajax渲染上去的，無法連動上述的javascript，因此我們需要在渲染時一併加上javascript，修改一下iScript中的btn-add-to-cart，藍字是本次新增的部份。
$('.btn-add-to-cart').off('click').on('click', function() { var data = $(this).data(); var key = $(this).data('_key'); var target = $(this); Object.assign(data, {"_model":"App_Models_Product"}); var process = new Promise(function (resolve,reject) { Object.assign(data, { _token: $.admin.token, _action: 'App_Admin_Actions_Product_AddCart', _saleid: urlParams.get('saleid'), }); $.ajax({ method: 'POST', url: '../_handle_action_', data: data, success: function (data) { var p = data.toastr.content; if (p != '重複選購') { $('#total').before('<li id="p'+key+'><p>'+p+'<i class="text-danger pull-right fa fa-trash-o href-hand delete-cart" data-_key="'+key+'"></i></p></li>'); $('#p'+key).off('click').on('click', function() { var data = $(this).data(); var key = $(this).data('_key'); var target = $(this); Object.assign(data, []); var process = new Promise(function (resolve,reject) { Object.assign(data, { _token: $.admin.token, _action: 'App_Admin_Actions_Product_DeleteCart', _productid: key, _saleid:urlParams.get('saleid') }); $.ajax({ method: 'POST', url: '../_handle_action_', data: data, success: function (data) { $('#p'+key).remove(); resolve([data, target]); }, error:function(request){ //reject(request); reject('商品刪除失敗'); } }); }); process.then(actionResolver).catch(actionCatcher); }); } resolve([data, target]);
}, error:function(request){ //reject(request); debug用 reject('選購失敗'); } }); }); process.then(actionResolver).catch(actionCatcher); });
經過這次的調整就能正常刪除商品了。
