时间戳

首页 > 解决方案 > 在 shopify 液体中使用“字符串”作为“数组”

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

问题描述

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

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

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

    <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>

标签： shopifyliquid

解决方案

使用该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

推荐阅读