Как я могу получить конкретное значение из возвращенного ответа

Question

Я пытаюсь создать корзину с помощью Laravel. У меня возникла небольшая проблема с обновлением ввода количества товаров в корзине. Ajax отправляет значение и возвращает в массив. Но на этот раз проблема начинается.

Это мой cart клинок:

  @extends('user.addons.app')
  @push('customCss')
  <link rel="stylesheet" href=" 
     {{asset('/user/assets/css/numberinput.css')}}">
   @endpush
  @section('content')

  @include('user.modules.header')
  @include('user.modules.lsidebar')
 <div id="cart-page-wrapper" class="pt-86 pt-md-56 pt-sm-46 pb-50 pb-md-20 
  pb-sm-10">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div class="shopping-cart-list-area">

                     @include('user.modules.cart_data')
                    <div class="cart-coupon-update-area d-sm-flex justify- 
      content-between align-items-center">
                        <div class="coupon-form-wrap">
                            <form action="#" method="post">
                                <input type="text" placeholder="Coupon 
           Code"/>
                                <button class="btn-apply">Apply 
            Button</button>
                            </form>
                        </div>

                        <div class="cart-update-buttons mt-xs-14">
                            <button class="btn-clear-cart">Clear 
        Cart</button>
                            <button class="btn-update-cart">Update 
       Cart</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <!-- Cart Calculate Area -->
                @include('user.modules.cartcalculate')
            </div>
        </div>
    </div>
   </div>
  @include('user.modules.footer')
  @endsection
  @push('customJs')

  @endpush

Это мой cart_data клинок:

  <div class="shopping-cart-table table-responsive">
  <table class="table table-bordered text-center"  >
  <thead>
  <tr>
    <th>Products</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
 </tr>
 </thead>

 <tbody>
 @foreach($carts as $cart)
    <tr>
        <td class="product-list">
            <div class="cart-product-item d-flex align-items-center">
                <div class="remove-icon">
                    <button><i class="fa fa-trash-o"></i></button>
                </div>
                <a href="single-product-sticky.html" class="product- 
     thumb">
                    <img src="{{asset($cart['image'])}}" alt="Product"/>
                </a>
                <a href="single-product-tab-left.html" class="product- 
  name">{{$cart['title']}}</a>
            </div>
        </td>
        <td>
            <span class="price">$ {{$cart['price']}}</span>
        </td>
        <td>
            <input type="hidden" value="{{$cart['id']}}" 
   id="mon{{$cart['id']}}">
            <div class="quantity">
                <input type="number" min="1" max="9" step="1" value=" 
      {{$cart['quantity']}}" id="qty{{$cart['id']}}">

            </div>

        </td>
        <td>

            <span class="price" id="toss{{$cart['id']}}">
           {{$cart['price'] * $cart['quantity']}}
            </span>

        </td>
    </tr>
    @endforeach

    </tbody>
  </table>
 </div>

   <script src="{{asset('/assets/plugins/jquery/jquery.min.js')}}"> 
   </script>
   <script src="{{asset('/user/assets/js/numberinput.js')}}"></script>
  <script>
    @foreach($carts as $cart)
    $("#qty{{$cart['id']}}").change(function(e){
    e.preventDefault();
    var  value = $("#qty{{$cart['id']}}").val();
    var id = $("#mon{{$cart['id']}}").val();
    var inputQuantityElement = $("#x{{$cart['id']}}");
    $.ajax({
        type: 'post',
        url: '/cartupdate',
        data: {_token: '{{ csrf_token() }}',value:value, id:id},
        success : function(response) {
            $(inputQuantityElement).val(response);
        }

          });
     });
    @endforeach
    </script>

И это моя функция в контроллере:

public function cartupdate(Request $request)
{
    $cartss = Cart::find($request['id']);
    $quantity = $cartss->quantity;

    if($quantity < $request['value'])
    {
        $update = $cartss->quantity+1;
    }
    else if($quantity > $request['value'])
    {
        $update = $cartss->quantity-1;
    }
    else
    {
        die;
    }

    $cartss->update(['quantity' => $update]);
    $carts = Cart::where('user_id', Auth::user()->id)->get();

    foreach ($carts as $cart)
    {
        $id[] = $cart['id'];
        $pric[] = $cart['price'] * $cart['quantity'];
    }

    return $pric;
}

Я хочу динамически изменять цены, когда пользователь нажимает ввод количества

Answer 1

В вашей функции cartupdate(), return $pric не даст вам результат, потому что $pric объявлено внутри foreach(). Измените его на:

$pric = 0;
foreach ($carts as $cart) {
   $pric += $cart['price'] * $cart['quantity'];
}
return $pric;

даст вам общее количество. Но, думаю, вы пытаетесь получить новую цену за конкретную корзину. Если это так, измените вашу cartupdate() функцию на:

public function cardupdate(Request $request) {
   $cart = Cart::find($request['id']);
   $quantity = $cart->quantity;
   if($quantity < $request['value'])
   {
      $quantity++;
   }
   else if($quantity > $request['value']){
      $quantity--;
   }

   $cart->update(['quantity' => $quantity]);

   return $quantity*$cart->price;
}

Чтобы обновить цену в представлении, вы можете использовать

document.getElementById("toss{{$cart['id']}}").innerHTML = response;

Лично я предлагаю вам попробовать Vue.js для создания своего приложения. Laravel + Vue.js - хорошая комбинация. Намного проще создать сложное приложение, подобное этому.

Извините за мой плохой английский:)