PHP laravel-admin 刪除購物車內的商品

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

經過這次的調整就能正常刪除商品了。