Question

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

我在javascript和网上表现不佳我还没有找到任何完整的指南

非常感谢你的帮助！

Answer 1

这看起来像我以前见过的主题。如果我没记错的话，该主题使用名为swatch.liquid的文件来制作这些色圈。我正在使用我碰巧手头的swatch文件版本来写这个答案，所以具体的代码可能不完全是你的主题，但希望我能帮助你找到什么你需要。

这是我的swatch.liquid文件中打印出样本的代码。（这大约是swatch.liquid文件的下半部分，在snippets文件夹中找到）

<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，那么有一个名为＆＃34; Search All＆＃34;的有用扩展程序。如果您在查找需要编辑的文件时遇到问题，可以搜索整个Shopify主题。正在搜索关键字＆＃39; color＆＃39;或者＆＃39; variant.options＆＃39;应该帮助你指明正确的方向。

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

1 个答案: