XOOPS輕鬆架 - 線上書籍

:::

Laravel 5.8 入門講義 
=================

### 一、修改首頁列表模板

1. 因為我們在列表和商品詳情頁都有「加入購物車」的按鈕，所以，我們要在兩個頁面加入相同的ajax語法。但這樣顯然不好維護，因此，我們獨立做成一個檔，然後讓不同模板來引入即可。
2. 首先開啟`\專案\resources\views\product\index.blade.php` 
    ```markup
    @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` 
    ```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` 
    ```javascript
    $('.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，點下之後，就可以看到這樣的畫面：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic102.png)
6. 另外，若有按F12，也可以在 Console 中看到我們用來測試抓到的編號和數量是否正確。  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic103.png)
 
 
[![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/myshop/commit/c97a8f377a3dd1e2701b0f697d938ae59edae5e1)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1441

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器