AMP教學-amp-bind-產品輪播圖與規格互動

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">
<amp-carousel id="carousel1001" width="500" height="500" layout="responsive" type="slides"
[slide]="product.selectedSlideFor1001"
on="slideChange: AMP.setState({product: {selectedSlideFor1001: event.index}})" 
[hidden]="product.selectedProducts != '1001'">
<amp-img src="images/img1001-1.jpg" width="500" height="500" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0">
</amp-img>
<amp-img src="images/img1001-2.jpg" width="500" height="500" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0">
</amp-img>
<amp-img src="images/img1001-3.jpg" width="500" height="500" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0">
</amp-img>
</amp-carousel>
<amp-carousel id="carousel1002" width="500" height="500" layout="responsive" type="slides"
[slide]="product.selectedSlideFor1002"
on="slideChange: AMP.setState({product: {selectedSlideFor1002: event.index}})"
[hidden]="product.selectedProducts != '1002'"
hidden>
<amp-img src="images/img1002-1.jpg" width="500" height="500" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0">
</amp-img>
<amp-img src="images/img1002-2.jpg" width="500" height="500" layout="responsive" on="tap:gallery-lightbox" role="button" tabindex="0">
</amp-img>
</amp-carousel>
...
</div>

語法解釋:

語法 說明
[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]="product.selectedProducts != '1001'">
<li>
<amp-img
on="tap:AMP.setState({product: {selectedSlideFor1001: 0}})"
src="images/img1001-1.jpg"
width="60" height="60"
class="selected"
[class]="product.selectedSlideFor1001 == 0 ? 'selected' : '' "
tabindex="0"
role="button">
</amp-img>
</li>
<li>
<amp-img
on="tap:AMP.setState({product: {selectedSlideFor1001: 1}})"
src="images/img1001-2.jpg"
width="60" height="60"
class=""
[class]="product.selectedSlideFor1001 == 1 ? 'selected' : '' "
tabindex="0"
role="button">
</amp-img>
</li>
<li>
<amp-img
on="tap:AMP.setState({product: {selectedSlideFor1001: 2}})"
src="images/img1001-3.jpg"
width="60" height="60"
class=""
[class]="product.selectedSlideFor1001 == 2 ? 'selected' : '' "
tabindex="0"
role="button">
</amp-img>
</li>
</ul>

<ul hidden [hidden]="product.selectedProducts != '1002'">
<li>
<amp-img
on="tap:AMP.setState({product: {selectedSlideFor1002: 0}})"
src="images/img1002-1.jpg"
width="60" height="60"
class=""
[class]="product.selectedSlideFor1002 == 0 ? 'selected ' : '' "
tabindex="0"
role="button">
</amp-img>
</li>
<li>
<amp-img
on="tap:AMP.setState({product: {selectedSlideFor1002: 1}})"
src="images/img1002-2.jpg"
width="60" height="60"
class=""
[class]="product.selectedSlideFor1002 == 1 ? 'selected' : '' "
tabindex="0"
role="button">
</amp-img>
</li>
</ul>
...
</div>

語法 說明
[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 沒有出現的群組區塊就先隱藏


完成! 測試看看!!

查看完整範例


參考: amp-bind  輪播圖片切換

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

更多文章:

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