Shopify - условно использовать вариантное изображение в качестве миниатюры, если доступно

Есть ли способ использовать вариант изображения в качестве эскиза, если он доступен? Например, у меня есть продукт в черном, синем и красном цветах, и я успешно связываю их с определенным изображением. Как мне получить эти изображения как элемент списка и использовать только стандартное избранное изображение, если цветовой вариант недоступен? Вот сценарий помощи:

{% if variant color is available %}
    <ul class="variantimage-on">
        <li>Black Image</li>
        <li>Blue Image</li>
        <li>Red Image</li>
    </ul>
{% else %}
    <ul class="variantimage-off">
        <li><img src="{{ product.images.first | product_img_url: 'grande' }}" alt="{{ product.title }}" /></li>
    </ul>
{% endif %}

shopify liquid
person Biyan    schedule 18.08.2016    source источник
comment
Вы имеете в виду, если он выбран? Или просто, если он доступен, вы показываете изображение, а если нет, вы его скрываете?   -  person Juan Ferreras    schedule 19.08.2016
comment
Я хочу отображать вариантное изображение только в том случае, если продукт содержит вариант цвета, в противном случае отображается изображение по умолчанию.   -  person Biyan    schedule 17.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Хотели бы вы, чтобы это работало?

{% if product.options contains 'Color' %}
    <ul class="variantimage-on">
       {% for image in product.images %}
           {% for variant in image.variants %}
               <li><img src="{{variant.image.src | img_url: 'large'}}"
                        alt="{{variant.title}}"/></li>
           {% endfor %}
       {% endfor %}
    </ul>
{% else %}
    ...
{% endif %}

Если все ваши варианты заголовков начинаются с названия цвета, вы можете выполнить сортировку по заголовку (сгруппировать по цвету), а затем выполнить итерацию с помощью «если новый цвет». Замените самый внутренний цикл for следующим образом:

{% assign variants = image.variants | sort: 'title' %}
{% assign color = "" %}
{% for variant in variants %}
    {% assign words = variant.title | split: ' ' %}
    {% if color != words[0] | downcase %}
         {% assign color = words[0] | downcase %}
         <li><img src="{{variant.image.src | img_url: 'large'}}"
                  alt="{{variant.title}}"/></li>
    {% endif %}
{% endfor %}
person jrbedard    schedule 14.09.2016
comment
{{image.src}} не возвращает полный URL-адрес изображения, но замена его на {{ variant.image.src | img_url: 'large' }} устраняет проблему. Другая проблема заключается в том, что у меня есть 2 варианта варианта (цвет и размер), прямо сейчас он просматривается и отображает каждый вариант. Например, красный 4 'x 6', синий 4 'x 8' и т. Д. Как избежать дублирования цветов и только прокручивать вариант цвета? - person Biyan; 16.09.2016
comment
Обновленный код. Оператор if в variant.option1 и variant.option2 всегда будет одинаковым на variant итерации. - person jrbedard; 16.09.2016
comment
Что насчет того, чтобы сделать что-нибудь с {% if variant.title contains "..." %}? - person jrbedard; 16.09.2016
comment
Я добавил код, чтобы понять, как выбирать по цвету. - person jrbedard; 18.09.2016