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 {字串} 必填

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

自訂

自訂圖示

購物標籤圖示預設會呈現。您可以透過在關聯產品的 JSON 資料中將 productIcon 值指定為 jpg 或 png 的 URL，以自訂圖示取代預設購物標籤圖示。建議的圖片大小為 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 設定的 URL。定義後，它會覆寫內嵌 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 驗證器 中的驗證規則。