:::

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. 整個看起來像這樣:

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D43%26tbdsn%3D1449

計數器

今天: 1515151515151515
昨天: 1416141614161416
總計: 7340162734016273401627340162734016273401627340162