AMP教學-amp-list-製作產品列表
製作電商的商品頁面常用到的規格切換、輪播在之前已經有教學文章，若今天希望在商品頁下方有推薦商品列表時該如何用AMP達成這目的?
amp-list在製作需要大量更新替換的列表時很適用，例如商城常見的產品列表或是資料列表等，可以載入json檔案後將資訊呈現於畫面上，並且能夠呈現即時最新的內容。
此次以製作產品列表為例來了解amp-list。
載入js
html載入amp-list外還要載入 amp-mustache，這是用來執行html模板(template)裡面有變數值時和 JSON的名稱相呼應，產生template內的產品列表。
amp-bind則是用來即時變更資料，因此也必須載入
| <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> |
amp-list的資料都來自於JSON檔案，在JSON中必須要先命名好名稱與各筆資料的內容，在html中寫入名稱字串，載入JSON內的資料，呈現出一頁列表。
建立一個examples.json檔案
裡面包含圖片、名稱、價格...等資料
| { "items": [{ "img": "images/sock1001.jpg", "name": "護足氣墊船襪-深紫", "price": "260", "url": "#" }, { "img": "images/sock1002.jpg", "name": "護足氣墊船襪-湖水綠", "price": "250", "url": "#" }, ... ] } |
html中寫入下列語法
| <amp-list class="items" width="auto" height="145" layout="fixed-height" src="json/examples.json" binding="refresh" id="show-more-list"> <template type="amp-mustache"> <div class="sm-product"> <div class="thumbnail"> <a href="{{url}}"> <amp-img src="{{img}}" width="250" height="250" layout="responsive" title="{{name}}"/></amp-img> </a> <div class="caption"> <h5><a href="{{url}}">{{name}}</a></h5> <p> <span class="product-list-normal-label">原價：</span><span class="product-list-normal-price">$499元</span> <br><span class="product_member">會員價：${{price}}</span> </p> </div> </div> </div> </template> </amp-list> |
語法解釋:
| 語法 | 說明 |
| layout="fixed-height" | layout="fixed-height"代表依循內容高度展開， width必須為auto或不設定，適合未知內容寬高時使用(高度有可能會被撐開) |
| src="json/examples.json" | 連結剛剛寫好的JSON檔案撈取資料 |
| binding="refresh" | 維持JSON資訊在最新或即時變更 |
| <template type="amp-mustache"> | 代表被包覆的內容是每筆資料的代表html，撈取到相關資訊後會以這段語法為主，看json有幾筆資料就會出現幾個產品 |
| {{url}} {{img}} {{name}} {{price}} | 這些字串和examples.json每筆資料的項目必須一致，才能撈得到資料。 |
測試後可能會遇到的問題：
1.json資料沒有載入
連結json檔案時要注意必須使用https://....路徑 或是locolhost的相對路徑，並且必須使用如web server chrome或直接放到https://的網頁上才可以預覽
2.圖片連結失效，但其他資料有載入
json裡面的圖片連結要視為放在html裡面時的路徑，例如在index.htm裡面圖檔為 images/a01.jpg ，json裡面也是這個寫法
3.點了其他有用到bind的選擇鈕，amp-list整段消失
檢查amp-list裡面是否有寫像 [src]="myState.items" 代表會有監控amp-bind變化時取代值，假如值不需要被變更的話，這段要刪除，否則點到有amp-bind按鈕的時候會出現錯誤
4.如何排版
amp-list資料帶入後會產生一個外框，可以利用這個外框寫css變更排版方式，例如:
amp-list div[role='list'] {
display: flex;
}
完成範例 (下方產品詳細內的熱銷商品為amp-list製作)
關於amp-list還有許多設定與應用，例如訂單列表或是計算加值等，可參考官方文件。
