16-3 調整商品數量

一、讓小計可以隨數量即時變化

1. 基本上，這個屬於前端工作而已，所以，我們只要修改\專案\resources\views\cart\index.blade.php即可。
2. 首先我們先將「數量」的部份改為表單，可以用number類型，如此瀏覽器會自動出線上下調整數字的按鈕，若是加上min="1"的屬性還可以設定其最小值為1。

   @if($cart->product->on_sale)
       <input type="number" min="1" class="form-control text-center amount" name="amount[{{ $cart->product_id }}]" value="{{ $cart->amount }}" data-cartid="{{ $cart->id }}">
   @else
       <div class="warning">该商品已下架</div>
   @endif

    

   • 我們在class加上amount，以便等一下可以拿來當挑選器用。

   • 我們還加上data-cartid，如此便能輕鬆抓取目前點到的這個數量，其購物車的品項編號為何（其實用商品編號亦可，只要其他部份統一就行）。

   • 另外，我們在此也順便判斷一下商品是否有被下架，若已經下架，則購物車就不顯示該商品數量。還有name的部份記得設成陣列，等會送出訂單時就會用到。

3. 價格的部份我們也用，<span>包起來，並給予一個特定的id，搭配購物車的品項編號，以便等會兒數量調整時，可以根據id來即時調整價格的內容。

   <span id="price-{{ $cart->id }}">
       {{ $cart->product->price }}
   </span>

    

4. 小計的部份也和價格一樣的處理方式，只是id命名不同而已，不過我們有用套用class="sum"，如此，要在JavaScript中跑迴圈，以取得最後的小計值，會簡單許多。

   <span class="sum" id="sum-{{ $cart->id }}">
       {{ $cart->product->price * $cart->amount }}
   </span>

    

5. JavaScript部份就是要來處理當「數量」的值改變時，也可以同時修改小計的值

   $('.amount').change(function () {
       var cartid = $(this).data('cartid');
       var sum = $(this).val() * $('#price-'+cartid).text();
       $('#sum-'+cartid).text(sum);
   });

    

   • 首先，當某個數量值改變時（第1行），我們就先去抓出其購物車的品項編號為何（第2行）

   • 接著，利用購物車的品項編號就可以抓出該品像的售價，將之乘以目前選購數量，就可以得到新的小計值（第3行）

   • 最後一樣利用購物車的品項編號，將新的小計值，塞入指定的小計位置中（第4行）。

6. 最後看起來像這樣：
   

二、加入總計

1. 如果想讓買家可以一目了然的知道目前這樣要花多少錢，我們可以加入總計。

   @section('content')
       @php
           $total = 0;
       @endphp
   
       <h1>我的購物車</h1>
       <table class="table table-striped">
           ...略...
           @forelse($user->carts as $cart)
               <tr>
                   ...略...
               </tr>
               @php
                   $total+=$cart->product->price * $cart->amount
               @endphp
           @empty
   
           ...略...
       @endforelse
           <tr>
               <th colspan=4 class="text-right">共計</th>
               <th nowrap class="text-right">
                   <span id="total">{{ $total }}</span>
               </th>
               <th>元</th>
           </tr>
       </table>
   @endsection

    

   • 首先，先利用@php及@endphp，在裡面定義$total的初始值（1~3行）。

   • 然後在迴圈裡面計算每一個品項的小計，並累加至$total中（13~15行）

   • 最後，在迴圈之外，在表格尾巴的第分加入顯示總計的值，並指定id="total"，以便修改其值（23行）

2. JavaScript部份也要修改，畢竟只要數量一調整，總計也得跟著改變才行：

   $('.amount').change(function () {
       ...略...
   
       var total = 0;
       $('.sum').each(function() {
           total += Number($(this).text());
       });
       $('#total').text(total);
   });

    

   • 道理和上面的流程差不多，只要數量一變動，就用JavaScript重跑一次，不過這次比較簡單，

   • 首先，先用JavaScript的方式定義total的初始值（4行）。

   • 然後利用迴圈讀出所有有套用class="sum"的小計欄位值，並累加至total中，Number()用來轉型至數字，這樣才能累加（5~7行）

   • 最後，在迴圈之外，在得到的結果，套入id="total"的元件中（8行）

3. 整個看起來像這樣：