:::

10-5 修改視圖以顯示商品列表

  1. 接著開啟/專案/resources/views/product/index.blade.php一般可以利用@foreach@endforeach寫法來產生迴圈,以便列出所有商品,不過此處,我們改用@forelse、@ematy、@endforelse來產生迴圈,並可在沒有資料的情況下,顯示相關資訊。

  2. 至於排版部份,我們使用BootStrap4的卡片疊(https://bootstrap.hexschool.com/docs/4.2/components/card/#card-decks)來呈現商品,其好處是頭尾可以等高,看起來較為整齊:

    @extends('layouts.app')
    @section('content')
        <h1>商品一覽</h1>
        <div class="card-deck">
        @forelse($products as $product)
            <div class="card mb-4">
                <img src="{{ $product->image_url }}" class="card-img-top" alt="{{ $product->title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ $product->title }}</h5>
                </div>
                <div class="card-footer text-center">
                    ${{ $product->price }}
                    <a href="#" class="btn btn-primary">加入購物車</a>
                </div>
            </div>
            @if($loop->iteration % 2 == 0)
                <div class="w-100 d-none d-sm-block d-md-none"><!-- wrap every 2 on sm--></div>
            @endif
            @if($loop->iteration % 3 == 0)
                <div class="w-100 d-none d-md-block d-lg-none"><!-- wrap every 3 on md--></div>
            @endif
            @if($loop->iteration % 4 == 0)
                <div class="w-100 d-none d-lg-block d-xl-none"><!-- wrap every 4 on lg--></div>
            @endif
            @if($loop->iteration % 5 == 0)
                <div class="w-100 d-none d-xl-block"><!-- wrap every 5 on xl--></div>
            @endif
        @empty
            <div class="card mb-4">
                <div class="card-body">
                    <h1 class="card-title">目前無任何商品</h1>
                </div>
            </div>
        @endforelse
        </div>
    @endsection
    
  3. 不過卡片疊的缺點是無法自適應,所以,我們在16~27行,根據出現的數量,讓程式根據目前螢幕大小自動加入類似換行語法(其實不是換行,只是看起來會有類似效果)。
  4. 以3個就換行的「w-100 d-none d-md-block d-lg-none」為例,當螢幕不大時(如平板),一列出現三個商品,所以,每三個商品就出現一次換行區塊。
  5. $loop->iteration是所謂的循環變數,用來取得現在跑到第幾圈,可以用的變數有:https://learnku.com/docs/laravel/5.8/blade/3902#the-loop-variable
  6. $loop->iteration % 5 == 0,其中%是求餘數,也就是說目前的圈數若可以被5整除(餘數=0),亦即每出現五組商品時,就加入類似換行的效果:
  7. 當螢幕比較小時,兩組就行

  8. 若是沒有資料,則顯示自訂資訊:

  9. 大功告成!請直接在網址輸入:  myshop.test/producthttp://myshop.test(注意,後面不可以有 / ,否則路由以後會誤判)

到GitHub觀看此單元程式異動


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1424

計數器

今天: 1447144714471447
昨天: 3438343834383438
總計: 7391776739177673917767391776739177673917767391776