购物网站能加入购物车後，就只剩结帐功能啦！！不过串接金流的方面与本主题较无关，所以这边只会做完结帐的页面，并可以删除不要购物车的项目。

今日目标：结帐页面

第一步照惯例就是先建立新的 Livewire 元件：

php artisan make:livewire Shopping/Payment

ㄧ、刻前端页面

一样参考别人的做法再用 TailwindCSS 想办法做出来！

画面的 HTML 的 Code 太长了，就放做好的 TailwindCSS Playground 的连结吧：

https://play.tailwindcss.com/RjhgO794Zh

二、建立 Route

进入商品细节已经在同一页了，这边就是来让结帐换一页吧！之後透过网址 shopping/payment 就可以到结帐页了：

Route::get('/shopping/payment', App\Http\Livewire\Shopping\Payment::class)->name('shopping-payment');

也可以帮路由命名，命名後在建立站内的超连结会方便很多。

注：要不要放在同一页没有一定，依照专案的需求来做就好。

三、点击购物车按钮转址到结帐页

我们的购物车按钮放在 Index.blade.php 中，由於目前 Livewire 还没有函式能从前端页面就直接换页，因此也要呼叫後端的函式来换页。

<button class="..." wire:click="gotoCart">
        <span>购物车</span>
          ...        
</button>

...

public function gotoCart()
{
    return redirect()->route('shopping-payment');
}

这样在点击画面上方的购物车按钮时就会跳到结帐页面罗！

四、显示购物车中的资料

在昨天我们把加进购物车的东西都放在 Session 中，要显示购物车内容的话就只要把他印出来就行了。那就要来对後端的部分动手啦！档案是刚刚建立的 shopping/payment.php。

我们要先宣告一个存购物车资料的变数，并在 mount() 时去拿 session 中的资料，这样前端页面就可以透过 $cart 来取得购物车的内容

class Payment extends Component
{
    public $cart;
    
    public function mount()
    {
        $this->cart = session()->get('cart') ?? [];
    }
    
    ...

前端的部分就可以用回圈印出所有的资料啦！因为我们有做项次所以直接印该阵列的 index 就可以了，由於是从零开始，所以这边要给他加一 {{ $key + 1 }}。

<tbody>
    @foreach($cart as $key => $item)
        <tr>
        <td class="p-2 text-center">
            <div class="bg-gray-100 w-6 text-sm">{{ $key + 1 }}</div>
        </td>
        <td class="p-2">{{ $item['name'] }}</td>
        <td class="p-2">${{ $item['price'] }}</td>
        <td class="p-2">
            <button class="text-sm text-gray-400" wire:click="deleteItem({{ $key }})">取消</button>
        </td>
        </tr>
    @endforeach
  </tbody>

五、计算总金额

有了资料後要能计算购物车内的总金额，所以我们建立一个函式专门来做加总：

public $cart_sum;

public function getCartSum()
{
    $sum = 0;
    foreach($this->cart as $item)
    {
        $sum += $item['price'];
    }
    $this->cart_sum = $sum;
}

记得加进去 mount() 让他在页面一开始就会先算一次：

public function mount()
{
    ...
    $this->getCartSum();
}

最後回到前端把总金额那边替换成 {{ $cart_sum }} 就可以显示总金额了！

六、移除不要的项目

买东西的时候很容易逛一逛看到更喜欢的东西，所以有些就不买了。为了达成这个需求我们就要让购物车能够删除不要的项目。

也是先建立一个函式来做删除使用，为了要知道要删掉哪一笔，因此在呼叫时必须让他带入 key 或称 index，这样才能准确的删除不要的项目。

注意：这边因为前面有显示项次，如果只用 unset 去删除阵列的内容会使项次错乱，例如删除了2、4 将会使项次显示为1、3、5、6，因此要再透过 array_values 去让阵列重新整理一次，显示才会变成 1、2、3、4

public function deleteItem($key)
{
	// 删除不要的那笔
	unset($this->cart[$key]);
	
	// 重新排列 Array 的 key
	$this->cart = array_values($this->cart);
	
	// 把整理好的塞回 session 中
	session()->put('cart', $this->cart);
	
	// 再呼叫一次计算总金额
	$this->getCartSum();
}

改动过後记得再呼叫计算金额的函式，这样在删掉不要项目的同时，总金额也能自动重算啦！！

如果要玩玩看可以至 DEMO页面

更多专案内容可以至 GitHub