AMP
繁體中文
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 簡體中文 Polski Tiếng việt

提升互動性

入門程式碼提供相當基本的使用者體驗。我們可以透過幾種方式來改善

  • 新增一個指示器，顯示目前的投影片和投影片總數。
  • 當使用者選取不同的襯衫顏色時，變更圖片輪播，以顯示所選顏色的襯衫圖片。

在推出 amp-bind 元件之前，新增這類功能是不可能的。讓我們親身體驗 amp-bind，並將這些新功能新增至我們的範例程式碼！

安裝 amp-bind 元件

amp-bind 是一個 AMP 元件，透過資料繫結和類似 JS 的運算式來提供自訂互動性。若要使用 amp-bind，您必須將其安裝在網頁中。

開啟 static/index.html 檔案，並將下列指令碼新增至網頁 <head> 區段中 AMP 元件的清單

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

新增投影片指示器

amp-bind 的運作方式是將元素屬性繫結至自訂運算式。這些運算式可以參照「狀態」(可變 JSON 資料)。我們可以透過 <amp-state> 元件 (隨附於 amp-bind) 初始化此狀態。

初始化投影片狀態

讓我們初始化一個狀態變數，以追蹤圖片輪播中目前顯示的投影片索引。開啟 static/index.html，並將下列程式碼新增至網頁的 <body> 頂端 (<header> 之前)

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0
    }
  </script>
</amp-state>

您可以透過與 <amp-state> 元素相關聯的 ID 存取其中的資料。例如，我們可以透過下列運算式片段參照此變數

selected.slide // Evaluates to 0.

更新投影片狀態

接下來，當使用者變更輪播中的投影片時，讓我們更新此變數，方法是將下列 "on" 動作新增至現有的 amp-carousel 元素

<amp-carousel type="slides" layout="fixed-height" height=250 id="carousel"
    on="slideChange:AMP.setState({selected: {slide: event.index}})">

現在，每當 amp-carousel 的顯示投影片變更時，就會使用下列引數呼叫 AMP.setState 動作

{
  selected: {
    slide: event.index
  }
}

event.index 運算式評估為新的投影片索引，而 AMP.setState() 動作會將此物件常值合併至目前的狀態。這會將 selected.slide 的目前值取代為 event.index 的值。

提示 – AMP.setState() 會對巢狀物件常值執行深度合併。如需更多詳細資料，請參閱 amp-bind 文件。

繫結指示器元素

接下來，讓我們運用追蹤目前顯示投影片的狀態變數，並建立投影片指示器。找出投影片指示器元素 (尋找 <!-- TODO: "Add a slide indicator" -->)，並將下列繫結新增至其子項

<!-- TODO: "Add a slide indicator" -->
<p class="dots">
  <!-- The <span> element corresponding to the current displayed slide
       will have the 'current' CSS class. -->
  <span [class]="selected.slide == 0 ? 'current' : ''" class="current"></span>
  <span [class]="selected.slide == 1 ? 'current' : ''"></span>
  <span [class]="selected.slide == 2 ? 'current' : ''"></span>
</p>

[class] 是一個繫結，可變更 class 屬性，您可以使用它來新增或移除任何元素的 CSS 類別。

親自試試看：重新整理網頁並變更投影片！

藉由變更輪播中的投影片，它會

  1. 觸發 slideChange 事件 ...
  2. 呼叫 AMP.setState 動作 ...
  3. 更新狀態變數 selected.slide ...
  4. 更新指示器 <span> 元素上的 [class] 繫結！

太棒了！現在我們有了可運作的投影片指示器。

看看您是否可以新增功能，讓使用者輕觸投影片的指示點時，它會使用選取的項目更新圖片輪播。提示：在 amp-carousel 上使用 tap 事件和 [slide] 繫結。

如果我們可以在變更選取的顏色時看到不同襯衫顏色的圖片，那就太好了。透過 amp-bind，我們可以藉由繫結 amp-carousel 內 amp-img 元素上的 [src] 來做到這一點。

初始化 SKU 狀態

首先，我們需要使用每種顏色襯衫的圖片來源網址來初始化狀態資料。讓我們使用新的 <amp-state> 元素來執行此操作

<!-- Available shirts. Maps unique string identifier to color and image URL string. -->
<amp-state id="shirts">
  <script type="application/json">
    {
      "1001": {
        "color": "black",
        "image": "./shirts/black.jpg"
      },
      "1002": {
        "color": "blue",
        "image": "./shirts/blue.jpg"
      },
      "1010": {
        "color": "brown",
        "image": "./shirts/brown.jpg"
      },
      "1014": {
        "color": "dark green",
        "image": "./shirts/dark-green.jpg"
      },
      "1015": {
        "color": "gray",
        "image": "./shirts/gray.jpg"
      },
      "1016": {
        "color": "light gray",
        "image": "./shirts/light-gray.jpg"
      },
      "1021": {
        "color": "navy",
        "image": "./shirts/navy.jpg"
      },
      "1030": {
        "color": "wine",
        "image": "./shirts/wine.jpg"
      }
    }
  </script>
</amp-state>

此 <amp-state> 元素包含一個 JSON 物件，該物件將襯衫識別字串 (即 SKU) 對應至對應襯衫的顏色和圖片網址。JSON 陣列在這裡也適用，但使用物件可讓我們執行更多很酷的功能，您很快就會看到。

現在我們可以透過襯衫的識別碼存取圖片網址。例如，shirts['10014'].color 評估為 "dark green"，而 shirts['10030'].image 則傳回 "wine" 襯衫顏色的圖片網址。

追蹤選取的 SKU

如果我們新增另一個追蹤選取 SKU 的狀態變數，我們可以將運算式繫結至 amp-img 元素，以便在選取的 SKU 變更時更新其 src 屬性。將新的 sku 金鑰新增至現有的 amp-state#selected 元素的 JSON

<amp-state id="selected">
  <script type="application/json">
    {
      "slide": 0,
      "sku": "1001"
    }
  </script>
</amp-state>

更新 SKU 狀態

將 "on" 動作新增至 amp-selector，每當選取新顏色時，就會更新 selected.sku 變數

<amp-selector name="color"
    on="select:AMP.setState({selected: {sku: event.targetOption}})">

提示 – 這也可以透過將 on="tap:AMP.setState(...) 動作新增至 amp-selector 內部的每個 amp-img 子項來完成。關於 amp-selector 最棒的事情之一是，它以這種方式簡化了標記。

繫結圖片元素

然後，將繫結新增至 amp-img

<!-- Update the `src` of each <amp-img> when the `selected.sku` variable changes. -->
<amp-img width=200 height=250 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=300 height=375 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>
<amp-img width=400 height=500 src="./shirts/black.jpg"
    [src]="shirts[selected.sku].image"></amp-img>

注意 – 實際上，輪播中的每張圖片可能都有不同的 src。這可以透過將單一圖片取代為圖片陣列來完成。為了簡單起見，本教學課程使用不同放大倍率的單一圖片。

親自試試看：重新整理網頁並為襯衫選取不同的顏色。當您執行此操作時，輪播的圖片會更新，以顯示所選顏色的襯衫。

上一章 下一章