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 驗證器中的驗證規則。