AMP教學-amp-bind-產品規格製作教學

AMP教學-amp-bind-產品規格製作教學

前一篇amp-bind有介紹了初步的使用,而在class的變化中也有介紹amp-bind利用json形成class運用,本次來製作簡易的產品規格畫面,如何使用amp-bind製作出選擇幣別、顏色、尺寸時能讓標題與價格變化

製作目標: 選擇顏色和尺寸時標題能夠帶出顏色與尺寸,選擇幣別時金額能夠變化為各種幣別數字

載入JS檔案:
需要載入amp-bind和amp-selector,amp-selector可用來製作tab也可以作為規格選擇

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>

在body中撰寫amp-bind的json
此次預設價格只有一種,但是選擇幣別時價格數字會改變;而選擇顏色和尺寸時標題後面會增加顏色和尺寸
以下將所有規格定義出來,預設價格為新台幣1690,五種幣別可選擇;每個產品有個代號(1001-1004),代號中有顏色和各個尺寸

<amp-state id="product">
<script type="application/json">
{
"selectedProducts": "1001",
"selectedSizes": "S",
"selectedCurrency": "TWD",
"defaultPrice":"1690",
"currency" :{
"TWD":{
"icon":"$",
"price":"1690"
},
"HKD":{
"icon":"$",
"price":"427"
},
"USD":{
"icon":"$",
"price":"55"
},
"JPY":{
"icon":"¥",
"price":"5300"
},
"THB":{
"icon":"฿",
"price":"1700"
}
},
"1001":{
"color":"紅色",
"sizes":{
"S":"S",
"M":"M",
"L":"L"
}
},
"1002":{
"color":"黃色",
"sizes":{
"S":"S",
"M":"M",
"L":"L"
}
},
"1003":{
"color":"藍色",
"sizes":{
"S":"S",
"M":"M",
"L":"L"
}
},
"1004":{
"color":"綠色",
"sizes":{
"S":"S",
"M":"M",
"L":"L"
}
}
}
</script>
</amp-state>

語法 解釋
id="product" 每個amp-state必須命名ID,因為一頁內不一定只有一個amp-bind,必須有ID才能知道要撈哪一個
selectedProducts 變數,會撈取1001-1004其中一項,預設值設定1001
selectedSizes 變數,會撈取size裡面的尺寸,預設值設定1001
selectedCurrency 變數,會撈取TWD-HKD等幣別,預設值設TWD
defaultPrice 價格預設值,會用到所以也設個變數
currency 幣別名稱,下方再分為各國幣別
1001-1004 各種產品代號,可以自由命名,或是使用顏色為代號都可以,各產品下方有顏色與各種尺寸。

※上述的名稱都可以自由命名,使用駝峰式命名法只是比較容易看得懂
※注意每個大括號包住一項目類別,最後一項子項目不需要逗號,否則會無法運行


撰寫html

標題:

