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 数据中将 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，它将覆盖内联配置。

建议使用带内联 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 验证器 中的验证规则。