在Shopify中获得一种变体 [英] Get one variant in Shopify

问题描述

我的产品有2种型号，尺寸和颜色.我想将尺寸选项显示为一系列按钮.这是我当前的代码:

My products have 2 variants, size and color. I want to display the size options as a series of buttons. Here's my current code:

{% 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.从文档中的示例代码中拉出，我已经尝试

This returns buttons with values like S/White, M/White, L/White, etc. I want just S, M and L. Pulling from of the example code in the docs, I've tried

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

和

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

但是显然这不是正确的语法，因为什么也没有输出.

but evidently that's not the right syntax as nothing is output.

正确的方法是什么?

TIA-乔

推荐答案

变量最多包含3个选项.就您而言，variant.option1将为您提供尺寸(S/M/L)，而variant.option2为颜色.您还可以使用product.options获取选项的标题. 在此处查看文档以获取有关变体的更多信息.

Variants contain up to 3 options. In your case, variant.option1 will give you the size (S/M/L) and variant.option2 is the colour. You can also get the titles of the options with product.options. See the doco here for more info on variants.

此外，您是否看到过

Also, have you seen this tutorial on adding colour swatches and buttons to a product page? Maybe some of the code for creating the buttons would help you get started.

通过遵循上述教程，您可以获取有关尺寸选项的按钮，如下所示:

By following the tutorial mentioned above, you can get buttons for the size options like this:

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

Put this code in product.liquid below </select>:

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

如果您还希望使用按钮作为颜色选项(而不是色板)，请在 product.liquid 中使用此代码:

If you also want buttons for the color option (and not swatches), use this code in product.liquid:

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

并从 swatch.liquid (第30行)中删除以下行:

And delete these lines from swatch.liquid (line 30):

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

这篇关于在Shopify中获得一种变体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！