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

Question

I am trying to display color boxes next to items based on item varients. However, it has been giving me weird results in my array. Yes I know there are no real arrays in liquid. I have two options below. The first one doesnt work. It gives me things like "background-color: [''''''' ". Along with all the correct ones too.

So the second option i just hard coded all the colors and checked against that. This works as long as the colors are in order... but if the colors are not in order than it will display duplicates.

New to liquid but this seems super ugly and probably means i am doing it wrong.

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

THIS WAY KINDA WORKS BUT SEEMS HACKY.

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

Dave B Dave B · Accepted Answer · 2020-01-07T21:09:10

It might work better to use the product.options_with_values field, something like this:

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

It's a bit trickier if your colours are not CSS-recognized colour names, but there are certainly a number of things you can do for that. I typically prefer adding a CSS layer that can translate colour values into the appropriate display values (either background images or colour hex-codes). Some ideas are:

Add a data attribute or a class to your element (usually using the | handle filter to standardize the output) and use a CSS sheet to assign background images or colours appropriately
Create a section with blocks that allows you to map colour values to hex codes. If you are creating this for someone other than yourself, it would allow the merchant to set up the colours themselves and fine-tune all the shades.
Use metafields on your product that can generate the correct colour code using the options as the lookup. (Eg: If you create a metafield namespace on your products of product.metafields.colors and use the colour names as the keys and hex codes as the values, you can output {{ product.metafields.colors[value] }} to get the right computer colour. (This generally requires installing an app to manage - though metafields themselves are native Shopify functionality, Shopify doesn't have any native way to set them in the admin)

Hope this helps!

References:

Shopify Liquid Reference - Product objects: https://help.shopify.com/en/themes/liquid/objects/product#product-options_with_values

Shopify Liquid Reference - Product Option objects (from options_with_values): https://help.shopify.com/en/themes/liquid/objects/product_option

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

1 Answers