JD Store 魔改大賽作品介紹:J&A SELECT(5/27 更新)

大家好,J&A SELECT 是由 Jimmy 王品睿與 Anndo 柯禹安 兩人遠端協作的選物網站,提供「日常文具」、「生活器具」、「個人單品」三大類型的高質量單品,為你呈現美好的生活品味。


這篇文章涵蓋詳細的作品細節:

  • 頁面 / 功能介紹
  • 版本紀錄
  • J & A 魔改秘笈
  • Models
  • Gems


如果你喜歡我們的作品:J&A SELECT,或覺得我們的文章對你有幫助,歡迎前往我們的參賽頁面投下你寶貴的一票!你的支持,會是我們持續分享的動力。



頁面 / 功能介紹

首頁

以 Landing Page 的概念製作首頁,首頁提供了主要幾項資訊:「品牌故事」、「商品主要類型」、「精選商品」、「嚴選品牌」。

  • 首頁廣告圖片自動輪播。

  • 用戶可切換、瀏覽多張首頁廣告圖片。

  • 用戶可點擊「商品主要類型」,前往商品列表瀏覽該類型的所有商品。

  • 用戶可點擊「精選商品」,前往特定商品的資訊頁面。


商品列表

商品列表,依照商品建立時間顯示上架商品。商品列表有幾個主要功能:「篩選」、「排序」、「所在頁面路徑顯示」

  • 用戶透過選單,選擇「分類篩選」或「品牌篩選」,顯示符合條件的商品。
  • 顯示「所在頁面路徑:J&A SELECT / 類型 / 分類 / 商品名稱」,用戶可透過路徑跳轉至特定的篩選頁面。例如:「J & A SELECT / 個人單品 / 皮件 / Il Bussetto 拉鍊式 皮革皮夾」,點擊「皮件」,即可跳轉至該分類篩選的頁面。


商品資訊

除了商品的幾項主要資訊(名稱、價錢、敘述、品牌、庫存),商品資訊頁可進行以下操作:「切換幣值」、「加入 / 取消收藏」、「加入購物車」。

  • 用戶可透過「切換幣值」選單,將商品金額(新台幣 NT$)轉換為特定幣別(人民幣 / 新台幣 / 歐元 / 美金 / 日圓)及匯率換算後的價格。
  • 用戶可選擇商品數量,直接加入購物車。商品數量不得大於庫存。
  • 「切換幣值」、「數量」等更動,不會刷新頁面。
  • 用戶可點擊「加入收藏」,將商品納入「願望清單」。
  • 用戶可點擊「加入購物車」,將商品放入「購物車」。

願望清單

顯示用戶收藏的所有商品,用戶可對願望清單上的商品進行操作。

  • 用戶可透過「移動至購物車」,將商品從願望清單移至購物車。
  • 用戶可將商品從願望清單中移除。

  • 用戶的願望清單沒有內容時,會顯示 3 樣「推薦商品」。

購物車

顯示用戶加入購物車的所有商品,用戶可對購物車內的商品進行操作。

  • 用戶可清空購物車。
  • 用戶可將商品從購物車中移除。
  • 用戶如果有切換幣值,購物車會以該幣值計價。
  • 用戶可在購物車頁面調整商品數量。商品數量不得大於庫存。

  • 用戶的購物車沒有內容時,會顯示 3 樣「推薦商品」。

訂單生成

用戶如果有在「我的帳戶」設定:「姓名」、「電話」、「住址」等資料,訂單資訊表格會自動填入用戶的資料。

我的帳戶

用戶可對「用戶名稱」、「性別」、「生日」、「電話」以及「住址」進行修改。

我的訂單

用戶可以瀏覽過去下訂的訂單。

  • 訂單明細顯示商品圖片。
  • 用戶可點擊商品標題,連結至商品資訊頁。如果該商品已下架,則顯示下架資訊。



J&A 魔改秘笈

協作


前端效果 / 後端功能實現




版本紀錄

2017-05-25 — J&A SELECT v1.1.5

  • Footer 樣式改版。
  • 新增「推薦商品」功能,用戶的願望清單、購物車,在空空如也的情況下,會看到推薦商品。
  • 優化商品資訊頁 URL,顯示 ID 及商品名稱。


