如何根据商品的数量更新商品的总价

Question

我正在开发一个购物车网站。在我的购物车页面上，一个商品的总价应该根据该商品的数量进行更新https://github.com/darryldecode/laravelshoppingcart我安装了这个购物车包。

如何根据商品的数量更新商品的总价？

CartController.php

<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppProduct;
use AppCategory;
use DarryldecodeCartCart;
class CartController extends Controller
{

public function index()
{
// $cartItems = Cart::session(auth()->id())->getContent();

return view ('cart');
}

public function show($id)
{
$product = Product::find($id);

return view('cart')->with(compact('product'));
}

public function update($rowId)
{
Cart::session(auth()->id())->update($rowId, [
'quantity' => [
'relative' => true, 
'value'=> request('quantity')
]
]);
return back();

}

public function destroy($itemId)
{
Cart::session(auth()->id())->remove($itemId);

return back();

}
public function addtocart(Product $product)
{

Cart::session(auth()->id())->add(array(
'id' => $product->id,
'name' => $product->prod_name,
'price' => $product->prod_price,
'quantity' => 1,
'attributes' => array(),
'associatedModel' => $product
));

return redirect()->back();
}
}

cart.blade.php

@foreach(Cart::session(auth()->id())->getContent() as $items)
<tr>
<form class="mb-4" action="{{route('cart.update',$items->id)}}">    

<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>
<!-- <form class="mb-4" action="{{route('cart.update',$items->id)}}"> -->
<br>
<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>
<!-- </form> -->
</td>


<!-- 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="number" value="{{$items->quantity}}">
<button type="submit" class="btn btn-soft-secondary mb-3 mb-md-0 font-weight-normal px-5 px-md-4 px-lg-5 w-100 w-md-auto">Update cart</button>
</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="">
LKR  {{Cart::session(auth()->id())->get($items->id)->getPriceSum()}}.00
</span>
</td>

<td>
<button type="submit" class="btn btn-soft-secondary mb-3 mb-md-0 font-weight-normal px-5 px-md-4 px-lg-5 w-100 w-md-auto"><i class="fas fa-pen-nib text-primary fa-2x"></i></button>
<a href="{{ route('cart.destroy', $items->id)}}" class="btn btn-soft-secondary mb-3 mb-md-0 font-weight-normal px-5 px-md-4 px-lg-5 w-100 w-md-auto"><i class="fas fa-trash-alt text-danger fa-2x"></i></a>
</td>

<!-- <td>
<div class="d-md-flex">
<form class="mb-4" action="{{route('cart.update',$items->id)}}">
<button type="submit" class="btn btn-soft-secondary mb-3 mb-md-0 font-weight-normal px-5 px-md-4 px-lg-5 w-100 w-md-auto">Update cart</button>
<a href="../shop/checkout.html" class="btn btn-primary-dark-w ml-md-2 px-5 px-md-4 px-lg-5 w-100 w-md-auto d-none d-md-inline-block">Proceed to checkout</a>
</form>
</div>
</td> -->
</form>
</tr>
@endforeach

web.php

Route::get('/cart', 'CartController@index')->name('cart.index')->middleware('auth');;
Route::get('/cart/{cartItems}', 'CartController@add')->name('cart.add')->middleware('auth');
Route::get('/cart/destroy/{itemId}', 'CartController@destroy')->name('cart.destroy')->middleware('auth');
Route::get('/cart/update/{itemId}', 'CartController@update')->name('cart.update')->middleware('auth');
Route::get('/add-to-cart/{product}','CartController@addtocart')->name('addToCart');

Answer 1

关于Laravel的概念不多，但javascript中的这个解决方案将让您了解如何进行。。。

function getPriceSum() {
YOUR_ARRAY.reduce((sum, item) => { return sum + (item.price * item.quantity), 0 })
}

Answer 2

您必须更改一些代码：

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的方法来获取最新产品，而无需刷新页面。

Answer 3

我开始忘记Laravel了，而且我身边没有，所以下面的代码只是理论性的。

首先，您需要一个后端，以便能够实时更新数量。这只是你的"；正常的"；更新，但它将返回带有新total的JSON。

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');

现在，我们需要准备前端，以便能够动态更新quantity和total。

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