建立商品詳情頁的視圖

tad0616 · May 26, 2019 · e7b2e8f · e7b2e8f
1 parent 199e5a0
commit e7b2e8f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -7,7 +7,7 @@
     <!-- CSRF Token -->
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
-    <title>{{ config('app.name', 'Laravel') }}</title>
+    <title>@yield('title') {{ config('app.name', 'Laravel') }}</title>
 
     <!-- Scripts -->
     <script src="{{ asset('js/app.js') }}" defer></script>

diff --git a/resources/views/product/index.blade.php b/resources/views/product/index.blade.php
@@ -4,9 +4,13 @@
     <div class="card-deck">
     @forelse($products as $product)
         <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">{{ $product->title }}</h5>
+                <h5 class="card-title">
+                    <a href="product/{{ $product->id }}">{{ $product->title }}</a>
+                </h5>
             </div>
             <div class="card-footer text-center">
                 ${{ $product->price }}

diff --git a/resources/views/product/show.blade.php b/resources/views/product/show.blade.php
@@ -0,0 +1,30 @@
+@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