16-2
刪除某個購物品項
- 先修改模板中,刪除的按紐,我們可以將要刪除的商品編號加入(其實加購物車編號也行)
<a href="#" class="btn btn-danger btn-sm btn-del-from-cart" data-id="{{ $cart->product_id }}">移除</a>
接著修改JavaScript的部份
@section('scriptsAfterJs')
<script>
$(document).ready(function () {
$('.btn-del-from-cart').click(function () {
var product_id=$(this).data('id');
swal({
title: "確認要將該商品移除?",
icon: "warning",
buttons: ['取消', '確定'],
dangerMode: true,
}).then(function(willDelete) {
// 用戶點擊 確定 按鈕,willDelete 的值就會是 true,否則為 false
if (!willDelete) {
return;
}
axios.delete('/cart/' + product_id)
.then(function () {
location.reload();
})
});
});
});
</script>
@endsection
由於刪除是比較危險的動作,所以,一般都會先確認過後再刪除。
-
第5行,因為在then()
中,是無法直接用$(this).data('id')
來取的商品編號,所以,我們先用var product_id=$(this).data('id');
來將取得編號設給自訂變數product_id
,以便等會在then()
中使用。
-
第13行,如果用戶點擊「確定」按鈕,自訂的willDelete
變數值就會是 true
,否則為 false
,換言之如果是false
我們就直接跳出,不做刪除。
-
第16行,我們利用axios的delete
送出delete
動作,並執行「/cart/編號
」的路徑,如此,便會呼叫對應的刪除路由設定。
-
第18行,刪除完就進行重整動作,以便看到新的清單內容。
- 接著修改路由
\專案\routes\web.php
,在裡面加入一組刪除購物車品項的設定(第9行),請注意,刪除的動詞要用delete
喔!
Route::pattern('product', '[0-9]+');
Route::pattern('id', '[0-9]+');
Route::get('/', 'ProductController@index')->name('index');
Route::get('/product', 'ProductController@index')->name('product.index');
Route::get('/product/{product}', 'ProductController@show')->name('product.show');
Route::post('/cart/store', 'CartController@store')->name('cart.store');
Route::get('/cart', 'CartController@index')->name('cart.index');
Route::delete('/cart/{id}', 'CartController@destroy')->name('cart.destroy');
Auth::routes();
Route::get('/home', 'ProductController@index')->name('home');
- 接著修改控制器
\專案\app\Http\Controllers\CartController.php
public function destroy($id, Request $request)
{
$request->user()->carts()->where('product_id', $id)->delete();
return [];
}
- 目前登入使用者是
$request->user()
,因為我們有設模型關聯,所以,可以輕鬆抓出目前登入者的所有購物車資料,即$request->user()->carts()
最後利用where('product_id', $id)
抓出指定資料並用delete()
刪除之即可。
- 記得要在index()中加入
Request $request
,因為我們要利用$request->user()
來抓取目前登入者的資訊。