15-3 實現加入購物車按鈕

一、修改首頁列表模板

1. 因為我們在列表和商品詳情頁都有「加入購物車」的按鈕，所以，我們要在兩個頁面加入相同的ajax語法。但這樣顯然不好維護，因此，我們獨立做成一個檔，然後讓不同模板來引入即可。
2. 首先開啟\專案\resources\views\product\index.blade.php

   @extends('layouts.app')
   @section('content')
       <h1>商品一覽</h1>
       <div class="card-deck">
       @forelse($products as $product)
           <div class="card mb-4">
               ...略...
               <div class="card-footer text-center">
                   ${{ $product->price }}
                   <button class="btn btn-primary btn-add-to-cart" data-id="{{ $product->id }}">加入購物車</button>
               </div>
           </div>
           ...略...
       @empty
           ...略...
       @endforelse
       </div>
       <input type="hidden" name="amount" value="1">
   @endsection
   
   
   @section('scriptsAfterJs')
       <script>
           $(document).ready(function () {
               @include('product.add2cart')
           });
       </script>
   @endsection
   

    

3. 在第 10 行的地方，我們修改按鈕為button，並在裡面藏一個data-id="{{ $product->id }}資訊，放入商品編號，這樣等一下我們就可以利用 jquery 的data()來抓取商品變號，也就是說，當我們按這顆按鈕，系統就能知道要加入購物車的商品編號是幾號。

4. 在第 18 行的地方，我們加入一個隱藏的數量欄位，其值為1。如此才能送出數量的值。

5. 最後我們在最下方加入scriptsAfterJs的內容，簡單做出jquery的基礎呼叫動作。然後在其內容的地方。引入暫時還不存在的product\add2cart.blade.php

二、修改商品詳情頁模板

1. 接著開啟\專案\resources\views\product\show.blade.php

   @extends('layouts.app') 
   @section('title', $product->title) 
   @section('content')
       <div class="card">
           <div class="card-body product-info">
               <div class="row">
                   <div class="col-sm-5">
                       <img class="img-fluid" src="{{ $product->image_url }}" alt="{{ $product->title }}">
                   </div>
                   <div class="col-sm-7">
                       <div class="h2">{{ $product->title }}</div>
                       <div class="h3">特價 {{ $product->price }}元</div>
                       <div class="input-group mb-3">
                           <div class="input-group-prepend">
                               <span class="input-group-text">數量</span>
                           </div>
                           <input type="text" class="form-control input-sm" name="amount" value="1">
                           <div class="input-group-append">
                               <span class="input-group-text">件</span>
                           </div>
                           <div class="input-group-append">
                               <button class="btn btn-primary btn-add-to-cart" data-id="{{ $product->id }}">加入購物車</button>
                           </div>
                       </div>                        
                       {!! $product->description !!}
                   </div>
               </div>
           </div>
       </div>
   @endsection
   
   @section('scriptsAfterJs')
       <script>
           $(document).ready(function () {
               @include('product.add2cart')
           });
       </script>
   @endsection
   

    

2. 在第 17 行的地方，我們將數量欄位，加上name="amount"，和列表頁一致即可。

3. 在第 22 行的地方，我們把列表頁的加入購物車按鈕直接複製過來用即可。

4. 最後我們一樣在最下方加入scriptsAfterJs的內容，簡單做出jquery的基礎呼叫動作。然後在其內容的地方。引入暫時還不存在的product\add2cart.blade.php

三、建立共用的加入購物車語法

1. 接著建立新的視圖\專案\resources\views\product\add2cart.blade.php

   $('.btn-add-to-cart').click(function () {
       console.log($(this).data('id') + ' = ' + $('input[name=amount]').val());
       axios.post('{{ route('cart.store') }}', {
           product_id: $(this).data('id'),
           amount: $('input[name=amount]').val(),
       })
       .then(function () { // 請求成功時執行：
           swal('加入購物車成功', '', 'success');
       }, function (error) { // 請求失敗時執行：
           @guest
               swal('請先登入', '', 'error');
           @endguest
           
           @auth
               swal('系統錯誤', '', 'error');
           @endauth
       })
   });
   

    

2. 第 2 行的地方，只是用來做檢查用的，可以利用瀏覽器的F12，來觀察我們抓到的值是否正確。
3. 第 3 行我們利用axios的post方法，將兩個變數送到路由 cart.store，以便讓控制器將使用者所選的商品編號、數量存入購物車的資料表。
   • Laravel 裝好時，就有安裝axios套件了！axios 是一個基於Promise用於瀏覽器和 nodejs 的 HTTP 客戶端，簡單講，用axios 就可以用簡單的語法來進行 ajax 。
   • axios 官網：https://github.com/axios/axios
   • axios 中文文件：https://www.kancloud.cn/yunye/axios/234845
4. 第 10 行的 @guest及 14 行的@auth，是Laravel 5.5以後新增的條件指令，前者可以判斷是否未登入，後者則判斷是否已經登入。
5. 第 8、11、15行的 swal() 就是我們之前安裝的 SweetAlert，點下之後，就可以看到這樣的畫面：
   
6. 另外，若有按F12，也可以在 Console 中看到我們用來測試抓到的編號和數量是否正確。