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 {string} 必需

将 amp-story-shopping-tag 与产品数据关联。必须等于关联产品的 JSON 数据的 productId 值。

自定义

自定义图标

默认情况下会渲染一个购物标签图标。您可以通过在关联产品的 JSON 数据中将 jpg 或 png 的 URL 指定为 productIcon 值，来将默认购物标签图标替换为自定义图标。建议的图像大小为 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，它将覆盖内联配置。

建议使用带有内联 JSON 作为后备的 src。内联数据可以从缓存中提供，这可能需要一些时间才能传播。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 配置的 URL。定义后，它将覆盖内联 JSON 配置。

theme {string} 可选

设置 CTA 按钮和抽屉的颜色。接受“light”（默认）和“dark”值。

cta-text {string} 可选

自定义行动号召按钮文本的字符串。默认为“立即购买”。

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