在 Shopify 上选择的颜色变体的显示名称

Question

在this page 上，我有一些样本在选择时不会显示变体名称。 基本上，我需要在变体样本下添加一个段落文本，指示所选变体的名称......

我不擅长 javascript，在网上我没有找到任何完整的指南

非常感谢您的帮助！

Answer 1

这看起来像是我以前见过的主题。如果我没记错的话，该主题使用一个名为swatch.liquid 的文件来制作这些色环。我正在使用我手头的样本文件版本编写此答案，因此特定代码可能与您的主题不完全一样，但希望我能够帮助您找到所需的内容。

这是我的 swatch.liquid 文件中用于打印样本的代码。 （这大概是 swatch.liquid 文件的下半部分，位于 sn-ps 文件夹中）

<div class="product-options">
  <div class="swatch clearfix" data-option-index="{{ option_index }}">
    <div class="header">
      {% assign values = '' %}
      {% for variant in product.variants %}
        {% assign value = variant.options[option_index] %}
        {% unless values contains value %}
          {% assign values = values | join: ',' %}
          {% assign values = values | append: ',' | append: value %} 
          {% assign values = values | split: ',' %}
          <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% else %}size {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
            <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
            {% if is_color %}
              <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
                <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
              </label>
            {% else %}
            <label for="swatch-{{ option_index }}-{{ value | handle }}">
              {{ value }}
              <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
            </label>
            {% endif %}
          </div>
        {% endunless %}
        {% if variant.available %}
        <script>
          jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
        </script>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

这看起来有点乱，我知道 - 所以让我们试着找到你想要修改的部分。

这是上面示例中当样本为颜色时打印样本元素的部分：

            {% if is_color %}
              <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }};">
                <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
              </label>
            {% else %}

在这些 <label> 标签之间，您应该能够添加您需要的任何文本 - 例如 <span class="swatch-color-name">{{ value }}</span>

在此处添加额外的 HTML 可能会影响页面的当前样式，因此您可能需要添加一些额外的 CSS 规则以应用于您添加的任何元素，以使内容再次整齐排列.

希望这会有所帮助！

注意：如果您使用的是 Chrome，有一个名为“Search All”的有用扩展程序可以让您在找不到需要编辑的文件时搜索整个 Shopify 主题。搜索“color”或“variant.options”等关键字应该可以帮助您找到正确的方向。