iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

初學者對於做購物車系統的分析系列 第 25

Day 25-製作購物車之設計購物車畫面

設計的部分就不多做分析,主要呈現實作成果。
因為太長了,所以分一點過來。/images/emoticon/emoticon25.gif

以下內容有參考教學影片,底下有附網址。
(內容包括我的不專業解說分析及在實作過程中遇到的困難與解決)

go go~/images/emoticon/emoticon08.gif


再進入CartScreen之前,先在建立component資料夾建立CartItem.js&CartItem.css檔,來設定購物車的東西
CartItem.js:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720U6c2dXjFIq.png
CartItem.css:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720tPtuerLtZV.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720hKvGx53zMM.png
第六行grid-template-columns後面
分別為image、ProductName、ProductPrice、select選項,最後一個為delete刪除。

換CartScreen的部分
CartScreen.js:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720s6cr8exfam.png
CartScreen.css:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720pn9tNPhVlD.png
https://ithelp.ithome.com.tw/upload/images/20210926/20139720nSZToHOIQ8.png

執行看看成果
CartScreen部分:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720uBGkXcm5iL.png

然後按鈕的部分顏色會變換,例如:
https://ithelp.ithome.com.tw/upload/images/20210926/20139720s9SHITVR7L.png


參考教學網站:https://www.youtube.com/watch?v=0divhP3pEsg&t=786s


  • 明天是Redux/images/emoticon/emoticon29.gif

上一篇
Day 24-製作購物車之設計主畫面
下一篇
Day 26-製作購物車之設定Redux: reducers&store
系列文
初學者對於做購物車系統的分析30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言