Javascript 如何将颜色的产品选项分为两类；“基本要素”；及；限量版；在Shopify上？

颜色应呈现为单选按钮，不同产品的背景色列在

en.default.json

中。我想将产品页面上显示的颜色分为

限量版颜色

和

必需品

，如女友网站上所示

以下是从

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

{%assign value_handle=value|handleize%}
{%assign color_translation_key='product.colors.| append:value_handle%}
{%assign color_hex=color_translation_key | t%}
{%除非颜色_十六进制包含“缺少翻译”%}
{{value}}
{%else%}
{{value}}
{%end除非%}

如果产品具有颜色选项，则颜色选项在产品页面中呈现为单选按钮：

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

{%for option.values%}
{%assign radio_id='option-'| append:option_name | append:'-'| append:value | handleize%}
{%if-force_colors==true%}
{%include'option color'和color:value%}
{%else%}
{{value}}
{%endif%}
{%endfor%}

我假设您只需要将颜色分成两组，但仍然只允许选择一种颜色。换句话说，您希望在视觉上将它们分开。如果是，您可以创建一个变量，其中包含一组颜色的列表，例如基本颜色：

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

---

你认为你会怎么做？您将如何确定哪些产品和颜色是有限的与必要的？刚刚接受它！对不起，我不知道我必须接受它，因为我是新的堆栈溢出-非常感谢！

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