# 商品子款式

> 在 Shoplazza 主题中支持商品子款式：用 product 与 variant 对象构建选择器，并处理地址栏中的变体深链。

商品最多可以拆分为三个选项，这些选项的单一组合即为一个 variant。例如，如果一件 T 恤有 `S`、`M`、`L` 三种尺码以及 `Black`、`White`、`Red` 三种颜色，那么 `S/Black` 就是该商品的一个 variant。

本教程将介绍如何在您的 theme 中支持商品 variants。

## 资源

要支持商品 variants，您需要使用以下资源：

* [product object](/docs/theme/references/liquid/objects/product)
* [variant object](/docs/theme/references/liquid/objects/variant)

## 实现商品 variants

要在 theme 中支持 variants，您需要实现以下组件：

* [Variant 深度链接处理](./product-variants#variant-深度链接处理)
* [Variant 选择器](./product-variants#variant-选择器)

## Variant 深度链接处理

Variant 深度链接是包含 `?variant=[variant-id]` 查询参数的商品链接，其中 `[variant-id]` 是关联 variant 的 [ID](/docs/theme/references/liquid/objects/variant)。这样您可以直接链接到特定 variant。

您可以通过 [product object](/docs/theme/references/liquid/objects/product) 的 `selected_or_first_available_variant` 属性访问已选中、首个可用或第一个 variant。当 variant 通过深度链接访问时，`selected_or_first_available_variant` 属性将返回深度链接对应的 variant。

确定要显示的 variant 后，需要确保以下商品元素能反映该 variant：

* 商品价格
* Variant 选择器

### 示例

以下示例使用 `product.selected_or_first_available_variant` 分配默认 variant，基于该 variant 填充基本的媒体和价格显示，并在基本的 variant 选择器中选中该 variant。

```liquid
{% assign current_variant = product.selected_or_first_available_variant %}

<!-- 商品价格 -->
<div class="product-detail-price">
  <span>{{ current_variant.price | money }}</span>
  {% if current_variant.compare_at_price > current_variant.price %}
    <span><s>{{ current_variant.compare_at_price | money }}</s></span>
  {% endif %}
</div>

<!-- Variant 选择器 -->
<select name="product-variant">
  {% for variant in product.variants %}
    <option value="{{ variant.id }}" {% if variant == current_variant %}selected{% endif %}>
      {{ variant.title }} - {{ variant.price | money }}
    </option>
  {% endfor %}
</select>
```

## Variant 选择器

您可以使用单个 variant 选择器，其中每个选项代表一个 variant。但由于商品最多可有三个选项，您可能希望在 UI 中分别展示每个选项。为此，您可以将上一节描述的单个 variant 选择器设为隐藏的主选择器，并为每个选项单独添加一个选择器，然后使用 JavaScript 在某个选项选择器发生变化时更新主选择器。

:::note
无论使用何种 variant 选择方式，都需要确保在选择新 variant 时更新商品价格以反映该 variant。
:::

您可以用 JavaScript 构建自己的 variant 选择功能。