本頁只練什麼
能從私有六欄的本地 Product array 顯示名稱、圖片、售價與特價，搜尋只比對 name/productId。
先排除網路變因，才能專注驗收資料到 DOM；搜尋不新增 Product 欄位或 GET 參數。
要修改的檔案：files/starter/js/api.js
定位：先搜尋外部網址與額外搜尋 key，結果必須為零。｜依 starter-1 定位，只修改「離線商品卡與搜尋契約」的責任。
LESSON-25 · TOPIC 01
離線商品卡與搜尋契約
能從私有六欄的本地 Product array 顯示名稱、圖片、售價與特價，搜尋只比對 name/productId。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
學生正在累積 project/e-commerce，必須在不碰外部服務的前提下完成「離線商品卡與搜尋契約」。
起始狀態：本地 fixture 已準備 離線商品卡與搜尋契約 的最小資料，尚未執行驗收。
完成後要看到
四個顯示欄位皆出現在商品卡；名稱／商品編號搜尋另留操作證據。
驗收證據：count=4、uniqueCount=4、valid=true；搜尋鍵僅 name/productId
何時會用到
第 23–28 章運動器材電商在修改 js/api.js／js/products.js／products.html 時。
常見混淆：看到畫面不等於契約通過；仍要核對欄位、操作與證據。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
離線商品卡與搜尋契約 Offline product card and search
能從私有六欄的本地 Product array 顯示名稱、圖片、售價與特價，搜尋只比對 name/productId。
正式說法：Offline product card and search 是把 離線商品卡與搜尋契約 的輸入、責任、輸出與證據固定成可重現契約。
name/image/price/salePrice → h2/img/del/strong；keyword 比對 name/productId三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/js/api.js定位：先搜尋外部網址與額外搜尋 key，結果必須為零。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先搜尋外部網址與額外搜尋 key，結果必須為零。」目前的缺口。
證據：保存 files/starter/js/api.js 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/js/api.js，且定位到 先搜尋外部網址與額外搜尋 key，結果必須為零。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/js/api.js定位：先搜尋外部網址與額外搜尋 key，結果必須為零。要做：逐欄比對第一筆 Product 與商品卡，再以名稱及商品編號各搜尋一次。
預期：四個顯示欄位皆出現在商品卡；名稱／商品編號搜尋另留操作證據。
證據：count=4、uniqueCount=4、valid=true；搜尋鍵僅 name/productId
卡住先查：先搜尋外部網址與額外搜尋 key，結果必須為零。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/js/api.js定位：先搜尋外部網址與額外搜尋 key，結果必須為零。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：四個顯示欄位皆出現在商品卡；名稱／商品編號搜尋另留操作證據。
證據：count=4、uniqueCount=4、valid=true；搜尋鍵僅 name/productId
卡住先查：先搜尋外部網址與額外搜尋 key，結果必須為零。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
離線商品卡與搜尋契約runtime fixture · read-only demo
本主題示範畫面：
- name
- image
- price
- salePrice
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
方向提示：先只找出「離線商品卡與搜尋契約」的輸入與可觀察輸出，不同時修改別的責任。
提示 2｜關鍵片段
關鍵片段：name/image/price/salePrice → h2/img/del/strong；keyword 比對 name/productId
提示 3｜完整解答與原因
完整解答與原因：逐欄比對第一筆 Product 與商品卡，再以名稱及商品編號各搜尋一次。；驗收必須得到「count=4、uniqueCount=4、valid=true；搜尋鍵僅 name/productId」，因為這項證據直接對應本 module 的成功條件。