Question

有没有办法将变体图像用作缩略图（如果可用）？例如，我有一个黑色，蓝色和红色的产品，并成功地将它们与特定图像相关联。如果颜色变量不可用，我如何将这些图像作为列表项目并仅使用标准特色图像？这是帮助的场景：

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

Answer 1

这样的事情对你有用吗？

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

如果您的所有变体标题都以颜色名称开头，您可以按标题排序（按颜色分组），然后使用“if new color”进行迭代。用这个替换最里面的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 %}

Shopify - 有条件地使用变体图像作为缩略图（如果可用）

1 个答案: