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 內可購物的元素。

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

它們必須是 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 {字串} (必填)

將 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 和預設 ajv JSON 結構定義草稿來執行。

amp-story-shopping-attachment 屬性

src {字串} (選填)

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

theme {字串} (選填)

設定 CTA 按鈕和抽屜的顏色。接受「light」(淺色) (預設) 和「dark」(深色) 值。

cta-text {字串} (選填)

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

amp-story-shopping-attachment 範本

購物附件內會呈現兩種範本化頁面類型。它們會自動填入已設定的 JSON 中的產品資料。產品列表頁 (PLP) 是使用中故事頁面上所有產品的列表。產品詳細資料頁 (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 驗證器中的驗證規則。