0%

[技能檢定]題組四 步驟21 製作前台購物車結帳及送出訂單功能

結帳櫃台功能

  1. 建立 ./front/checkout.php 檔案,並先把畫面需要的html碼建立出來,可以分別從 buycart.phpreg.php中複製程式碼過來修改
    收件人表單可從reg.php複製過來修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <h2 class="ct">填寫資料</h2>
    <?php $user=$User->find(['acc'=>$_SESSION['user']]);?>
    <table class="all">
    <tr>
    <td class="tt ct">帳號</td>
    <td class="pp">
    <?=$user['acc'];?>
    </td>
    </tr>
    <tr>
    <td class="tt ct">姓名</td>
    <td class="pp">
    <input type="text" name="name" id="name" value="<?=$user['name'];?>">
    </td>
    </tr>
    <tr>
    <td class="tt ct">電話</td>
    <td class="pp">
    <input type="text" name="tel" id="tel" value="<?=$user['tel'];?>">
    </td>
    </tr>
    <tr>
    <td class="tt ct">住址</td>
    <td class="pp">
    <input type="text" name="addr" id="addr" value="<?=$user['addr'];?>">
    </td>
    </tr>
    <tr>
    <td class="tt ct">電子信箱</td>
    <td class="pp">
    <input type="text" name="email" id="email" value="<?=$user['email'];?>">
    </td>
    </tr>
    </table>

    商品小計可以從buycart.php複製過來修改

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <table class="all">
    <tr class="tt ct">
    <td>商品名稱</td>
    <td>編號</td>
    <td>數量</td>
    <td>單價</td>
    <td>小計</td>
    </tr>
    <?php
    $sum=0; //宣告一個變數來計算總計
    foreach($_SESSION['cart'] as $id => $qt){
    $row=$Goods->find($id);
    ?>
    <tr class="pp ct">
    <td><?=$row['name'];?></td>
    <td><?=$row['no'];?></td>
    <td><?=$qt;?></td>
    <td><?=$row['price'];?></td>
    <td><?=$row['price']*$qt;?></td>

    </tr>
    <?php
    //迴圈每跑完一個商品就計算一次總計
    $sum += $row['price']*$qt;
    }
    ?>
    </table>
    <div class="all tt ct">總價:<?=$sum;?></div>
    <div class="ct">
    <input type="hidden" name="sum" id="sum" value="<?=$sum?>">
    <input type="button" value="確定送出" onclick="checkout()">
    <input type="button" value="返回修改訂單" onclick="location.href='?do=buycart'">
    </div>

  2. 在傳送訂單資料方面我們採用ajax的方式來傳送表單的內容,這樣在處理彈出視窗訊息時會比較單純一些。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function checkout(){
    let user={};
    user.name=$("#name").val();
    user.tel=$("#tel").val();
    user.addr=$("#addr").val();
    user.email=$("#email").val();
    user.total=$("#sum").val();

    $.post("./api/checkout.php",user,()=>{
    alert("訂購完成\n感謝您的選購")
    location.href='index.php';
    })
    }
  3. 建立 /api/checkout.php 來接收訂單資訊並寫入訂單資料表中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    include_once "db.php";

    //依據題意產生訂單編號,後六碼我們使用亂數來產生即可
    $_POST['no']=date("Ymd").rand(100000,999999);

    $_POST['acc']=$_SESSION['user'];

    $_POST['orderdate']=date("Y-m-d");

    //將購物實陣列轉為字串
    $_POST['cart']=serialize($_SESSION['cart']);

    $Order->save($_POST);
  4. 另外一個題目沒提到的細節是在送出訂單後的購物車及會員登入狀態要怎麼處理?如果檢定時只照題目的流程走一遍,那做到寫入訂單就可以了,但是當要操作第二筆訂單時,就會發生原有的購物車內容還有上一筆訂單的資料在的狀況,所以這邊建議如果時間上來得及,同時也已經做到這一步了,可以把一些細節補上,這樣在評分時會減少一些爭議。

  5. 我的做法是在ajax傳送表單資料後彈出感謝訊息的視窗,然後把使用者導回首頁去;而此同時,在後端的api除了收集ajax傳來的內容並寫入資料表外,也會同時清除購物車的session內容,這樣使用者就有一台空的購物車可以進行第二筆訂單。
    /api/checkout.php

    1
    2
    3
    //刪除購物車(檢定可不做)
    unset($_SESSION['cart']);

補充

…headers already sent by… 錯誤,這個問題是在 sessionheader() 相關的函式使用時會發生的問題,一般來說這些指令的前面不能有任何的輸出,如果發生了,可以使用函式來開啟緩衝解決;或是直接修改 php.ini 中的輸出緩衝設定也可以

1
2
3
output_buffering=4096
or
output_buffering=on