2017-05-25 — J&A SELECT v1.1

  • 「我的訂單」中,訂單顯示商品圖片,並可連結至商品資訊頁。(如果該商品已下架,則顯示下架狀態。)
  • 購物流程體驗優化:

    • 用戶在商品資訊頁,可決定購買數量(不能超過現有庫存),直接加至購物車。
    • 「切換幣值」、「數量」等更動,不會刷新頁面。
    • 購物車中的商品,可調整商品數量(不能超過現有庫存)。
    • 儲存用戶選擇的「幣值」,購物車、訂單均以該幣值計價。
    • 訂單欄位自動填入用戶資料(用戶於「我的帳戶」中的設定)。


2017-05-21 — J&A SELECT v1.0

一般用戶 + 管理員

  • 瀏覽首頁
  • 註冊帳號 / 帳號登入 / 修改用戶資訊
  • 搜索功能
  • 篩選功能
  • 購物功能(加入購物車、結帳、生成訂單)
  • 加入願望清單功能
  • 客服功能
  • 簡體中文 / 繁體中文切換功能

管理員

  • 後台專區進入權限
    • 商品管理
    • 品牌管理
    • 類型 / 分類管理
    • 訂單管理
    • 首頁廣告管理




Models

  • User 用戶

    • name 用戶姓名
    • nickname 暱稱
    • address 地址
    • phone 手機
    • birthday 生日
    • gender 性別
    • is_admin 管理員權限
  • Products 商品

    • name 商品名稱
    • description 商品敘述
    • price 商品售價
    • quantity 庫存數量
    • category_id 商品所屬的分類ID
    • brand_id 商品所屬品牌ID
    • is_hidden 商品隱藏狀態
  • Product_image 商品圖片

    • product_id 圖片所屬的商品ID
    • image 圖片
    • main_image 商品首圖有無
  • Brands 品牌

    • name 品牌名稱
    • description 品牌敘述
    • logo 品牌標誌
    • is_hidden 品牌隱藏狀態
  • Category_group 主要類型

    • name 類型名稱
    • description 類型敘述
    • logo 類型封面圖
    • is_hidden 類型隱藏狀態
  • Categories 分類

    • name 分類名稱
    • description 分類敘述
    • logo 分類封面圖
    • category_group_id 分類所屬的類型ID
    • is_hidden 分類隱藏狀態
  • Cart 購物車

  • Cart_item 購物車品項

    • cart_id 品項所屬的購物車ID
    • product_id 品項的商品ID
    • quantity 商品數量
  • Order 訂單

    • user_id 訂單所屬的用戶ID
    • billing_name 聯絡人姓名
    • billing_address 聯絡人地址
    • shipping_name 收件人姓名
    • shipping_address 收件人地址
    • shipping_phone 收件人電話
    • total 總金額
    • is_paid 付款狀態
    • paymen_method 付款方式
    • token 亂數生成
    • aasm_state 訂單狀態
  • Order_item 訂單品項

    • order_id 品項所屬的訂單ID
    • product_name 商品名稱
    • product_price 商品金額
    • quantity 商品數量
    • product_id 商品ID(5/23 新增)
  • Intro 廣告圖

    • title 標題
    • content 文案內容
    • image 圖片
    • link 廣告連結
    • is_hidden 廣告隱藏狀態
  • Wish_list 願望清單

    • user_id 願望清單所屬的用戶ID
    • product_id 願望清單內的商品ID
  • Currency 幣別

    • symbol 幣別符號
    • name 幣別名稱
    • rate 匯率
  • Color 商品顏色(5/26 新增)

    • name 顏色名稱
    • code Hex 色碼




Gems

  • 帳號系統

    • devise
  • 前端視覺

    • bootstrap-sass
    • simple_form
    • will_paginate
    • will_paginate-bootstrap
    • font-awesome-rails
    • masonry-rails
  • 搜尋功能

    • ransack
  • 圖片功能

    • carrierwave
    • mini_magick
  • 訂單狀態

    • aasm
  • AWS 雲端儲存

    • fog-aws
    • figaro
  • Intercom 客服系統

    • intercom-rails

Comments

comments powered by Disqus