Как разделить цветовую опцию продукта на две категории "Essentials" и "Limited Edition" на Shopify?

Question

Цвета должны отображаться как переключатели с цветом фона различных продуктов, перечисленных в en.default.json. Я хочу разделить цвета, отображаемые на странице продукта, как limited edition colors и essentials, как показано на веб-сайте Girlfriend

.

"colors": {
  "white": "FFFFFF",
  "black": "000000",
  "raw": "707070"
}

Ниже приведен код для принудительного выбора цветов из en.default.json в каталоге locales:

{% assign value_handle = value | handleize %}
{% assign color_translation_key = 'product.colors.' | append: value_handle %}
{% assign color_hex = color_translation_key | t %}

{% unless color_hex contains 'translation missing' %}
  <span class="option-color color-{{ value_handle }}">
    <span class="option-color-inner">
      <span class="color-swatch" style="background-color: {{ color_hex | prepend: '#' }};">

      </span>
      <span class="visually-hidden">
        {{ value }}
      </span>
    </span>
  </span>
{% else %}
  {{ value }}
{% endunless %}

Параметры цвета отображаются в виде переключателей на странице продукта, если у продукта есть параметр цвета:

{% for value in option.values %}
  {% assign radio_id = 'option-' | append: option_name | append: '-' | append: value | handleize %}
  <input class="variant-radio" id="{{ radio_id }}" type="radio" name="{{ option_name }}" value="{{ value }}" {% if value == selected %}checked{% endif %}>
  <label for="{{ radio_id }}">
    {% if force_colors == true %}
      {% include 'option-color' with color: value %}
    {% else %}
      {{ value }}
    {% endif %}
  </label>
{% endfor %}

Answer 1

Полагаю, вам просто нужно разделить цвета на две группы, но при этом разрешить выбирать только один цвет. Другими словами, вы хотите визуально отделить их. Если это так, вы можете создать переменную со списком цветов из одной группы, например, основные цвета:

{%- assign essential_colors = "Red,Green,Blue" | split: "," -%}

После этого продублируйте код, который используется для визуализации образцов цвета. Используйте исходный код только для отображения основных цветов, сопоставив заголовок параметра:

{% for value in option.values %}
  {%- if essential_colors contains value -%}
     ...code to render essential color swatches...
  {%- endif -%}
{% endfor %}

..., а затем используйте дублированный код для отображения других цветов:

{% for value in option.values %}
  {%- unless essential_colors contains value -%}
     ...code to render other color swatches...
  {%- endunless -%}
{% endfor %}