在 shopify 液体中使用“字符串”作为“数组”

Question

我正在尝试根据项目变体在项目旁边显示颜色框。然而，它在我的数组中给了我奇怪的结果。是的，我知道液体中没有真正的阵列。我在下面有两个选择。第一个不起作用。它给了我诸如“背景颜色：['''''''”之类的东西。连同所有正确的。

所以第二个选项我只是硬编码所有颜色并检查。只要颜色有序，这就会起作用......但如果颜色不有序，它将显示重复。

刚接触液体，但这看起来超级难看，可能意味着我做错了。

    <div class="color-box-wrapper">
        {% assign values = '' %}
        {% for variant in product.variants %}
        {% assign value = variant.option2%}
        {% unless values contains value %}

        {% assign values = values | append: ',' | append: value %}
        {% assign values = values | split: ',' %}

        {% for color in values %}
        {% if color.size > 0%}

        <div class="product-color-box" style="background-color:{{color}}"></div>

        {% endif %}
        {% endfor %}
        {% endunless %}
        {% endfor %}

    </div>

这种方式有点工作，但看起来很老套。

 <div class="color-box-wrapper">
        {% assign realColors = 'yellow, blue, white, burgandy, black, red, green, purple, beige, light_brown' | split: ", "%}
        {% assign values = '' %}
        {% for variant in product.variants %}
        {% assign value = variant.option2 | downcase%}
        {% unless values contains value %}

        {% assign values = values | append: ',' | append: value %}
        {% assign values = values | split: ',' %}

        {% for color in values %}
        {% if realColors contains color %}

        <div class="product-color-box" style="background-color:{{color}}"></div>

        {% endif %}
        {% endfor %}
        {% endunless %}
        {% endfor %}

    </div>

Answer 1

使用product.options_with_values 字段可能会更好，如下所示：

{% assign color_option = product.options_with_values | where: 'name', 'color' | first %}
<h1>Color option is in position {{ color_option.position }}!</h1>
<h2>Array of all values is: {{ color_option.values | json }}</h2>


{% for value in color_option %}
  <h3>Gimmie a {{ value }}!! {% if value == color_option.selected_value %}(Selected){% endif %}</h3>
{% endfor %}

如果您的颜色不是 CSS 可识别的颜色名称，这会有点棘手，但您当然可以为此做很多事情。我通常更喜欢添加一个 CSS 层，可以将颜色值转换为适当的显示值（背景图像或颜色十六进制代码）。一些想法是：

• 向您的元素添加数据属性或类（通常使用| handle 过滤器来标准化输出）并使用 CSS 表适当地分配背景图像或颜色
• 创建一个包含块的部分，允许您将颜色值映射到十六进制代码。如果您是为自己以外的人创建这个，它可以让商家自己设置颜色并微调所有色调。
• 在您的产品上使用元字段，这些元字段可以使用选项作为查找来生成正确的颜色代码。 （例如：如果您在 product.metafields.colors 的产品上创建元字段命名空间，并使用颜色名称作为键和十六进制代码作为值，则可以输出 {{ product.metafields.colors[value] }} 以获得正确的计算机颜色。（这通常需要安装要管理的应用程序 - 尽管元字段本身是 Shopify 的原生功能，但 Shopify 没有任何原生方式在管理员中设置它们）

希望这会有所帮助！

---

参考资料：

Shopify Liquid 参考 - 产品对象：https://help.shopify.com/en/themes/liquid/objects/product#product-options_with_values

Shopify Liquid 参考 - 产品选项对象（来自 options_with_values）：https://help.shopify.com/en/themes/liquid/objects/product_option