product​

product 模板渲染了商品详情页面，该页面包含了商品的媒体内容和详情，以及一个供客户选择商品款式并添加到购物车的表单。

位置​

products/detail 模板位于主题的 templates 目录中：

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── product.json
    |   ...
    ...

内容​

你应该在 product 模板或模板内的某个 section 中包含以下内容：

• product 对象
• product 表单，包括以下组件：
  • 款式选择器
  • 数量输入
  • 动态结账按钮

你可以选择性地在商品详情页面上显示商品推荐。

product 对象​

你可以访问 Handlebars product 对象来显示产品的详细信息。

product 表单​

product 表单是客户将商品款式添加到购物车的主要方式。你可以使用 product form helper 以及相应的 'product' 和 product 对象及自定义的表单 id 参数来添加商品表单：

  {{#form "product" product id="form-id"}}
    {{! form details }}
    <div class="wrapper">
      <input type="submit" value="Add to cart">
    </div>
  {{/form}}

在表单内，你需要以下内容：

• 款式选择器
• 数量输入
• 动态结账按钮

款式选择器​

款式选择器是一个含有 name="id" 属性的输入元素。它的值反映了要添加到购物车的款式 id。

通常，款式选择器是一个 <select> 元素，其中包含通过遍历所有商品款式而填充的 <option> 元素。你还可以使用 product 对象的 selected_or_first_available_variant 属性来默认选择一个款式，还可以根据款式的链接或可用性来默认选择款式：

<select name="id">
  {{#for product.variants as |variant|}}
    <option value="{{ variant.id }}"
      {{#if variant.id == product.selected_or_first_available_variant.id}}selected="selected"{{/if}}
    >
      {{ variant.title }} - {{ money variant.price }}
    </option>
  {{/for}}
</select>

数量输入​

你应该包含一个数量输入，以便客户选择他们要添加到购物车中的款式的数量。这个输入需要具有 name="quantity" 属性，并且值必须是大于 1 的整数：

<input type="text" name="quantity" min="1" value="1">

动态结账按钮​

你应该包含动态结账按钮，以便客户快速购买他们正在查看的商品。这些可以通过使用 payment_button Handlebars helper 来添加：

{{#form "product" product id="form-id"}}
  {{! form details }}
  <div class="wrapper">
    <input type="submit" value="Add to cart">
    {{payment_button}}
  </div>
{{/form}}

用法​

在使用 product 模板时，你应该熟悉以下内容：

• 购物车 AJAX API
• 显示商品推荐

购物车 AJAX API​

你可以使用购物车 API，这是 AJAX API 的一部分，允许客户将款式添加到购物车，之后不会重定向到购物车页面。

显示商品推荐​

你可以使用商品推荐 API，这也是 Ajax API 的一部分，向客户推销相关商品。要了解更多关于如何使用此 API 的信息，请参阅产品推荐的相关文档。