• 网站

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-mustache 用于呈现 amp-list 数据的默认行为是在 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 中，您可以使用 Payments Requests API。 查看 付款示例，了解其工作原理。
• 使用 amp-form 在您的 AMP 页面内实现您的结帐流程。
• 将用户重定向到您网站上的结帐流程。 重要说明：使过渡尽可能无缝，特别是不要让用户两次输入相同的信息。

分析

请确保使用 amp-analytics 衡量用户如何与您的 AMP 页面互动。 重要说明：测试您的分析集成，并确保正确归因 AMP 流量，尤其是当 AMP 来自其他来源时。 对于测试，您可以通过 Google AMP 缓存加载您的 AMP。

• 作者： @sebastianbenz