- 川川電商工法（共 51 篇文章）
- #1 訂單狀態用字串表達
- #2 訂單的狀態欄位要拆成四個
- #3 訂單的價格欄位設計
- #4 參考 Shopify 的各種設計與英文命名
- #5 商品與訂單關聯的基本 DB 設計
- #6 商品核心與銷售資訊分離
- #7 建立通用圖片上傳 API 架構
- #8 上傳圖片尺寸通用規格化
- #9 使用 ULID 來替上傳的圖片命名資料夾路徑
- #10 金流資料表，一種付款方式一張表
- #11 金流交易資料表，用五個欄位就夠
- #12 金流串接的簡單設計模式
- #13 簡化金流串接，只串 notify api 不串 query api
- #14 做一個通用忙碌頁面，可以改善金流串接的等待 UX
- #15 電商訂單內部備註功能
- #16 電商訂單操作紀錄架構
- #17 電商訂單歷程 Timeline UI
- #18 簡單 Schema 處理複雜行銷模組
- #19 購物車 session 只存客戶意圖，不存金額
- #20 CartInput 與 CartState：購物車要有兩個物件
- #21 購物車的不變條件，寫在建構子裡
- #22 促銷計算做成一條固定順序的 pipeline
- #23 每條促銷規則，都寫成同一個型態的純函式
- #24 四個小計，足以表達所有行銷需求
- #25 促銷的「設定」與「計算」要分開
- #26 贈品與加價購，都是 order_items 的一種 type
- #27 結帳狀態 = 購物車 + 顧客輸入 + 運費
- #28 「還差 300 元」的提示，要跟計價用同一個數字
- #29 只有會算錢的地方，才值得寫得嚴謹
- #30 不要邊算邊存，先算完再落地
- #31 後台用 Bootstrap，前台用 Tailwind
- #32 不要為了幾個互動元件，蓋一個前端專案
- #33 Preact 直接從 CDN 載入，不進 build
- #34 元件就寫在用到它的 blade 檔裡
- #35 島嶼之間用瀏覽器原生事件溝通
- #36 前端不算價，每次操作都回傳整份購物車
- #37 建立一個 Commerce 資料夾
- #38 系統設定用一張 key-value 表，前綴分群
- #39 訂單一律先建立 draft
- #40 電商不需要密碼登入，用 email OTP 就好
- #41 超商門市資料，透過 server cache 簡單傳遞
- #42 點數要做成帳本，不要只存一個 balance 欄位
- #43 點數在付款完成才結算
- #44 訂閱是一份契約，每一期產生一張訂單
- #45 訂閱要把商品資料整份快照起來
- #46 本機開發免登入進後台
- #47 隨時可以 migrate:fresh --seed
- #48 做一個「立刻成功」的假金流
- #49 留一個 `/_poc/` 區，放每個功能的前世
- #50 一張訂單要有三種 ID
- #51 訪客要怎麼安全地看自己的訂單
使用 ULID 命名資料夾路徑，管理圖片與尺寸會很漂亮。
無論是圖片儲存位置或資料庫，都不需要保留原始檔名，也不必使用冗長的 UUID 或隨機字串。
ULID 長度適中，且可依時間排序，結合尺寸與 namespace 的概念後，整體結構會更清楚。
副檔名如 jpg、png 不必另外建立資料庫欄位，可直接保留在檔案路徑中。資料庫只需儲存相對路徑，例如：
{NAMESPACE}/{ULID}/original.jpg
圖片上傳時，先建立或使用對應的 namespace 資料夾，再以 ULID 建立子資料夾。
資料夾內第一張原圖命名為 original.副檔名，其餘則放置六種尺寸版本並保留副檔名。
這樣的圖片目錄結構會簡潔、好讀，也容易管理。以下是一些範例：
.
├── banners
│ ├── 01M1E345QY1SXXTWGDYAA37J8A
│ │ ├── lg.jpg
│ │ ├── md.jpg
│ │ ├── original.jpg
│ │ ├── sm.jpg
│ │ ├── xl.jpg
│ │ ├── xs.jpg
│ │ └── xxl.jpg
│ ├── 01M1E34CN5WZDP80VA13WXK821
│ │ ├── lg.png
│ │ ├── md.png
│ │ ├── original.png
│ │ ├── sm.png
│ │ ├── xl.png
│ │ ├── xs.png
│ │ └── xxl.png
│ └── 01M1JGG1Y5QR49VB7A1ANJ6362
│ ├── lg.jpg
│ ├── md.jpg
│ ├── original.jpg
│ ├── sm.jpg
│ ├── xl.jpg
│ ├── xs.jpg
│ └── xxl.jpg
├── concerns
├── 01M0A59PMFAJHJFKWMAE2EKHW4
│ ├── lg.jpg
│ ├── md.jpg
│ ├── original.jpg
│ ├── sm.jpg
│ ├── xl.jpg
│ ├── xs.jpg
│ └── xxl.jpg
├── 01M0A695VKRDY5HS3FD002P5M2
│ ├── lg.jpg
│ ├── md.jpg
│ ├── original.jpg
│ ├── sm.jpg
│ ├── xl.jpg
│ ├── xs.jpg
│ └── xxl.jpg
└── 01M1E69QR343GW184JN8D438QB
├── lg.jpg
├── md.jpg
├── original.jpg
├── sm.jpg
├── xl.jpg
├── xs.jpg
└── xxl.jpg注意刪除圖片的時候，要從相對路徑找出對應 ULID 資料夾，整個刪掉。
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
⭐️ Shopify 網站開發服務（給品牌）
https://job.turn.tw/shopify-services
⭐️ 川川電商事務所（全客製電商開發服務）
https://chuanchuan.tw
⭐️ 台灣 Shopify 商家交流 LINE 群（非官方）
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ
⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA
https://job.turn.tw/shopify-services
⭐️ 川川電商事務所（全客製電商開發服務）
https://chuanchuan.tw
⭐️ 台灣 Shopify 商家交流 LINE 群（非官方）
https://line.me/ti/g2/PZ_1LILWVWWuzZQ50HNpYA-A3k6QXWF6znqoBQ
⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA
熱門文章