Получите один вариант в Shopify

Мои продукты имеют 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 %}

но, очевидно, это неправильный синтаксис, поскольку ничего не выводится.

Как правильно это сделать?

ТИА - Джо


shopify variants
person Joe Lowery    schedule 18.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Варианты содержат до 3 вариантов. В вашем случае variant.option1 даст вам размер (S/M/L), а variant.option2 - цвет. Вы также можете получить названия опций с помощью product.options. Дополнительную информацию о вариантах см. здесь.

Кроме того, видели ли вы это руководство по добавлению образцов цвета и кнопок на страницу товара? Возможно, часть кода для создания кнопок поможет вам начать работу.

ИЗМЕНИТЬ:

Следуя упомянутому выше руководству, вы можете получить кнопки для параметров размера, например:

введите здесь описание изображения

Поместите этот код в product.liquid под </select>:

{% 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 %}
person Steph Sharp    schedule 19.06.2014
comment
Спасибо за ответ, Стеф, но я не могу интегрировать .option1 и получить желаемые результаты. Я пробовал <input type="button" name="{{ variant.option1.id }}" id="{{ variant.option1.id }}" value="{{ variant.option1.title }}"> и {% for variant in product.variants.option1 %}, но ни один из них не работал. Можете ли вы дать мне правильный синтаксис? И да, я знаком с этим учебником — он у меня работает; Я внимательно изучу код, чтобы увидеть, что я могу раскрыть. - person Joe Lowery; 19.06.2014
comment
@JoeLowery См. мое редактирование выше, чтобы узнать, как использовать учебник по образцам цвета, чтобы заставить кнопки работать. Это, наверное, самый простой способ сделать это. - person Steph Sharp; 20.06.2014
comment
Большое спасибо, Стеф. Извините за задержку с принятием вашего ответа. Это сработало отлично. - person Joe Lowery; 23.06.2014