amp-story-shopping

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

使用 amp-story-shopping 在 amp-story 中建立可設定的範本化購物體驗。

amp-story-shopping 在文件中使用其兩個自訂元素 amp-story-shopping-attachment 和 amp-story-shopping-tag 定義。

透過為 amp-story-page 上的每個產品定義一個 amp-story-shopping-attachment 和一或多個 amp-story-shopping-tag 元素，即可指定購物體驗。

amp-story-shopping-tag

使用 amp-story-shopping-tag 元素來指示 amp-story-page 內可購物的元素。

輕觸這些元素會開啟 產品詳細資料頁面 (PDP)，位於 amp-story-shopping-attachment 內。

它們必須是 amp-story-grid-layer 的子項。

它們的位置是 absolute。使用自訂 CSS，透過以百分比為單位的 top 和 left 將它們放置在頁面上，以實現回應式版面配置。

...
<style amp-custom>
  [data-product-id="product1"] {
    top: 30%;
    left: 30%;
  }
</style>
...
<amp-story-grid-layer template="vertical">
  <amp-story-shopping-tag data-product-id="product1"></amp-story-shopping-tag>
</amp-story-grid-layer>

定位 amp-story-shopping-tag 並測試回應式的範例

amp-story-shopping-tag 屬性

data-product-id {string} 必要

將 amp-story-shopping-tag 與產品資料建立關聯。必須等於相關產品 JSON 資料的 productId 值。

自訂

自訂圖示

購物標籤圖示預設會呈現。您可以透過在相關產品的 JSON 資料中將 productIcon 值指定為 jpg 或 png 的網址，以自訂圖示取代預設購物標籤圖示。建議圖片大小為 48 x 48 像素；

自訂文字

商品的價格預設會呈現。您可以透過在相關產品的 JSON 資料中定義 productTagText，以自訂文字取代預設文字。最多會顯示兩行。如果文字太長，則會顯示省略符號。

圖表示範產品 JSON 如何在 amp-story-shopping-tag 內呈現

amp-story-shopping-attachment

amp-story-shopping-attachment 會呈現一個可輕觸的 CTA 按鈕，文字為「立即選購」，可開啟內嵌購物體驗。必須設定產品 JSON 資料，且同一頁面上必須至少有一個 amp-story-shopping-tag。

產品 JSON 設定

產品 JSON 會以内嵌方式設定為子指令碼標籤。選填的 src 屬性會在轉譯時從端點擷取資料。如果定義了 src，則會覆寫內嵌設定。

建議將 src 與內嵌 JSON 作為備用方案搭配使用。內嵌資料可能會從快取提供，這可能需要一些時間才能傳播。src JSON 會在轉譯時擷取，確保它是最新的。

{
   items: [
      {
         productUrl: "...", // Required. String. Links to the products website.
         productId: "..." // Required. Keys to amp-story-shopping-tag nodes.
         productBrand: "...", // Optional. String.
         productIcon: "...", // Optional. Links to an image. Defaults to a shopping bag icon.
         productTitle: "...", // Required. String.
         productPrice: 100, // Required. Number.
         productPriceCurrency: "..." // Required. String. ISO 4217 currency code used to display the correct currency symbol.
         productImages: [ // Required. Must have at least one entry. Array of objects.
            {
               url: "..." // Required. String.
               altText: "..." // Required. String.
            }
         ],
         productDetails: "...", // Required. String.
         aggregateRating: { // Optional. All sub fields are required if defined.
            "ratingValue": 4.4, // Required. Number.
            "reviewCount": 89, // Required. Number.
            "reviewUrl": // Required. String. Links to page where user can read reviews.
         }
      }
   ]
}

產品 JSON 結構描述

請參閱 product.schema.json 中的產品 JSON 驗證結構描述。如果一或多個購物標籤的驗證失敗，則會顯示錯誤訊息，且與有錯誤的產品相關聯的標籤和產品詳細資料/列表將不會呈現。驗證是使用預設 ajv JSON 結構描述草稿透過 ajv 執行。

amp-story-shopping-attachment 屬性

src {string} 選填

遠端產品 JSON 設定的網址。定義後，會覆寫內嵌 JSON 設定。

theme {string} 選填

設定 CTA 按鈕和抽屜的顏色。接受「light」（預設）和「dark」值。

cta-text {string} 選填

自訂呼籲性用語按鈕文字的字串。預設值為「立即選購」。

amp-story-shopping-attachment 範本

範本化頁面有兩種型別會在購物附件中呈現。它們會自動填入已設定 JSON 中的產品資料。產品列表頁面 (PLP) 是作用中 story 頁面上所有產品的列表。產品詳細資料頁面 (PDP) 顯示產品的深入詳細資料，例如圖片、文字和「立即購買」按鈕。

產品列表頁面 (PLP)

PLP 範本會呈現作用中 amp-story-page 上的產品列表。當設定購物體驗時，輕觸頁面底部自動顯示的「立即選購」CTA 按鈕即可開啟。頁面上必須至少有兩個相關聯的 amp-story-shopping-tag 元素，PLP 才會呈現。

圖表示範產品 JSON 如何在 PLP 範本內呈現

產品詳細資料頁面 (PDP)

PDP 範本會顯示產品的詳細資訊。輕觸 amp-story-shopping-tag 或 PLP 內的產品卡片將會開啟產品的 PDP。如果頁面上只有一個產品，則輕觸「立即選購」CTA 按鈕時，預設會呈現 PDP。

圖表示範產品 JSON 如何在 PDP 範本內呈現

驗證

請參閱 amp-story-shopping 驗證器 中的驗證規則。