:::
12-2 路由模型綁定
12-3 建立商品詳情頁的視圖
-
最後，只要製作好樣板，讓資料顯示出來即可，請建立
/專案/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" 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">加入購物車</button> </div> </div> {!! $product->description !!} </div> </div> </div> </div> @endsection - 設計上主要是利用BootStrap4的Card來製作其頁面，詳情：https://bootstrap.hexschool.com/docs/4.2/components/card/#body
- 圖片部份，利用
img-fluid使圖片可以自適應，而不會破版。 - 數量和加入購物車按鈕主要是利用表單群組來組成：https://bootstrap.hexschool.com/docs/4.2/components/input-group/#multiple-addons
- 最後的
{!! $product->description !!}就是不會將<會變成<的寫法，否則所見即所得編輯器產生的HTML標籤就不會有作用了。
- 圖片部份，利用
- 其中我們為了讓瀏覽器視窗的標題（或頁籤標題）可以直接顯示出商品名稱，所以，也用
@section('title', $product->title)多用了一個變數title，所以，被繼承的layouts.app（即\專案\resources\views\layouts\app.blade.php）也要設定一個title變數才會有作用：<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>@yield('title') {{ config('app.name', 'Laravel') }}</title> - 看起來效果像這樣：
- 最後，我們希望在商品列表就能點擊商品圖片、標題，就能觀看商品詳情頁面，所以，我們再修改一下
\專案\resources\views\product\index.blade.php，加入連結：<div class="card mb-4"> <a href="product/{{ $product->id }}"> <img src="{{ $product->image_url }}" class="card-img-top" alt="{{ $product->title }}"> </a> <div class="card-body"> <h5 class="card-title"> <a href="product/{{ $product->id }}">{{ $product->title }}</a> </h5> </div> <div class="card-footer text-center"> ${{ $product->price }} <a href="#" class="btn btn-primary">加入購物車</a> </div> </div>如：
