javascript - 如何在 Shopify 上将产品颜色选项分为两个类别 "Essentials"和 "Limited Edition"？

Question

颜色应呈现为单选按钮，不同产品的背景颜色在 en.default.json 中列出。我想将产品页面上显示的颜色分开为 限量版颜色 和 essentials，如 Girlfriend 网站上所示

.

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

以下是从 locales 目录中的 en.default.json 强制使用颜色的代码:

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