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

Question

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

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

购物车控制器.php

<?php

namespace 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();

    }

}

网络.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，我附近没有，所以下面的代码只是理论上的。首先，您需要一个后端才能即时更新数量。这只是您的“正常”更新，但它将返回带有新 .totalpublic function updateQuantity($rowId){&nbsp; &nbsp; \Cart::session(auth()->id())->update($rowId, [&nbsp; &nbsp; &nbsp; &nbsp; 'quantity' => [&nbsp; &nbsp; &nbsp; &nbsp; 'relative' => true,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 'value'=> request('quantity')&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; ]);&nbsp; &nbsp; $newTotal = Cart::session(auth()->id())->get($items->id)->getPriceSum();&nbsp; &nbsp; 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,&nbsp; 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>所以魔力在于功能：updateQuantityfunction updateQuantity(itemId) {&nbsp; // here I will use jQuery just to show the idea&nbsp; const route = $('#updateQuantityRoute' + itemId);&nbsp; const newQuantity = $('#quantity' + itemId).val();&nbsp; $.post(route, {'quantity': newQuantity}).done(function( data ) {&nbsp; &nbsp; // here we have response&nbsp; &nbsp; if (typeof data === 'string') data = JSON.parse(data);&nbsp; &nbsp; const updatedTotal = data.total;&nbsp; &nbsp; $('#total' + itemId).innerText = updatedTotal; // update in DOM&nbsp; });}

Answer 2

您必须更改一些代码：1-添加新的路线和方法来检索所有卡项目Route::get('/cart/items', 'CartController@allItems')->name('cart.all-items')->middleware('auth');方法：public function allItems()&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; return \Cart::session(auth()->id())->getContent();&nbsp; &nbsp; }2-接下来，您需要将此代码块移动并更改为Javascript，并通过Ajax从上述路由中检索数据。&nbsp;@foreach(\Cart::session(auth()->id())->getContent() as $items)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="{{ route('cart.destroy', $items->id)}}">x</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="text-gray-90">{{ $items ['name'] }}</a&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Price">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="">LKR {{ $items ['price'] }}.00</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Quantity">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sr-only">Quantity</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Quantity -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="border rounded-pill py-1 width-122 w-xl-80 px-3 border-color-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="js-quantity row align-items-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="js-result form-control h-auto border-0 rounded p-0 shadow-none" name="quantity" type="text" value="{{$items->quantity}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-auto pr-1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="js-minus btn btn-icon btn-xs btn-outline-secondary rounded-circle border-0" href="javascript:;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <small class="fas fa-minus btn-icon__inner"></small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="js-plus btn btn-icon btn-xs btn-outline-secondary rounded-circle border-0" href="javascript:;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <small class="fas fa-plus btn-icon__inner"></small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- End Quantity -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Total">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{Cart::session(auth()->id())->get($items->id)->getPriceSum()}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @endforeach每当有新产品添加到您的卡片中时，或者通过间隔计时器，您都可以调用 Javascript 的方法以获取最新产品，而无需刷新页面。

Answer 3

对 Laravel 没有太多想法，但 javascript 中的这个解决方案会让你知道如何继续......function&nbsp;getPriceSum()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;YOUR_ARRAY.reduce((sum,&nbsp;item)&nbsp;=>&nbsp;{&nbsp;return&nbsp;sum&nbsp;+&nbsp;(item.price&nbsp;*&nbsp;item.quantity),&nbsp;0&nbsp;}) }