過去四個月，我們重建了 Culture Shock Club 線上商店的大部分內容。新增、刪除與重構加起來，總共改動超過 500,000 行程式碼。成果是更快的網站、更清楚的購物流程，以及更實用的會員帳戶。
重點
- 四個月的店面重建：增刪改合計超過 500,000 行。
- 各塊好了就上線，再繼續打磨，不是一次大改版。
- 關鍵頁在手機與桌機 Lighthouse 達 95 or higher。
- 重點：更快首屏、更清楚首頁結構、快速加入與搜尋、商品頁、可搜尋的訂單紀錄。
我們沒有把所有東西留到一次大改版才推出。每個部分一完成就上線，之後再持續調整。
更快的第一個畫面
舊首頁會先載入商品輪播，才顯示第一個完整畫面。這代表商品圖片、款式選項、價格、庫存資料和輪播程式都得立刻載入。
新首頁會先載入開場圖片。商品區塊、推薦、分析工具和同意管理工具則會稍後載入，或只在需要時才載入。
我們也減少了字型、CSS 和腳本的初始負擔。資源快取更有效率，購物車操作也不會再重新載入無關的頁面資料。
主要頁面在我們的 Lighthouse 測試中，手機版和桌面版現在都達到 95 分以上。頁面也更快可以操作，瀏覽時更穩定，對手機的運算負擔也更小。
結構更清楚的首頁
舊首頁幾乎都靠單一商品列表撐起來。新版面讓每個區塊都有明確用途。
新品可以用精簡的圖庫呈現，商品較多的系列則可以用更密集的網格。已經在上方出現的商品，不會在下方區塊重複出現，滑動時也就少了重複。
首頁現在可以介紹新品、帶出較早的商品，並引導訪客前往目錄的不同角落，而不會一直重複同樣的單品。
不換頁也能快速加入與搜尋
選個商品選項，不應該需要離開目前頁面。
快速加入在手機上會從下方展開，在桌面上則是較寬的面板。兩種版本都有空間顯示商品圖片、款式選項和尺寸資訊。
預測搜尋會在你輸入時顯示結果，並保留最近的搜尋紀錄。詳細的結果卡片只在需要時載入，開始搜尋前的負擔也更少。
這些改變讓你可以比較商品、選好選項並加入購物車，不會失去原本瀏覽的位置。
以購買決定為核心的商品頁
我們依照購買時需要的資訊，重新整理了商品頁。商品圖片與影片、已選款式、價格和購買按鈕會最先出現。尺寸、運送、保養和退貨資訊也都在手邊。
圖庫現在支援圖片、影片、外部影片和 3D 素材。切換顏色時，圖庫可以直接跳到對應的圖片。
相關商品會出現在獨立的「More to Explore」區塊。隨時都看得到，但不會搶走主要商品資訊的焦點。
立即反應的購物車
以前購物車在處理變更時，會變慢或顯示不一致。我們重建了更新流程，讓操作能立即得到回應。
數量變更、移除商品、折扣碼和價格更新，現在會在伺服器確認最終結果時就先顯示。之後購物車會把顯示的數量和總額，與確認後的結果對齊。
優惠進度也更清楚了。購物車會顯示距離免運或多件優惠還差多少，達成時也會告訴你。
完整購物車和側邊滑出購物車，現在大部分操作都一致。兩種結帳路徑用起來也更一致。
更實用的會員帳戶
結帳之後，商店依然好用。
會員帳戶提供可搜尋的訂單紀錄，附有商品縮圖、總額、日期和出貨狀態。每筆訂單頁面都能顯示出貨、退款和退貨的詳細資訊。
符合資格的訂單，可以在帳戶中選擇商品、數量和退貨原因，再送出申請。
我們也重建了國家與語言選擇器。你可以用國家名稱、國家代碼、貨幣或語言搜尋，結果會依地區分組。切換市場時會停留在目前頁面，只更新語言和價格。
為什麼叫 Energy Edition
這次更新的每個部分都以速度為目標。首頁在第一次顯示前做的事情更少，瀏覽時換頁更少，購物車立即反應，會員帳戶在結帳後也能處理更多事情。
這次更新不是靠某一個功能定義的，而是把大家最常用的商店功能一一重建後，累積出來的成果。
我們會繼續改進。如果有任何地方感覺很慢、不清楚或礙手礙腳，請告訴我們。
