示範版型的製作說明
霧嵐茶事：高山茶線上商店
這是我們自己出題、自己做的一套示範版型，不是客戶案子。 品牌與商品資料為虛構，照片為授權圖庫素材。放在這裡是為了讓你看見 一套版型從題目到實作的完整判斷過程——那是截圖看不出來的部分。
可以直接操作的版本在 高山茶線上商店示範版型。
一、題目
做示範版型最容易失敗的方式，是先想版面再找內容。這一套反過來： 先寫下三個「賣茶的人真的會遇到、而多數茶葉網站沒有處理」的問題，再讓版面去回答。
- 茶的價差來自海拔，但買的人看不到同一個品名，兩千五百公尺與一千二百公尺是兩種東西，價格差好幾倍。多數茶葉商店只列品名與價格，消費者無從判斷貴在哪裡。
- 「買多少才夠泡」沒有人回答茶論兩賣，但客人心裡想的是「這罐能泡幾次」。這中間的換算沒人做，購物車裡就只是一個重量數字。
- 沖泡建議寫在包裝上，網頁上沒有水溫、置茶量、秒數、可沖泡次數，這四個數字決定新手泡出來好不好喝，卻通常不在購買頁上。
二、做法
三個決定，一條對一條。每一個都可以在示範版型上實際點得到。
- 把海拔做成篩選軸商品列表的第一個篩選條件是海拔，價格與分類排在後面。點下去直接看到這個高度帶有哪些茶、價格落在哪裡。海拔與產區、品種、發酵度一起顯示，比較的基礎才存在。
- 購物袋直接換算沖泡份量加入購物袋的同時算出這個重量大約可以泡幾次，依該款茶自己的置茶量計算，不是套一個通用公式。數量改變時同步更新。
- 沖泡參數放進商品卡本身水溫、置茶量、秒數、回沖次數四個欄位是每一款茶的必填資料，寫在資料層、不寫在文案裡，所以列表、商品頁與購物袋都讀得到同一份。
三、畫面
四、技術
- 單一來源的資料層茶款資料與卡片渲染函式放在同一個檔案，伺服器端渲染與客戶端重新渲染（篩選、排序後）呼叫的是同一支函式。兩邊不可能長得不一樣。
- 無框架的互動篩選、排序、購物袋、彈出視窗全部是原生 JavaScript，沒有前端框架。這一套版型不為了三個互動載入一整個執行環境。
- 圖片與字型自站內提供照片是 WebP、多尺寸；字型走站內子集檔。整套不向任何第三方網域請求資源。
- 示範標示與不收錄全部 47 套示範版型都帶示範標示且設為不被搜尋引擎收錄——示範內容不應該和真實企業的資訊混在搜尋結果裡。
這一套可以怎麼用
版面與互動可以直接沿用，內容全部換成你的。照片、品項、價格、沖泡參數都是資料層的欄位， 換掉之後版面自己會對。若你的商品不是茶，但同樣有「規格決定價差、消費者看不懂規格」 這個問題，這一套的結構一樣成立。
想開一家線上商店
從商品、金流和運送方式開始談。線上開店已含金流串接，電商約 4–8 週上線。
最後更新 2026-10-06