颜色应呈现为单选按钮,不同产品的背景颜色在 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 %}
最佳答案
我假设您只需要将颜色分成两组,但仍然允许仅选择一种颜色。换句话说,您希望在视觉上将它们分开。如果是这样,您可以创建一个包含一组颜色列表的变量,例如基本颜色:
{%- 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 %}
关于javascript - 如何在 Shopify 上将产品颜色选项分为两个类别 "Essentials"和 "Limited Edition"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60815689/