XOOPS輕鬆架 - 線上書籍

:::

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

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

1. 基本上，這個屬於前端工作而已，所以，我們只要修改`\專案\resources\views\cart\index.blade.php`即可。
2. 首先我們先將「數量」的部份改為表單，可以用`number`類型，如此瀏覽器會自動出線上下調整數字的按鈕，若是加上`min="1"`的屬性還可以設定其最小值為1。 
    ```markup
    @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`來即時調整價格的內容。 
    ```markup
    <span id="price-{{ $cart->id }}">
        {{ $cart->product->price }}
    </span>
    ```
4. 小計的部份也和價格一樣的處理方式，只是`id`命名不同而已，不過我們有用套用`class="sum"`，如此，要在JavaScript中跑迴圈，以取得最後的小計值，會簡單許多。 
    ```markup
    <span class="sum" id="sum-{{ $cart->id }}">
        {{ $cart->product->price * $cart->amount }}
    </span>
    ```
5. JavaScript部份就是要來處理當「數量」的值改變時，也可以同時修改小計的值 
    ```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. 最後看起來像這樣：  
     ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic112.png)
 
### 二、加入總計

1. 如果想讓買家可以一目了然的知道目前這樣要花多少錢，我們可以加入總計。 
    ```markup
    @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部份也要修改，畢竟只要數量一調整，總計也得跟著改變才行： 
    ```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. 整個看起來像這樣： ![](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/43/pic111.png)
 
### [![到GitHub觀看此單元程式異動](https://campus-xoops.tn.edu.tw/uploads/tad_book3/image/34/to_github.png)](https://github.com/tad0616/myshop/commit/880b97c5ec2de5f26dcd4778b928595563bd7351)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器