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 的 URL，来将默认购物标签图标替换为自定义图标。建议的图像尺寸为 48 x 48px；

自定义文本

默认情况下会呈现该项目的价格。您可以通过在关联产品的 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 架构

有关产品 JSON 验证的架构，请参阅 product.schema.json。如果一个或多个购物标签上的验证失败，将显示一条错误消息，并且与具有错误的商品相关的标签和商品详细信息/列表将不会呈现。使用默认的 ajv JSON 架构草案，使用 ajv 执行验证。

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 验证器中的验证规则。