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

Question

我正在开发一个购物车网站。在我的购物车页面上，商品的总价应根据该商品的数量进行更新。https://github.com/darryldecode/laravelshoppingcart我安装了这个购物车包。如何根据商品数量更新商品的总价？购物车控制器.php<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Product;use App\Category;use Darryldecode\Cart\Cart;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();    }}网络.phpRoute::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，我附近没有，所以下面的代码只是理论上的。

首先，您需要一个后端才能即时更新数量。这只是您的“正常”更新，但它将返回带有新 .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

  });

}

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 没有太多想法，但 javascript 中的这个解决方案会让你知道如何继续......

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