AMP教學-amp-list-製作產品列表

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還有許多設定與應用,例如訂單列表或是計算加值等,可參考官方文件。

參考:amp-list 、amp-mustache 

文章關鍵字:AMP AMP網頁 AMP教學 amp-bind

更多文章:

  1. AMP教學-amp-img圖片
  2. AMP教學-amp-carousel 輪播
  3. AMP教學-amp-instagram把IG照片放入文章中
  4. AMP的現況與未來趨勢
  5. AMP的SEO效果到底如何?