product

product模板呈现产品页面，其中包含产品的媒体和内容，以及供客户选择变量并添加到购物车的表单。

提示
有关示例实现，请参阅Dawn中的产品模板及其主要分区。

位置

产品模板位于主题的模板目录中：

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

内容

您应在产品模板或模板中的一个分区包含以下内容：

产品对象

您可以访问 Liquid 产品对象以显示产品详情。

产品表单

产品表单是顾客将产品变量添加到购物车的主要方法。您可以使用 Liquid 表单标签和相应的 ‘product’ 参数：

{% form 'product' %}
  <!-- form content -->

  <input type="submit" value="Add to cart">
{% endform %}

提示
如果需要在表单中添加自定义属性，如class或 ID，则可以修改表单的默认属性。

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

变量选择器

变量选择器是一个带有属性name=”id”的输入元素。其值反映了要添加到购物车的变量的variant ID。
通常，变量选择器是一个元素，其通过循环遍历所有产品的变量来填充。您还可以根据产品对象的selected_or_first_available_variant属性，默认选择一个变量：

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

提示
上面的示例是变量选择器的最基本方法。变量可以有多达三个单独的选项，因此通常做法是有一个类似上面的隐藏主选择器，一个用于每个选项的选择器，并使用JavaScript在选项选择器更改时更新主选择器。

数量输入

您应该加入一个数量输入，以便客户选择要添加到购物车的变量的数量。此输入的属性必须是 name=”quantity”，值必须是大于 1 的整数：

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

动态结账按钮

您应该包括动态结账按钮，以便客户可以快速购买他们正在查看的产品。您可以使用 payment_button 添加这些按钮：

{% form 'product' %}
  <!-- form content -->

  <input type="submit" value="Add to cart">
  {{ form | payment_button }}
{% endform %}

行项目属性

您可以通过使用行项目属性为添加到购物车的变量产品提供包含附加信息的选项。您可以使用行项目属性来启用客户定制订单或提供补充信息。例如，您可以获取产品需要雕刻的文字，或让客户上传文件。

这些属性通过带有属性 name=”properties[property-name]” 的input元素来获取，其中 property-name 是您自定义属性的名称。任何属性输入都需要包含在产品表单内：

{% form 'product' %}
  <!-- form content -->

  <input type="text" name="properties[Monogram]">
  <input type="submit" value="Add to cart">
{% endform %}

提示
要了解如何显示购物车中收集的任何行项目属性，请参阅购物车模板中的行项目属性。

应用

使用产品模板时，应熟悉以下内容：

购物车 AJAX API

您可以使用购物车 API，它是 AJAX API 的一部分，允许顾客在添加商品变量到购物车后无需将其重定向到购物车页面。

显示产品推荐

您可以使用产品推荐 API，它是 Ajax API 的一部分，用于在相关产品上向顾客推销。要了解更多关于如何使用此 API 的信息，请参阅产品推荐。

原文链接：https://shopify.dev/docs/themes/architecture/templates/product

位置

内容