今天来做第二个实作：购物网站。这也是很容易遇到的专案类型，照原本的做法做一个购物网站都要花费大量的时间在处理页面与资料间的沟通，透过 Livewire 能让开发专案的速度快上好几倍，就算自己一个人做也可以很快就做好一个购物网站！！

今日目标：做好购物列表页面

这边我们参考 某知名24小时配送网站 的样式，不过购物网站基本上都大同小异！

ㄧ、商品项目元件

这边先把单一个商品项目出来做成一个 Livewire元件，之後透过 @foreach 可以大量带入要显示的资料。

先用指令建立一个商品项目的 Livewire 元件：

php artisan make:livewire Shopping/ItemList

而商品列表的项目主体大概就是产品图片、产品名称、价格 ，这边就用 TailwindCSS 稍微仿一下某购物网站，拉一个静态画面出来：

<div class="border-2 border-gray-100 rounded-lg shadow-lg px-5 pt-5 pb-2">
    <img class="object-cover h-36 w-full" src="{{ asset('/images/mbd.jpeg') }}"/>
    <p class="text-sm font-bold mt-2">ISM Codex S 10-238TW(i5-10400F/8G/1T+512G)</p>
    <p class="text-center">
        <span class="text-xs font-extrabold text-pink-500">▼每日强档‧疯杀特卖▼</span>
    </p>
    <p class="text-center">
        <span class="text-xs">网路价</span>
        <span class="text-red-600 font-extrabold">$9999</span>
    </p>
</div>

二、建立商品列表

这边也是先用指令建立一个 Livewire 拿来做外层网站的部分：

php artisan make:livewire Shopping/Index

之後用回圈刷个20次来看看如果有一堆商品的画面看起会是怎麽样：

注意：记得设置 :wire:key

<div class="mx-2 mt-2 grid lg:grid-cols-6 sm:grid-cols-4 gap-3">
    @for ($i = 0; $i <= 20; $i++)
        <livewire:shopping.list-item :wire:key="'list-itme' . $i"/>
    @endfor
</div>

三、建立商品资料

因为篇幅太长，所以独立成一篇 Day 22.5 | Livewire 实作 购物网站： 建立资料表

四、显示商品列表

有了商品资料後就可以从资料库拿资料出来啦！

我们直接在 Shopping/Index 的 render() 中拉所有的商品资料！

<?php

namespace App\Http\Livewire\Shopping;

use Livewire\Component;
use App\Models\Good;

class Index extends Component
{
    public function render()
    {
        return view('livewire.shopping.index', [
            'list' => Good::all(),
        ]);
    }
}

前端画面也要记得改，在这里我们会透过 :item="$item" 将值塞给子元件。

<div class="mx-2 mt-2 grid lg:grid-cols-6 sm:grid-cols-4 gap-3">
    @foreach($list as $item)
        <livewire:shopping.list-item :wire:key="'list-itme' . $item->id" :item="$item"/>
    @endforeach
</div>

五、修改子元件内容

由於刚刚从父元件的 :item="$item" 把回圈中每一笔商品的资料传到子元件中，这时候只要在子元件的 Livewire 档案中宣告同名的 public $item; 就能够接到外面传入的 item 资料：

<?php

namespace App\Http\Livewire\Shopping;

use Livewire\Component;

class ListItem extends Component
{
    public $item;
    
    public function render()
    {
        return view('livewire.shopping.list-item');
    }
}

之後把前端页面的静态资料清掉，塞入传进来的 $item 中的资料：

<div class="border-2 border-gray-100 rounded-lg shadow-lg px-5 pt-5 pb-2">
    <img class="object-cover h-36 w-full" src="{{ $item->image_url }}"/>
    <p class="text-sm font-bold mt-2">{{ $item->name }}</p>
    <p class="text-center">
        <span class="text-xs font-extrabold text-pink-500">{{ $item->slogan }}</span>
    </p>
    <p class="text-center">
        <span class="text-xs">网路价</span>
        <span class="text-red-600 font-extrabold">${{ $item->price }}</span>
    </p>
</div>

之後就完成啦！

DEMO页面

内容之图片、品名及价格皆取自网路，此为范例图片并无贩售/代理该产品