https://amos-do.github.io/Mr_Houdao_store/
完整電商前後台網站,後台能讓店家自行上架商品、查看訂單以及設定優惠券等功能,前台電商網站能讓消費者享受瀏覽網站,了解厚道先生對商品的用心,凸顯厚道先生的特色,並且完整的購物流程,能讓消費者買到健康又美味的果醬。
本專案選擇開發者非常喜歡的品牌與形象,自行接洽厚道先生進行合作,取得厚道先生之品牌授權,才能順利完成果醬電商。
此作品的功能有:
- 前台
- 首頁:介紹與導覽
- 購物商場:多項商品分類以及單一商品細節、商品列表、加入購物車
- 購物車:使用優惠券、調整商品(數量增減、刪除)、查看購物車商品項目,無產品時引導至購物商場
- 下單購買 / 訂單結帳
- 後台登入(登入頁) / 進入後台
- 後台
- 商品管理:商品的管理(新增/刪除/修改產品)
- 訂單管理:查看訂單狀況
- 優惠券管理:優惠券的管理(新增/刪除/修改優惠券)
- Vue.js
- VueCLI (3)
- Vuex 管理
- VueRouter
- VeeValidate 驗證
- 元件概念
- Webpack
- Ajax串接API、ES6
- Bootstrap 4 + 搭配手刻前台SCSS(後台使用 SB Admin 2)
- RWD(支援 iphone 5)
厚道先生圖像動畫,凸顯品牌特色
使用 Carousel 輪播 banner 展現厚道先生健康清晰特色
-
購物車頁面
- 可以增減數量,並且會同步金額
- 直接按刪除按鈕,會直接刪除該商品
- 優惠券輸入:houdao 或 code (已過期)
- 套用優惠券後,會顯示折購金額
- 圖片和資料來源皆來自於厚道先生
- 本作品內的圖片與內容,純粹為個人練習技術使用,不做任何商業用途。