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. 如果想讓買家可以一目了然的知道目前這樣要花多少錢，我們可以加入總計。 ```
  <pre data-line="1-3,13-15,23">
  ```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)

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

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

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器