在 shopify liquid 中使用 'strings' 作为 'arrays'

Question

我正在尝试根据项目变体在项目旁边显示颜色框。但是，它一直在我的阵列中给我奇怪的结果。是的，我知道液体中没有真正的阵列。我在下面有两个选择。第一个不起作用。它给了我 "background-color: [''''''' " 之类的东西。以及所有正确的。

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

液体的新手，但这看起来超级难看，可能意味着我做错了。

    <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 层，可以将颜色值转换为适当的显示值（背景图像或颜色十六进制代码）。一些想法是：

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

希望对您有所帮助！

参考文献：

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

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

在 shopify liquid 中使用 'strings' 作为 'arrays'

working with 'strings' as 'arrays' in shopify liquid

liquid

shopify