AMP教學-amp-bind-產品輪播圖與規格互動
前一篇介紹使用amp-bind和amp-selector製作出規格變化，但購物的產品頁面還是需要產品大圖甚至是輪播(carousel)，本次將教學如何和圖片有互相呼應，讓使用者選擇規格時圖片就會替換。
預計製作的產品圖形式:
目標1.每個顏色就替換一張圖片，但無輪播，點擊圖片時會放大跳出light-box
目標2.每個顏色就一組輪播圖，點擊圖片時會放大跳出light-box
※本篇文章建議先閱讀過amp-bind概述、amp-bind產品規格、amp-lightbox跳出視窗、amp-carousel 輪播 等篇，以利了解內容
載入 js
除了之前次說的 amp-bind和amp-selector之外，還要另外 載入下列 js
amp-carousel-輪播用(目前有0.2版，也可以使用)
| <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> |
amp-image-lightbox-圖片點選後可放大
|
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script> |
目標1: 點顏色後圖片換圖
步驟1:在bind裡面每個顏色要寫入指定一張圖片，我們依照上次的範例在貨號下幫每個產品增加圖片
| <script type="application/json"> { "selectedProducts": "1001", "selectedSizes": "S", "selectedCurrency": "TWD", "defaultPrice":"1690", "1001":{ "image": "images/img1001.jpg", "color":"紅色", "sizes":{ "S":"S", "M":"M", "L":"L" } }, "1002":{ "image": "images/img1002.jpg", "color":"黃色", "sizes":{ "S":"S", "M":"M", "L":"L" } }, "1003":{ "image": "images/img1003.jpg", "color":"藍色", "sizes":{ "S":"S", "M":"M", "L":"L" } }, "1004":{ "image": "images/img1004.jpg", "color":"綠色", "sizes":{ "S":"S", "M":"M", "L":"L" } } } </script> </amp-state> |
步驟2:在圖片區塊寫入點擊後開啟lightbox和src路徑替換語法
| <amp-img src="images/img1001.jpg" width="300" height="300" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0" [src]="product[product.selectedProducts].image" > </amp-img> |
步驟3:在後面加上點擊圖片後放大的效果，這是單張圖片的 lightbox
| <amp-image-lightbox id="gallery-lightbox" layout="nodisplay"> <div role="button" tabindex="0"> <button class="close-gallery-button btn btn-primary" on="tap:gallery-lightbox.close" role="button" tabindex="0"> Close </button> </div> </amp-image-lightbox> |
裡面主要寫的是關閉按鈕 on="tap:gallery-lightbox.close" 意指點擊後 有 gallery-lightbox這個id的項目會被關閉
測試點顏色看看，現在應該可以看到選顏色時，圖片變換了。
查看完整範例
目標2: 點顏色後圖片換輪播群組
概念:預先做好幾組要替換的輪播圖，幫每組輪播加上編號判斷，還沒選取到的就先隱藏。例如1001編號一組，1002一組...以此類推。
amp-bind寫入自訂義的變數植，主要用來呼應輪播小圖片
| <amp-state id="product"> <script type="application/json"> { "selectedProducts": "1001", "selectedSizes": "S", "selectedCurrency": "TWD", "defaultPrice":"1690", "selectedSlideFor1001": 0, "selectedSlideFor1002": 0, "selectedSlideFor1003": 0, "selectedSlideFor1004": 0, ... } </script> </amp-state> |
selectedSlideFor1001 是自訂義的變數預設值，後面的0代表選取小圖第一張。
先做圖片輪群組，每一組就用 <amp-carousel>...</amp-carousel>包起來
關於amp輪播套件的教學可以參考先前的amp-carousel
|
<div class="product-gallery"> |
語法解釋:
| 語法 | 說明 |
| [slide]="product.selectedSlideFor1001" | 監控指定輪播小圖，互相呼應selectedSlideFor1001 是在amp-bind裡面自行定義的變數，預設值是0。以此類推 |
| on="slideChange: AMP.setState({product: {selectedSlideFor1001: event.index}})" | 當監控此輪播時，輪播小圖也會跟著改變，選取同樣變數物件的值 |
| [hidden]="product.selectedProducts != '1001'" | 當選擇顏色時，如果不是1001，將會加上hidden ，讓該區塊隱藏 |
| hidden | 剛載入網頁時，amp-bind沒有被任何觸發，因此先把不需要出現的群組加上hidden,暫時隱藏 |
在圖片輪播群組下面放入小圖的群組
|
<div class="product-gallery"> <ul hidden [hidden]="product.selectedProducts != '1002'"> |
| 語法 | 說明 |
| [hidden]="product.selectedProducts != '1001'" | 當選擇顏色時，如果不是1001，將會加上hidden ，讓該區塊隱藏， 同樣在預設要隱藏的區塊也有加上hidden |
| on="tap:AMP.setState({product: {selectedSlideFor1001: 0}})" | 選擇並監控第一張圖片 互相呼應大圖，selectedSlideFor1001 是在amp-bind裡面自行定義的變數，預設值是0(代表第一張圖)，以此類推 |
| [class]="product.selectedSlideFor1002 == 0 ? 'selected ' : '' " | 當selectedSlideFor1002選擇到序號為0(第一張圖片時)，加入class "selected" 如果沒有則是空值 |
| hidden | 沒有出現的群組區塊就先隱藏 |
完成! 測試看看!!
