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

Question

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

我不是JavaScript的好，我在网上没有找到关于

任何完全指南

非常感谢您的帮助！

Answer 1

这看起来像我之前见过的主题。如果我没有记错，该主题使用名为swatch.liquid的文件来制作这些色环。我正在使用我手边有的样本文件编写这个答案，因此具体的代码可能不完全是您的主题，但希望我能够帮助您找到所需的东西。

这里是我的swatch.liquid文件打印出色板的代码。 （这大致下半部swatch.liquid文件，在片段文件夹中找到）

<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'这样的关键词应该有助于指引您朝正确的方向发展。