🎨 設計師操作手冊

DesignSupply 智繪家 · Designer Portal Guide

本手冊適用對象

本手冊提供給註冊為「設計師」角色的使用者參考。設計師透過 DesignSupply 平台瀏覽各家供應商提供的建材商品、加入購物車並一次下單,平台會自動將訂單拆分為對應的採購單發送給各供應商,由供應商直運(dropshipping)至設計師指定地址。

建議瀏覽器:Chrome / Edge / Safari 最新版。

本手冊內容

  1. 未登入瀏覽:訪客首頁與商店
  2. 登入流程
  3. 已登入瀏覽商城(依供應商篩選)
  4. 檢視商品詳情
  5. 購物車與結帳
  6. 個人專區(/my)
  7. 追蹤我的訂單
  8. 線上刷卡結帳(Stripe)
🌐

未登入瀏覽:訪客首頁與商店

1網站首頁

進入 https://designsupply.aiuptop.com,會看到 DesignSupply 主頁。網站採用 Odoo Website 模組打造,頂端導覽列提供「主頁、商店、聯絡我們」三個入口。

https://designsupply.aiuptop.com/
訪客首頁

未登入也可以瀏覽商店,但要加入購物車與下單需要先登入設計師帳號。

2進入商店(未登入)

點擊頂端的「商店」進入 /shop。未登入也能看到所有上架商品,目前正式環境共有 87 件商品(鴻麟 71 件 + 域誠環保_極木 16 件)。

https://designsupply.aiuptop.com/shop
未登入商店
🔐

登入流程

3登入頁面

造訪 /web/login 或從首頁右上角進入登入頁,輸入您的設計師帳號與密碼。

https://designsupply.aiuptop.com/web/login
登入頁

如果忘記密碼,請聯繫平台管理員協助重設。請勿與他人共用帳號,所有訂單將綁定至登入者。

4登入後首頁

登入成功後回到主頁,右上角會顯示您的設計師名稱(例如「設計師 A」)。從這裡可以下拉切換到「我的個人帳戶」、「我的訂單」、「登出」等選項。

https://designsupply.aiuptop.com/
登入後首頁
🛍️

已登入瀏覽商城

5商店分類與篩選

/shop 頁面,您可以使用:

  • 搜尋列:關鍵字搜尋商品名稱或 SKU。
  • 排序:依精選、價格、最新上架排序。
  • 檢視切換:方格 / 列表兩種版面。
  • 分類標籤:點選「鴻麟產品」或「域誠環保_極木產品」,可篩選只看特定供應商的商品。
https://designsupply.aiuptop.com/shop
已登入商店
📦

檢視商品詳情

6商品詳情頁

點擊任一商品卡片進入詳情頁,會看到:

  • 商品名稱(含 SKU 編號)、品牌、材質規格
  • 價格(NT$)
  • 數量輸入與「加入購物車」按鈕
  • 商品說明(由供應商於後台填寫)
https://designsupply.aiuptop.com/shop/product/...
商品詳情頁

如果商品有多個變體(如顏色、尺寸),需先在詳情頁選好變體才能加入購物車。

🛒

購物車與結帳

7檢視購物車

點擊頁面右上角的購物車圖示,或直接造訪 /shop/cart。在這裡可以調整商品數量、移除項目、檢視小計與總計,再點選「結帳」進入下一步。

https://designsupply.aiuptop.com/shop/cart
購物車(範例為空)

截圖顯示為空車狀態。實際使用時,加入商品後會列出明細與小計,並啟用「結帳」按鈕。

👤

個人專區

8個人專區首頁(/my)

登入後從右上角下拉選單進入「我的帳戶」,或直接造訪 /my。個人專區會顯示:

  • 帳戶資料(姓名、電子信箱、密碼修改)
  • 訂單列表入口
  • 發票、文件等資源連結
https://designsupply.aiuptop.com/my
個人專區首頁
📋

追蹤我的訂單

9我的訂單列表(/my/orders)

從個人專區點選「我的訂單」進入 /my/orders。此處列出您所有的銷售訂單,每筆訂單顯示訂單編號、日期、金額、狀態,可點擊進入查看明細與目前進度。

https://designsupply.aiuptop.com/my/orders
我的訂單列表

訂單狀態包括:報價單(尚未確認)→ 銷售訂單(已確認)→ 處理中(供應商備貨)→ 已出貨。如需取消訂單,請於下單後 24 小時內聯繫平台。

💳

線上刷卡結帳(Stripe)

10付款方式選擇

結帳流程進入「付款」步驟後,會看到可用的付款方式。DesignSupply 已整合 Stripe 線上刷卡,支援 Visa / MasterCard / American Express / Discover 等國際信用卡,由 Stripe 全程加密處理(PCI-DSS Level 1)。

https://designsupply.aiuptop.com/shop/payment
付款方式 — Stripe Card

畫面右下角的「保安由 Stripe」是 Stripe 的安全標章,代表卡號從來不會經過 DesignSupply 自家伺服器,直接送到 Stripe。

11填寫卡片資料

在付款區塊填寫信用卡資訊:

  • 卡號(Card Number)— 16 位
  • 有效期(MM / YY)
  • 安全碼(CVC)— 3 位(AMEX 為 4 位)
  • 國家/地區— 預設台灣

填妥後點擊右側「立即付款」。

https://designsupply.aiuptop.com/shop/payment
填妥卡片資料準備付款

「儲存我的付款資訊」勾選後,下一次同帳號購物可直接套用,不需重輸卡號。Stripe 將以 token 方式安全保存。

12付款處理中

送出後,系統會跳轉到 /payment/status 顯示「我們正在處理你的付款,請稍候。」此時 Stripe 後端正在向發卡銀行扣款授權,通常 3-5 秒內完成。

https://designsupply.aiuptop.com/payment/status
付款處理中

如果是 3D Secure 啟用的卡片,這步驟可能會再彈出銀行驗證視窗(例如簡訊 OTP),請依指示完成。

13付款完成 — 訂單已確認

付款成功後,您會看到訂單確認頁,並可在「我的訂單」看到訂單狀態變為「銷售訂單」(已確認)。同時系統會:

  • 自動寄送訂單確認 email 到您的信箱
  • 自動產生對應的採購單給供應商,由供應商安排出貨
  • 付款憑據(Stripe Payment Intent ID)會記錄於訂單明細
https://designsupply.aiuptop.com/my/orders/3
付款完成的訂單詳情

14測試卡片(僅供測試環境)

本平台目前以 Stripe 測試模式 運行,可使用以下測試卡號驗證流程而不會實際扣款

  • 4242 4242 4242 4242 — 一般成功(Visa)
  • 4000 0027 6000 3184 — 觸發 3D Secure 驗證
  • 4000 0000 0000 9995 — 模擬餘額不足拒絕
  • 有效期:任何未來日期(例如 12 / 34)
  • CVC:任意 3 位數(例如 123)

正式上線後,測試卡會失效;屆時請使用您的實體信用卡完成付款。