3 回答

TA貢獻1847條經驗 獲得超11個贊
我開始忘記Laravel,我附近沒有,所以下面的代碼只是理論上的。
首先,您需要一個后端才能即時更新數量。這只是您的“正?!备?,但它將返回帶有新 .total
public function updateQuantity($rowId)
{
\Cart::session(auth()->id())->update($rowId, [
'quantity' => [
'relative' => true,
'value'=> request('quantity')
]
]);
$newTotal = Cart::session(auth()->id())->get($items->id)->getPriceSum();
return [ 'total' => $newTotal ];
}
新路線:
Route::get('/cart/updateQuantity/{itemId}', 'CartController@updateQuantity')->name('cart.updateQuantity')->middleware('auth');
現在我們需要準備前端以便能夠動態更新。quantitytotal
<!-- we will change this line: -->
<input class="js-result form-control h-auto border-0 rounded p-0 shadow-none" name="quantity" type="number" value="{{$items->quantity}}">
<!-- to this line: -->
<input class="js-result form-control h-auto border-0 rounded p-0 shadow-none" name="quantity" id="quantity{{$items->id}}" data-id="{{$items->id}}" type="number" value="{{$items->quantity}}" onchange="updateQuantity({{$items->id}})">
<!-- yes, we just added ID to be able to use this later, and added callback -->
<!-- after previous line with "input" we can add an element to keep the route,
this is because routes are calculated by Laravel dynamically -->
<span id="updateQuantityRoute{{$items->id}}" style="display:none">{{route('cart.updateQuantity',$items->id)}}</span>
<!-- also we need to prepare "total", so this line: -->
<span class="">{{Cart::session(auth()->id())->get($items->id)->getPriceSum()}}</span>
<!-- change to this line: -->
<span class="" id="total{{$items->id}}">{{Cart::session(auth()->id())->get($items->id)->getPriceSum()}}</span>
所以魔力在于功能:updateQuantity
function updateQuantity(itemId) {
// here I will use jQuery just to show the idea
const route = $('#updateQuantityRoute' + itemId);
const newQuantity = $('#quantity' + itemId).val();
$.post(route, {'quantity': newQuantity}).done(function( data ) {
// here we have response
if (typeof data === 'string') data = JSON.parse(data);
const updatedTotal = data.total;
$('#total' + itemId).innerText = updatedTotal; // update in DOM
});
}

TA貢獻1876條經驗 獲得超6個贊
您必須更改一些代碼:
1-添加新的路線和方法來檢索所有卡項目
Route::get('/cart/items', 'CartController@allItems')->name('cart.all-items')->middleware('auth');
方法:
public function allItems()
{
return \Cart::session(auth()->id())->getContent();
}
2-接下來,您需要將此代碼塊移動并更改為Javascript,并通過Ajax從上述路由中檢索數據。
@foreach(\Cart::session(auth()->id())->getContent() as $items)
<tr>
<td class="text-center">
<a href="{{ route('cart.destroy', $items->id)}}">x</a>
</td>
<td data-title="Product">
<a href="#" class="text-gray-90">{{ $items ['name'] }}</a
</td>
<td data-title="Price">
<span class="">LKR {{ $items ['price'] }}.00</span>
</td>
<td data-title="Quantity">
<span class="sr-only">Quantity</span>
<!-- Quantity -->
<div class="border rounded-pill py-1 width-122 w-xl-80 px-3 border-color-1">
<div class="js-quantity row align-items-center">
<div class="col">
<input class="js-result form-control h-auto border-0 rounded p-0 shadow-none" name="quantity" type="text" value="{{$items->quantity}}">
</div>
<div class="col-auto pr-1">
<a class="js-minus btn btn-icon btn-xs btn-outline-secondary rounded-circle border-0" href="javascript:;">
<small class="fas fa-minus btn-icon__inner"></small>
</a>
<a class="js-plus btn btn-icon btn-xs btn-outline-secondary rounded-circle border-0" href="javascript:;">
<small class="fas fa-plus btn-icon__inner"></small>
</a>
</div>
</div>
</div>
<!-- End Quantity -->
</td>
<td data-title="Total">
<span class="">
{{Cart::session(auth()->id())->get($items->id)->getPriceSum()}}
</span>
</td>
@endforeach
每當有新產品添加到您的卡片中時,或者通過間隔計時器,您都可以調用 Javascript 的方法以獲取最新產品,而無需刷新頁面。

TA貢獻1793條經驗 獲得超6個贊
對 Laravel 沒有太多想法,但 javascript 中的這個解決方案會讓你知道如何繼續......
function getPriceSum() { YOUR_ARRAY.reduce((sum, item) => { return sum + (item.price * item.quantity), 0 }) }
- 3 回答
- 0 關注
- 173 瀏覽
添加回答
舉報