iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
1
Microsoft Azure

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

Day 23- 鬼斧神工 :Serverless 電商 - 實戰 - 前端開發 (二)商品頁面

商品資訊

https://ithelp.ithome.com.tw/upload/images/20201008/20130168FJfOJjnWbB.png
https://ithelp.ithome.com.tw/upload/images/20201008/20130168pwwHjBbGPL.png
我們直接從手機版面開始,通常最上面的都會是商品以最少資訊達到最大效果的版面。我們參考了Woocommerce 的做法,

商品敘述

https://ithelp.ithome.com.tw/upload/images/20201008/201301688jkmh5Ssai.png

在手機的產品敘述上,將Product的Description 放到上面讓消費者可以快速確認後決定是否結帳。

購物車及結帳頁

https://ithelp.ithome.com.tw/upload/images/20201008/20130168m4hy2NTgeq.png

在這邊需要提供消費者一個可供更改數量及移除的地方。
https://ithelp.ithome.com.tw/upload/images/20201008/20130168pKi4hQeo7o.png
而下面提供了各項地址資訊輸入的欄位。
https://ithelp.ithome.com.tw/upload/images/20201008/20130168ar9vDH5Db7.png
直接在後面放上金流跳轉準備成立訂單。

金流

https://ithelp.ithome.com.tw/upload/images/20201008/20130168JmPI6SkWMH.png
https://ithelp.ithome.com.tw/upload/images/20201008/20130168SXPy9b9b3G.png
最後交由金流處理完付款之後跳轉完成訂單!

本日小結

今天趕著做完前端頁面後,並在後幾天完成後端串接,接下來就會帶大家走一次實際搶單流程,並邀請商家來幫我們做測試!


上一篇
Day 22- 鬼斧神工 :Serverless 電商 - 實戰 - 前端開發 (一)頁面規劃
下一篇
Day 24- 鬼斧神工 :Serverless 電商 - 實戰 - 前端開發 (三)訂單頁面
系列文
Azure Serverless 平步青雲,漫步雲端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言