• 网站

AMP 电子商务入门

以下是使用 AMP 创建电子商务网页的快速入门指南。本指南提供涵盖以下主题的示例和技巧

• 如何构建产品页面
• 如何构建产品类别页面
• 处理 AMP 中的动态内容
• 个性化 AMP 并支持登录
• 结账和付款
• 分析

产品页面

使用 AMP 可以创建美观且交互式的产品页面。此示例演示了如何构建具有动态产品配置和添加到购物车流程的复杂产品页面。随着 amp-bind 的引入，现在可以创建真正交互式的 AMP 页面：它可以用来协调基于用户交互的页面状态，以显示和隐藏任意 div。

这些示例可帮助您开始使用 AMP 构建产品着陆页： - 产品图库： 使用 amp-carousel 和 amp-bind 可以轻松创建复杂的图像图库。此处是一些如何在 AMPHTML 中实现带有标题和缩略图的图像图库的示例。 - 产品配置： 使用 amp-selector 和 amp-bind 进行高级产品配置。有关高级版本，请参阅示例产品页面。 - 添加到购物车：产品示例演示了跨不同来源工作的全功能添加到购物车流程。 - 标签： 可以通过将 amp-selector 与 flex 布局相结合来轻松实现。 此处是一个示例。 - 星级评分： 此处是一个演示如何在 AMP 中实现星级评分系统的示例。 - 通话跟踪： 使用 amp-call-tracking 来跟踪从您的 AMP 发起的通话。 - 评论/评价： 可以使用 amp-form 实现评论或评价提交。如果需要用户登录，请与 amp-access 结合使用。此处是一个结合两者的示例。

产品类别页面

作为用户常用的着陆页，产品类别页面非常适合 AMP。它们通常是编辑内容和产品英雄式展示的混合体。此处是一个产品页面的工作示例，演示了类别页面的常见功能，例如产品列表或搜索。

可以使用 AMP 创建类别页面

• 产品搜索： 使用 amp-form 来实现搜索表单。您可以在不同的页面（可能不是 AMP）上提供搜索结果，或者更好的是，直接在当前页面中呈现搜索结果。请参阅 自动建议的示例。
• 产品筛选和排序：请参阅客户端筛选的示例。

动态内容

AMP 可以从不同来源的 AMP 缓存中提供，例如，在 Google 搜索结果中提供时。这使得在实施 AMP 时必须考虑 AMP 缓存的缓存策略

如果用户绝不看到过时数据或者数据绝不旧于 15 秒至关重要，则需要采取其他步骤。产品定价或可用性是这种情况的典型示例。为了确保用户始终看到最新内容，您可以使用 amp-list 组件，该组件将直接从您的服务器获取并呈现内容。

这是一个如何使用 amp-list 呈现产品名称和价格的示例

<amp-list height="24" layout="fixed-height" src="/static/samples/json/product.json" binding="no">
  <template type="amp-mustache">
    {{name}}: ${{price}}
  </template>
</amp-list>

显示个性化内容

电子商务网站通常会在轮播中显示个性化内容或推荐。一种实现方法是使用返回 amp-carousel 内容的 amp-list。用于呈现 amp-list 数据的 amp-mustache 默认行为是在 items 对象内循环；在模板内添加 amp-carousel 会使模板呈现多个轮播；一种解决此问题的方法是让 amp-list 端点在 items 中返回单个条目，如下所示

{"items": [{
  "values": [/*...*/]

<amp-list width="auto" height="400" layout="fixed-height" src="/static/samples/json/product-single-item.json" binding="no">
  <template type="amp-mustache">
    <amp-carousel height="400" layout="fixed-height" type="carousel">
      {{#values}}
        <amp-img src="{{img}}" layout="fixed" width="400" height="400" alt="{{name}}"></amp-img>
      {{/values}}
    </amp-carousel>
  </template>
</amp-list>

最佳实践： 使用具有单个共享 JSON 端点的多个 amp-list 实例，以从 AMP 运行时的请求缓存中获益，并避免对该 JSON 端点进行多个请求。

另一种方法是将 amp-bind 与 JSON 端点一起使用。如果用户交互后需要提供最新数据，这将非常有效，例如，当用户选择特定日期时，酒店页面会显示房间可用性。

<amp-state id="products" src="/static/samples/json/products.json"></amp-state>
<amp-img on="tap:AMP.setState({ productId: 0})" src="/static/samples/img/red_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 1})" src="/static/samples/img/green_apple_1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<amp-img on="tap:AMP.setState({ productId: 2})" src="/static/samples/img/product1_alt1_60x40.jpg" width="60" height="40" role="button" tabindex="0">
</amp-img>
<div [text]="products[productId] + ' available'">Please select a product</div>

个性化和登录

在 AMP 中提供个性化内容的简单方法是使用 amp-list。您可以使用 Cookie（使用属性 credentials="include"）或 AMP 的 客户端 ID

<amp-list credentials="include" height="24" layout="fixed-height" src="/static/samples/json/product.json?clientId=CLIENT_ID(myCookieId)" binding="no" class="m1">
  <template type="amp-mustache">
    Your personal offer: ${{price}}
  </template>
</amp-list>

最佳实践： 使用 amp-list 进行个性化时，请确保配置 AMP CORS 标头。

如果您依赖于已登录的用户，可以使用 amp-access 组件直接从 AMP 页面将用户登录到您的网站。查看 此示例，了解如何在 AMP 中实现登录流程。

结账流程和付款

为了避免用户感到沮丧，请使用户能够直接从您的 AMP 页面内发起结账。以下是在 AMP 页面中处理结账的三种方法

• 在 Chrome 中，您可以使用 Payments Requests API。查看付款示例，了解其工作原理。
• 使用 amp-form 在您的 AMP 页面内实现结账流程。
• 将用户重定向到您网站上的结账流程。重要提示：尽可能实现无缝过渡，特别是，不要让用户两次输入相同的信息。

分析

请务必使用 amp-analytics 来衡量用户与您的 AMP 页面的互动情况。重要提示：测试您的分析集成，并确保 AMP 流量得到正确归因，特别是当 AMP 来自不同的来源时。对于测试，您可以通过 Google AMP 缓存加载您的 AMP。

• 作者： @sebastianbenz