• 网站

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

分析

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

• 作者： @sebastianbenz