Я пытаюсь отобразить цветные поля рядом с элементами, основанными на элементах. Тем не менее, это дало мне странные результаты в моем массиве. Да, я знаю, что в жидкости нет настоящих массивов. У меня есть два варианта ниже. Первый не работает. Это дает мне такие вещи, как "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>