# SiteMap - 購物/會員 (哲賢、軒園)

###### tags: `SiteMap`

:::info
AUSTIN
:::
1. - 購物車頁面(MAIN)參考

- 頁面架構
(上方:使用 swiper ;
下方:使用 Grid 商品一排四格瀑布流)
- [lativ](https://www.lativ.com.tw/)
- 參考動畫
(上方:swiper 輪播 ;
下方:hover 圖片 變淺色、放大，
hover 商品名稱 字底線動畫)
- [highsnobiety](https://www.highsnobiety.com/shop/)

- 內容資訊
(上方:介紹主要類別圖片xN ;
下方:商品主要圖片x1、商品名稱、商品價格)

2. - 購物車內頁(MAIN)參考

- 頁面架構
(左側:條列式資訊 ;
右側:商品圖片)
- [吉豐重工](https://immense.tw/item/guerrilla-group-gg-jac-5461/5461/)

- 參考動畫
(左側:縱向滑鼠滾輪 ;
右側:橫向swiper 用鍵盤移動多張圖片)
- [吉豐重工](https://immense.tw/item/guerrilla-group-gg-pan-5460/5460/)

- 內容資訊
(左側:名稱、價錢、簡介、尺寸、數量、加入購物袋 ;
右側:商品其他圖片xN)

3. - 送養內頁(MAIN)參考

- 頁面架構
(上方:nav ;
主頁:內文)
- [送養](https://donation-networks.savedogs.org/Application)

- 內容資訊
(內文;
Input:種類、名字、圖片、敘述、聯繫方式)
- [送養內文](http://www.meetpets.org.tw/content/9)
)

:::success
LIMO
:::


參考設計(:eyes: LIMO自己要看的):
https://dribbble.com/tags/organic_shop
https://www.esquire.com/style/mens-fashion/g20686368/best-cheap-online-clothing-stores-for-men/

### 1. 購物車頁面(nav)參考
- 購物車圖示
- 顯示於畫面右上方
- HOVER效果展開(提供資訊)

---
加入購物車//[lativ](https://www.lativ.com.tw/)
<br>
HOVER//SOMETHING

<br>
HOVER//NOTHING//[link](https://www.toddsnyder.com/?cjevent=89fe53e4b78811eb8023855b0a180510&utm_source=cj&utm_content=100039162&utm_term=13897870)
<br>

### 2. 商品頁面(nav)參考
- 購物頁面圖示
- 可預選商品分流
- HOVER效果展開(主要分流)
- 展開清單(細節分類)
- 圖文顯示/置入廣告(皆為跳轉畫面)

---
選擇商品分類//[link1](https://www.everlane.com/?utm_source=pepperjam&utm_medium=2-112671&utm_campaign=120661&clickId=3574094376) [link2](https://www.asos.com/us/men/)

<br>
<br>


選擇身分分類//[link](https://shop.maoup.com.tw/?utm_source=maoup&utm_medium=menu)

- 補充 -

|效果表|
|-|

| |圖示HOVER顯示|點擊加入購物車|
|-|-|-|
|尚未購物|購物車目前沒東西|\|
|已選購者|購物車<br>(商品+基礎細節+數量)|上方顯示<br>加入資訊小卡|
| | | 顯示數秒後消失(提示加入成功) |

- 購物流程
- 購物歷程
- 點擊連結至商品頁面- 選擇目標商品- 加入購物車
- 跳轉購物車清單- 修改購物車- 選擇結帳方式
- 確認商品及付款方式
- 登入- 再確認(若已登入則省略)- 完成訂單(提示
- 購物後行為
- 確認已下訂單- 確認訂單進度 - 訂單完成確認(收到貨款)
- 存入歷史紀錄

### 3. 登入頁面(nav)參考
- 登入頁面圖示
- 放置於最右側(購物車之前)
- 以純文字為主之按鍵
- 具有標誌性底色
---
上方NAV簡潔分層//[link1](https://www.popdaily.com.tw/) [link2](https://www.toy-people.com/) [link3](https://www.farfetch.com/tw/checkout/basket.aspx)

<br>
<br>

其餘參考介面

### 4. 登入頁面方向

送養系統
(CRUD)

認養紀錄
(僅提供資訊)

購物紀錄
(來自購物流程)

留言板系統
(表單對話 1V1)