:::

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,以便讓控制器將使用者所選的商品編號、數量存入購物車的資料表。
  4. 第 10 行的 @guest及 14 行的@auth,是Laravel 5.5以後新增的條件指令,前者可以判斷是否未登入,後者則判斷是否已經登入。
  5. 第 8、11、15行的 swal() 就是我們之前安裝的 SweetAlert,點下之後,就可以看到這樣的畫面:
  6. 另外,若有按F12,也可以在 Console 中看到我們用來測試抓到的編號和數量是否正確。

 

到GitHub觀看此單元程式異動  


 


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 1457145714571457
昨天: 1416141614161416
總計: 7340104734010473401047340104734010473401047340104