Laravel 9+Livewire下如何将商品颜色信息传递至结算页

我正在使用Laravel 9与Livewire开发项目，已实现从数据库读取商品颜色并在商品详情页展示，但不清楚如何将用户选中的商品颜色随商品加入购物车后传递至结算页，用于订单确认。以下是我的相关代码：

product-details.blade.php #

<h2>{{ $product->name }}</h2>
<div class="price-box pt-20">
    <span class="new-price new-price-2">&#8358;
        <span class="text-danger">
            {{ number_format((float) $product->price, 2) }}
        </span>
    </span>
</div>
<div class="">
    <span class="new-price">
        <p>
            <span class="float-left">
                <label for="color"> 选择颜色: </label>
            </span>
            <select class="nice-select" name="color">
                @foreach ($colors as $color)
                    <option value="{{ $color }}">{{ $color }}</option>
                @endforeach
            </select>
        </p>
    </span>
    <br>
</div>
<br>
<div style="margin-bottom: 50px;"></div>
<div class="product-desc">
    <p>
        <span>{!! $product->description !!}</span>
    </p>
</div>

checkout.blade.php #

@if ($cart_count>0)
<div class="col-lg-6 col-12">
    <div class="your-order">
        <h3>您的订单详情</h3>
        <div class="your-order-table table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th class="cart-product-name">商品</th>
                        <th class="cart-product-total">总价</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach(\Gloudemans\Shoppingcart\Facades\Cart::content() as $product)
                    <tr class="cart_item">
                        <td class="cart-product-name">
                            {{ $product->name }} | {{ $product->colour }}
                            <strong class="product-quantity"> × {{$product->qty}}</strong>
                        </td>
                        <td class="cart-product-total">
                            <span class="amount">&#8358;{{$product->price}}</span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="cart-subtotal">
                        <th>购物车小计</th>
                        <td>
                            <span class="amount">&#8358; {{ $subtotal }}</span>
                        </td>
                    </tr>
                    <tr class="cart-subtotal">
                        <th>购物车税费</th>
                        <td>
                            <span class="amount">&#8358; {{ $tax }}</span>
                        </td>
                    </tr>
                    <tr class="order-total">
                        <th>订单总计</th>
                        <td>
                            <strong>
                                <span class="amount">&#8358; {{ $total }}</span>
                            </strong>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

ProductDetails.php（Livewire组件） #

class ProductDetails extends Component
{
    use WithPagination;

    protected $paginationTheme = 'bootstrap';
    public $productid, $category, $colors, $sizes;
    public $product, $quantity, $productquantity;

    public function render()
    {
        return view('livewire.product-details', [
            'productfromcats'=> Product::where('category', '=', $this->category)
                ->orderByRaw('created_at DESC')
                ->paginate(8, ['*'], 'catsPage'),
        ]);
    }

    public function mount($product_id)
    {
        $this->product = Product::where('product_id', '=', $product_id)->get()->first();
        $this->colors = $this->product->colour;
        $this->sizes = $this->product->size;
        $search = Cart::search(function ($cartItem, $rowId) use ($product_id) {
            return $cartItem->id === $product_id;
        });
        if ($search->count() > 0) {
            $cartproduct = $search->first();
            $this->productquantity = $cartproduct->qty;
        } else {
            $this->productquantity = 0;
        }
    }

    public function addItemToCart($item, $qty)
    { 
        $cartItem = Cart::add(
            [
                'id' => $item['id'],
                'name' => $item['name'],
                'qty' => $qty,
                'price' => $item['price'],
                'weight' => 0,
                'options' => [
                    'size' => $item['size'],
                    'colour' => $item['colour'],
                    'images' => $item['images']
                ]
            ]
        );
        $cartItem->associate('\App\Models\Product');
        $this->productquantity = Cart::get($cartItem->rowId)->qty;
        if (Cart::get($cartItem->rowId)->qty == 0) {
            Cart::remove($cartItem->rowId);
        }
        $this->emit('cart_updated');
    }
}

解决方案 #

1. 在Livewire组件中添加颜色绑定属性 #

在ProductDetails.php中新增公共属性，用于存储用户选中的颜色：

public $selectedColour;

2. 修改详情页选择框，绑定Livewire属性 #

更新product-details.blade.php中的select标签，通过wire:model将选中值同步到组件的$selectedColour：

<select class="nice-select" name="color" wire:model="selectedColour">
    @foreach ($colors as $color)
        <option value="{{ $color }}">{{ $color }}</option>
    @endforeach
</select>

3. 调整加入购物车方法，传入选中颜色 #

修改addItemToCart方法，直接使用组件中绑定的$selectedColour替换原有的$item['colour']，确保选中的颜色被传入购物车：

public function addItemToCart($qty)
{ 
    $cartItem = Cart::add(
        [
            'id' => $this->product->product_id,
            'name' => $this->product->name,
            'qty' => $qty,
            'price' => $this->product->price,
            'weight' => 0,
            'options' => [
                'size' => $this->sizes,
                'colour' => $this->selectedColour,
                'images' => $this->product->images
            ]
        ]
    );
    $cartItem->associate('\App\Models\Product');
    $this->productquantity = Cart::get($cartItem->rowId)->qty;
    if (Cart::get($cartItem->rowId)->qty == 0) {
        Cart::remove($cartItem->rowId);
    }
    $this->emit('cart_updated');
}

提示：如果有尺寸选择需求，可参照颜色的处理方式，新增尺寸绑定属性并同步传入购物车options。

4. 结算页正确读取颜色值 #

Gloudemans购物车中，自定义属性存储在options数组里，因此需要修改checkout.blade.php中的颜色读取代码：

{{ $product->name }} | {{ $product->options->colour }}

或使用数组方式访问：

{{ $product->name }} | {{ $product->options['colour'] }}

完成以上修改后，用户选中的颜色即可随商品加入购物车，并在结算页正常显示。

内容的提问来源于stack exchange，提问作者Chizo