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

BY kate │ 2019-11-25 15:10:40

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

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

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

在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
標題:

語法	解釋:
[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] 包住變數群組來指定選擇
.	每個. 代表是選擇連結到下一層之意

價格呈現

語法	解釋
product.currency[product.selectedCurrency].icon	觸發amp-bind時，撈取幣別裡面的icon 值
product.currency[product.selectedCurrency].price	觸發amp-bind時，撈取幣別裡面的price 值

選幣別

語法	解釋
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)等效果，預計下篇再教學