• 网站

AMP 电子商务入门

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

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

产品页面

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

这些示例可帮助您开始使用 AMP 构建产品着陆页： - 产品图库：使用 amp-carousel 和 amp-bind 可以轻松创建复杂的图像图库。这里有一些关于如何在 AMPHTML 中实现带有标题和缩略图的图像图库的示例。- 产品配置：使用 amp-selector 和 amp-bind 进行高级产品配置。有关高级版本，请参见示例产品页面。- 添加到购物车：产品示例演示了一个功能齐全的跨不同来源的添加到购物车流程。- 选项卡：可以通过将 amp-selector 与弹性布局相结合轻松实现。这里是一个示例。- 星级评分：这里是一个演示如何在 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-list 返回 amp-carousel 的内容。用于呈现 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>

最佳实践：使用多个 amp-list 实例和一个共享的 JSON 端点，以受益于 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 中，您可以使用付款请求 API。查看付款示例，了解其工作原理。
• 使用 amp-form 在您的 AMP 页面内实现结账流程。
• 将用户重定向到您网站上的结账流程。重要提示：尽可能使过渡无缝，尤其不要让用户两次输入相同的信息。

分析

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

• 作者 @sebastianbenz