LESSON-25 · solution

完成商品目錄、購物車、checkout 與聯絡表單的離線 mock

這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。這頁用可觀察證據和 anchor 指出下一個動作。

Starter3 個小成果

Checkpoint一個核心缺口

Solution4 個差異

開始前確認

這一頁的結果：Solution 的服務頁正好三張由 services 陣列產生的卡片；關於頁只有一組背景／工作方式／信任內容，聯絡頁只有一個含三欄的 form；有效送出不重新載入、空白與錯誤 Email 有證據，且 390px／Tab 可操作

工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、DOM、Console 或 Network狀態。

會用到的檔案：assets/logo-mark.svg、assets/product-band.svg、assets/product-bench.svg、assets/product-bike.svg、assets/product-dumbbell.svg、assets/product-kettlebell.svg、assets/product-mat.svg、cart.html、checkout.html、contact.html、css/style.css、index.html、js/api.js、js/cart.js、js/checkout.js、js/common.js、js/config.js、js/contact.js、js/home.js、js/order-success.js、js/products.js、js/store.js、order-success.html、products.html

本堂焦點：完成商品目錄、購物車、checkout 與聯絡表單的離線 mock

照這個順序做

一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。

目的

先用離線資料證明商品 UI、欄位與搜尋契約，不把網路問題混入本章。

修改檔案

js/api.js、js/products.js、products.html

程式碼位置

offline product catalog

現在要做：先對照差異，再檢查在 js/api.js、js/products.js、products.html 的「offline product catalog」對照這項變更：const matched = products.filter((product) => product.name.includes(keyword) || product.productId.includes(keyword));

貼上位置：js/api.js、js/products.js、products.html 的 offline product catalog 區塊

const matched = products.filter((product) => product.name.includes(keyword) || product.productId.includes(keyword));

預期結果：只渲染 active 商品；有特價時保留原價與特價語意；輸入名稱或商品編號可篩選，沒有其他搜尋 key。

驗收證據：商品卡 DOM、四個顯示欄位、名稱／編號搜尋結果、img src/alt 與 Network 零請求。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

目的

先把選購與金額顯示做成可重現本地流程；L27 才由 GAS 權威重算。

修改檔案

js/store.js、js/cart.js、js/checkout.js、cart.html、checkout.html

程式碼位置

cart and checkout mock

現在要做：先對照差異，再檢查在 js/store.js、js/cart.js、js/checkout.js、cart.html、checkout.html 的「cart and checkout mock」對照這項變更：const cart = window.EcommerceStore.getCart(); const summary = window.EcommerceApi.buildCartSummary(cart);

貼上位置：js/store.js、js/cart.js、js/checkout.js、cart.html、checkout.html 的 cart and checkout mock 區塊

const cart = window.EcommerceStore.getCart();
const summary = window.EcommerceApi.buildCartSummary(cart);

預期結果：重新整理仍保留購物車；checkout 有購買人、性別、電話、地址、信箱；顯示商品總額、運費、訂單總額與 mock 狀態。

驗收證據：localStorage 快照、購物車數量、三個金額、FormData key 與 order-success mock 畫面。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

目的

先驗證聯絡資料 contract 與狀態畫面，下一章才替換 transport。

修改檔案

contact.html、js/contact.js

程式碼位置

offline contact mock and network guard

現在要做：先對照差異，再檢查在 contact.html、js/contact.js 的「offline contact mock and network guard」對照這項變更：const contactPayload = { name:data.get('name'), gender:data.get('gender'), phone:data.get('phone'), email:data.get('email'), message:data.get('message') };

貼上位置：contact.html、js/contact.js 的 offline contact mock and network guard 區塊

const contactPayload = { name:data.get('name'), gender:data.get('gender'), phone:data.get('phone'), email:data.get('email'), message:data.get('message') };

預期結果：五個聯絡欄位都有 label/id/name/required；送出不離頁，可重現 idle/loading/success/error，Network 無資料 request。

驗收證據：Elements、FormData 五個 key、aria-live/data-state、Network 與全專案 fetch 搜尋。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

目的

Checkpoint 只修正特價商品的單一計價缺口。

修改檔案

js/api.js

程式碼位置

effectivePrice

現在要做：先對照差異，再檢查在 js/api.js 的「effectivePrice」對照這項變更：const effectivePrice = product.salePrice ?? product.price;

貼上位置：js/api.js 的 effectivePrice 區塊

const effectivePrice = product.salePrice ?? product.price;

預期結果：FIT-001 ×2 使用 1380 而非 1680，小計與訂單總額同步下降。

驗收證據：手算結果、購物車列單價、subtotal 與 total。

卡住時先看這裡

常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。

第一個檢查：只對照目前差異指定的檔案與 anchor。

階段檔案

完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。

開啟 solution 的可執行入口

開啟assets/logo-mark.svg本地商品或品牌資產：不依賴外部圖片服務。
開啟assets/product-band.svg本地商品或品牌資產：不依賴外部圖片服務。
開啟assets/product-bench.svg本地商品或品牌資產：不依賴外部圖片服務。
開啟assets/product-bike.svg本地商品或品牌資產：不依賴外部圖片服務。
開啟assets/product-dumbbell.svg本地商品或品牌資產：不依賴外部圖片服務。
開啟assets/product-kettlebell.svg本地商品或品牌資產：不依賴外部圖片服務。
開啟assets/product-mat.svg本地商品或品牌資產：不依賴外部圖片服務。
開啟cart.html鐵刻運動電商頁面或發佈檔案。
開啟checkout.html鐵刻運動電商頁面或發佈檔案。
開啟contact.html鐵刻運動電商頁面或發佈檔案。
開啟css/style.css黃色與鐵灰共用樣式：包含響應式版面、focus 與可讀狀態。
開啟index.html鐵刻運動電商頁面或發佈檔案。
開啟js/api.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/cart.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/checkout.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/common.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/config.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/contact.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/home.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/order-success.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/products.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟js/store.js原生 JavaScript：負責商品、購物車、表單、local mock 或 GAS 測試契約。
開啟order-success.html鐵刻運動電商頁面或發佈檔案。
開啟products.html鐵刻運動電商頁面或發佈檔案。

assets/logo-mark.svg本地商品或品牌資產：不依賴外部圖片服務。