<h2>產品標題<span [text]="product[product.selectedProducts].color">紅色</span>
<span [text]="product[product.selectedProducts].sizes[product.selectedSizes]">S</span></h2>
語法 解釋:
[text] 一但觸發amp-bind時要改變裡面的文字
product[product.selectedProducts].color product指的是amp-bind的id,
[[product.selectedProducts] 為product裡面的selectedProducts變數(指看會選擇1001-1004哪一個產品),
.color 代表要撈取最下層的color裡面的值。
product[product.selectedProducts] 這段同樣為product裡面的selectedProducts變數(指看會選擇1001-1004哪一個產品)
.sizes[product.selectedSizes] 在1001-1004產品下有一層size的值,值裡面還需要被指定選擇,因此再用中括號 [product.selectedSizes] 包住變數群組來 指定選擇
. 每個. 代表是選擇連結到下一層之意


價格呈現

<p id="last_price">
<span [text]="product.currency[product.selectedCurrency].icon">$</span>
<span [text]="product.currency[product.selectedCurrency].price">1690</span>
</p>
語法 解釋
product.currency[product.selectedCurrency].icon 觸發amp-bind時,撈取幣別裡面的icon 值
product.currency[product.selectedCurrency].price 觸發amp-bind時,撈取幣別裡面的price 值


選幣別

<select on="change:AMP.setState({ product: {selectedCurrency: event.value }})">
<option value="TWD">台幣</option>
<option value="HKD">港幣</option>
<option value="USD">美元</option>
<option value="JPY">日幣</option>
<option value="THB">泰銖</option>
</select>
語法 解釋
on="change:AMP.setState 使用select時是on="change..."
on=".... 指的是要監控操作的動作,藉此撈到amp-bind的json資料
product: {selectedCurrency: event.value} 由於select裡面的值是使用value,因此監控時event接續的是value,不像之前amp-selector是寫option
(注意這邊value寫的值必須和json裡面的一致,否則抓不到指定的值)


選顏色

<amp-selector name="color" class="selector-color" layout="container"
on="select:AMP.setState({ product: {selectedProducts: event.targetOption}})"
[selected]="product.selectedProducts.color">
<ul >
<li option="1001">紅色</li>
<li option="1002">黃色</li>
<li option="1003">藍色</li>
<li option="1004">綠色</li>
</ul>
</amp-selector>
語法 解釋
on="select:AMP.setState 使用amp-selector時是on="select:AMP.setState ..
product: {selectedProducts: event.targetOption selectedProducts為產品變數等
於此項目動作撈取Option內的值(1001-1004)
和上述不同的是,event後面接的是targetOption
[selected]="product.selectedProducts.color" 選擇到哪一個顏色項目時會加入 selected ,讓畫面上有變化被選擇


選尺寸

<amp-selector name="color" class="selector-size" layout="container"
on="select:AMP.setState({ product: {selectedSizes: event.targetOption}})"
[selected]="product.selectedSizes.sizes">
<ul >
<li option="S">S</li>
<li option="M">M</li>
<li option="L">L</li>
</ul>
</amp-selector>
語法 解釋
product: {selectedSizes: event.targetOption} selectedSizes為尺寸變數,此項目動作撈取Option內的值(size內尺寸)
[selected]="product.selectedSizes.sizes" 選擇到哪一個顏色項目時會加入 selected ,讓畫面上有變化被選擇

 

最後加上css美化畫面後,即完成一個簡單的產品規格。可參考完成amp-bind 產品規格範例

此份檔案為價格單一,若是希望價格多元的話json檔案需要在每個尺寸內再加上價格和幣別不同時的值。

其他進階語法:

範例 說明
[class]="product.1001.quantity == 0 ? 'no' : 'yes' " 判斷式:
問號前面是條件判斷? '判斷A' : '或者是B'
假如product裡的1001的quantity數字值等於0的話,class就帶入no,反之則帶入yes
(class名稱自行定義,1001也可以改成變數,但要視情況使用)
[text]="product[product.selectedGoods].quantity == 0 ? '無庫存' :'可購買' + product[product.selectedGoods].quantity " 判斷式進階:判斷等於0時文字顯示無庫存,有庫存時先用單引號填入純文字再+bind數字
<h4>標題<span [text]="'運送至'+product.currency[product.selectedCurrency].area"></span></h4> 文字變換要加文字的寫法
用單引號 ',,,文字' ,呈現會是純文字
當規格可變換後,可以再加入產品輪播圖與產品圖放大(lightbox)等效果,預計下篇再教學

參考文章:
amp 產品頁面教學
amp-bind
amp-bind 產品規格範例

 

更多文章:

  1. AMP教學-amp-bind-產品輪播圖與規格互動
  2. 在AMP中添加或刪除class的方式
  3. 每個AMP頁面都必須有非AMP版本嗎?
  4. AMP教學-amp-bind 增加網頁互動
  5. AMP頁面只適合使用在靜態網站上面嗎?

回應