Shopify Liquid：如何筛选指定颜色产品变体并获取其属性？

原代码错误原因 #

你用join和split处理变体对象的方式完全错误。Liquid中，当你把variant对象用join转成字符串时，它会变成ProductVariantDrop这个标识字符串，再split得到的只是一堆字符串，根本不是变体对象，自然无法访问title这类属性。

方案1：修正Liquid代码（无需Jekyll的push） #

Shopify Liquid支持用concat过滤器向数组添加元素，不用依赖Jekyll的push。修改后的代码如下：

{% assign blueVariants = '' | split: '' %} <!-- 初始化空数组 -->
{% for variant in product.variants %}
    {% assign colorValue = variant.options[1] %}
    {% if colorValue == 'BLUE' %}
        {% unless blueVariants contains variant %}
            {% assign blueVariants = blueVariants | concat: [variant] %}
        {% endunless %}
    {% endif %}
{% endfor %}

{% for variantBlue in blueVariants %}
    <script>
        console.log("{{ variantBlue.title }}"); <!-- 可正常输出标题 -->
        console.log("{{ variantBlue.available }}"); <!-- 输出是否可用 -->
    </script>
{% endfor %}

方案2：用JavaScript筛选变体 #

如果Liquid层面处理有局限，直接把所有变体数据输出到JS数组，再用JS筛选更灵活：

<!-- 先把所有变体数据转成JS对象数组 -->
<script>
const allVariants = {{ product.variants | json }};
// 筛选蓝色变体
const blueVariants = allVariants.filter(variant => {
    // options[1]对应颜色，根据实际索引调整
    return variant.options[1] === 'BLUE';
});

// 遍历筛选后的变体，获取属性
blueVariants.forEach(variant => {
    console.log('标题:', variant.title);
    console.log('是否可用:', variant.available);
    // 还可获取价格、SKU等其他属性
    console.log('价格:', variant.price);
});
</script>

这种方法逻辑更直观，JS的数组操作也比Liquid灵活，适合复杂筛选场景。

内容的提问来源于stack exchange，提问作者liz14