在 Shopify 中获取一种变体

Question

我的产品有 2 种款式，尺寸和颜色。我想将尺寸选项显示为一系列按钮。这是我当前的代码：

{% for variant in product.variants %}
  <input type="button" name="{{ variant.id }}" id="{{ variant.id }}" value="{{ variant.title }}">
{% endfor %}

这将返回具有 S/White、M/White、L/White 等值的按钮。我只想要 S、M 和 L。从文档中的示例代码中提取，我已经尝试过

{% for variant in product.variants.size %}

和

{% for variant in product.variants.first %}

但显然这不是正确的语法，因为没有任何输出。

这样做的正确方法是什么？

TIA - 乔

Answer 1

变体最多包含 3 个选项。在您的情况下，variant.option1 会给您尺寸（S/M/L），variant.option2 是颜色。您还可以使用product.options 获取选项的标题。 See the doco here 了解有关变体的更多信息。

另外，您是否看过 this tutorial 向产品页面添加色板和按钮？也许一些用于创建按钮的代码可以帮助您入门。

编辑：

按照上面提到的教程，你可以像这样获得尺寸选项的按钮：

将此代码放在</select>下方的product.liquid中：

{% if product.available and product.variants.size > 1 %}
  {% include 'swatch' with 'Size' %}
{% endif %}

如果您还需要颜色选项按钮（而不是色板），请在 product.liquid 中使用此代码：

{% if product.available and product.variants.size > 1 %}
  {% for option in product.options %}
    {% include 'swatch' with option %}
  {% endfor %}
{% endif %}

并从 swatch.liquid 中删除这些行（第 30 行）：

{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
  {% assign is_color = true %}
{% endif %}