iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
1
Microsoft Azure

Azure Serverless 平步青雲,漫步雲端系列 第 24

Day 24- 鬼斧神工 :Serverless 電商 - 實戰 - 前端開發 (三)訂單頁面

  • 分享至 

  • xImage
  •  

訂單檢索

https://ithelp.ithome.com.tw/upload/images/20201009/20130168jZY9G14isC.png
https://ithelp.ithome.com.tw/upload/images/20201009/20130168bHu9WaVckJ.png
圖片來源:Apple

首先我們看到蘋果的做法,在訂單檢索的部分需要:

  1. 訂單號碼
  2. 訂購的E-mail

從一開始的設計便可以知道我們為了求快速快閃,就讓消費者免除了登入的困擾來做到快速下單的動作,因此我們需要從最簡單的兩個不易取得的資訊去取得訂單的資訊,而訂單號碼會隨著消費者下單的時候便一起寄到消費者信箱。

訂單狀態

https://ithelp.ithome.com.tw/upload/images/20201009/20130168en2RXrLHeM.png
圖片來源:Woocommerce

當進去訂單之後我們可以參考類似Woocommerce的做法來訂定訂單狀態,在前幾篇便已經訂下規則為

付款成功即訂單成立

因此在付款失敗的部分我們就不考慮,而可以訂下訂單會有:

  1. 訂單處理中。
  2. 出貨:檢索號碼。
  3. 訂單完成。
  4. 已申請退貨。
  5. 申請退貨處理中。
  6. 已完成退貨。

這些狀態,我們盡量保持訂單狀態乾淨整潔,為了避免太多個資造成影響,我們訂單詳細資訊會在使用者需要的時候按下送出訂單資訊的按鈕來寄送一封含詳細訂單內容的信件到消費者信箱來處理。畫面上就只會有狀態及申請退貨跟查看詳細資訊兩種按鈕。

本日小結

就在這次國慶連假筆者開工要完成這個產品,鐵人賽寫了兩個APP對筆者來說非常的硬,很多資料還要回頭修改完工畫面,常常設計到一半想到還缺必要的條件再補。明天帶大家進入後端架構構思的部分。


上一篇
Day 23- 鬼斧神工 :Serverless 電商 - 實戰 - 前端開發 (二)商品頁面
下一篇
Day 25- 鬼斧神工 :Serverless 電商 - 實戰 - 後端開發 (一)架構邏輯
系列文
Azure Serverless 平步青雲,漫步雲端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言