Вземете един вариант в 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 %}

но очевидно това не е правилният синтаксис, тъй като нищо не се извежда.

Какъв е правилният начин да направите това?

TIA - Джо


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