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 的网址作为 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 配置的网址。 定义后，它将覆盖内联 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 验证器 中的验证规则。