在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 - Joe

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 %}