[技能檢定]題組四 步驟18 製作前台商品陳列區

1. 先在類別中建立判斷分類及取得商品的方法
   /controller/Type.php

   include_once "DB.php";
   
   //因為會撈出商品，所以引入商品類別
   include_once "Goods.php";
   
   /**
    * 根據傳入的id來判斷這個類別是大分類還是中分類
    * 如果資料的big欄位是0就是大分類
    * 如果資料的big欄位>0就是中分類
    */
   function type($id){
       if($id!=0){
           $row=$this->find($id);
           $type=($row['big']==0)?'big':'mid';
       }else{
           $type="all";
       }
       return $type;
   }
   
   /**
    * 根據傳入的type id來產生畫面需要的導覽文字
    * 大分類則只有大分類的名字
    * 中分類則會產生 大分類 > 中分類的文字
    */
   function nav($id){
       $type=$this->type($id);
       $nav='';
       switch($type){
           case "all":
               $nav="全部商品";
           break;
           case "big":
               $row=$this->find($id);
               $nav=$row['name'];
           break;
           case "mid":
               $row=$this->find($id);
               $big=$this->find($row['big']);
               $nav=$big['name'] . " > ".$row['name'];
           break;
       }
       return $nav;
   }
   
   /**
    * 根據分類id來決定要撈出那些商品
    * all:全部設為上架的商品
    * big:指定大分類的商品
    * mid:指定中分類的商品
    */
   function items($id){
       $type=$this->type($id);
       switch($type){
           case "all":
               $rows=(new Goods)->all(['sh'=>1]);
           break;
           case "big":
               $rows=(new Goods)->all(['big'=>$id,'sh'=>1]);
           break;
           case "mid":
               $rows=(new Goods)->all(['mid'=>$id,'sh'=>1]);
           break;
       }
       return $rows;
   }

2. 建立 ./view/front/main.php 並撰寫導航文字及撈出商品內容的程式碼，注意商品簡介只需要顯示固定長度的一部份字串即可。

   <h2>
   <?php
   $type=$_GET['type']??0;
   echo $Type->nav($type);
   ?>
   </h2>

3. 依據網址的類別id可以取得要顯示的商品，並顯示在頁面上。

   <?php 
   $items=$Type->items($type);
   foreach ($items as $item) {
   ?>
   <div class="block">
       <div class="pp ct">
           <a href='?do=intro&id=<?=$item['id'];?>'>
               <img src="./upload/<?=$item['img'];?>" alt="">
           </a>
       </div>
       <div class="pp">
           <div class="info tt ct"><?=$item['name'];?></div>
           <div class="info pp">
               價錢:<?=$item['price'];?>
               <a href="?do=buycart&id=<?=$item['id'];?>&qt=1" style="float:right">
                   <img src="./icon/0402.jpg" alt="">
               </a>
           </div>
           <div class="info pp">
               規格:<?=$item['spec'];?>
           </div>
           <div class="info pp">
               簡介:<?=$item['intro'];?>
           </div>
       </div>
   </div>
   
   <?php
   }
   ?>

4. 加上一些CSS來稍微美化一下畫面

   <style>
   .block{
       width:80%;
       margin: 2px auto;
       min-width: 150px;;
       display: flex;
   }
   .block > div:nth-child(1){
       width:40%;
       display:flex;
       justify-content: center;
       align-items: center;
       padding:10px;
   }
   .block > div:nth-child(1) img{
       width:150px;
       height:120px;
   }
   .block > div:nth-child(2){
       width:60%;
   }
   .block .info{
       border:1px solid white;
   }
   .block .info:nth-child(1){
       border-top:none;
   
   }
   .block .info:nth-child(4){
       border-bottom:none;
   }
   </style>

   

5. 在 main.php 中要注意的是在使用者按下 我要購買 按鈕時，我們除了要把使用者導向購物車頁面外，也同時要把商品的id及數量一起帶過去。

   <a href="?do=buycart&id=<?=$item['id'];?>&qt=1" style="float:right">
       <img src="./icon/0402.jpg" alt="">
   </a>

6. 建立 ./view/front/intro.php 檔案，並且撰寫商品詳細內容的頁面。

   <?php 
   $row=$Goods->find($_GET['id']);
   ?>
   
   <h2 class="ct"><?=$row['name'];?></h2>
   <style>
   .item *{
       box-sizing: border-box;
   }
   .item{
       display: flex;
   }
   .item > div:nth-child(1){
       width:60%;
       padding:10px;
       height:350px;
       display:flex;
       justify-content: center;
       align-items: center;
   }
   .item img{
       width:100%;
       height:100%;
   }
   .item > div:nth-child(2){
       width:40%;
   }
   .info{
       display:flex;
       flex-wrap:wrap;
   }
   .info div{
       margin:1px 0;
       padding:2px;
       width:100%;
   }
   </style>
   <div class="item all">
       <div class="pp">
           <img src="./upload/<?=$row['img'];?>" alt="">
       </div>
       <div class="info">
           <div class="pp">分類:<?=$Type->nav($row['mid']);?></div>
           <div class="pp">編號:<?=$row['no'];?></div>
           <div class="pp">價格:<?=$row['price'];?></div>
           <div class="pp">詳細說明:<?=$row['intro'];?></div>
           <div class="pp">庫存量:<?=$row['stock'];?></div>
       </div>
   </div>
   <div class="ct tt all">
       購買數量:
       <input type="number" name="qt" id="qt" value="1" style="width:35px">
       <a href="javascript:buy(<?=$row['id'];?>)"><img src="./icon/0402.jpg" ></a>
   </div>

8. 在詳細內容頁面中，要注意的是我們採用 javascript 的方式來做商品資料的傳送，函式中把商品id傳出去，這在使用者按下我要購買後會觸發buy()函式，並取得使用者選購的數量，然後把商品 id及商品數量帶入 location 語法中，導向購物車頁面。

   function buy(id){
       let qt=$("#qt").val()
       location.href=`?do=buycart&id=${id}&qt=${qt}`
   
   }