:::

12-3 建立商品詳情頁的視圖

  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" 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
  2. 設計上主要是利用BootStrap4的Card來製作其頁面,詳情:https://bootstrap.hexschool.com/docs/4.2/components/card/#body
  3. 其中我們為了讓瀏覽器視窗的標題(或頁籤標題)可以直接顯示出商品名稱,所以,也用@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>
    
  4. 看起來效果像這樣:
  5. 最後,我們希望在商品列表就能點擊商品圖片、標題,就能觀看商品詳情頁面,所以,我們再修改一下\專案\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>

    如:

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

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

計數器

今天: 1519151915191519
昨天: 1416141614161416
總計: 7340166734016673401667340166734016673401667340166