PHP laravel-admin 購物車清單

#20210501 更新

這是延續上篇 PHP laravel-admin grid客製化自行定義 擴充同個頁面的功能。

選完商品後，希望有個功能可以觀看目前買了哪些東西而且是在不跳頁的情況下，所以就擴充了這支程式。

考慮了很久，我決定要把觀看購物車的按鈕放在tools中，所以我們先在grid的部份加上tools，這邊會把上一篇中$this->iScript()的部份移到新增的function中，所以我們先把原本grid裡的$this->iScript()移除。

$this->iScript();
$grid->tools(function ($tools) {
    $tools->append($this->addCart());
});

因為購物車清單需要顯示商品名稱，我們把app/Admin/Actions/Product/AddCart.php改一下。

use App\Models\Product;    
public function handle(Model $model, Request $request)
{
    $exist = Cart::where('sale_id', $request->get('_saleid'))->where('product_id', $this->getKey())->count(); 
    if ($exist < 1) {
        $product_name = Product::find($this->getKey())->name;
        $cart = new Cart();
        $cart->sale_id = $request->get('_saleid');
        $cart->product_id = $this->getKey();
        $cart->sale_amount = 1;
        $cart->save();
        return $this->response()->success($product_name);
    }
    else {
        return $this->response()->warning('重複選購');
    }
}

然後我們來寫addCart的部份吧！

protected function addCart() {
    $this->iScript();
    return '
    <div class="btn-group pull-right" style="margin-right: 10px;">
    <a class="btn btn-md btn-success" title="購物車"><i class="fa fa-shopping-cart"></i><span class="hidden-xs"> 購物車</span></a>
    <button type="button" class="btn btn-md btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul id="isale" class="dropdown-menu" role="menu">
    </ul>
</div>';
}

修改一下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>');
                }
                resolve([data, target]);
            },
            error:function(request){
                //reject(request); debug用
                reject('選購失敗');
            }
        });
    });

    process.then(actionResolver).catch(actionCatcher);
});

這裡有新增了幾組style，可以參考著增加到自己的css檔案中。

.dropdown-menu li p {
    margin: 5px 10px;
    border-bottom: #ccc dashed 1px;
}
.href-hand {
    cursor: pointer;
}

這麼一來選購商品時即可在上方的購物車按鈕中查看商品了，之後會寫一篇關於刪除商品及查詢或商品換頁時自動帶入商品清單到購物車中。