Shopifyで選択した色のバリエーションの表示名

Question

オンthis page選択した場合、バリエーション名は表示されません。 は基本的に、私は私がその

についての完全なガイドが見つかりませんでしたオンラインJavaScriptとの苦手

...選択バリアントの名前を示すバリアント見本の下に段落テキストを追加する必要があります

ご協力いただきありがとうございます！

Answer 1

これは私が以前見たテーマのようです。私が正しく思い出した場合、そのテーマは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> 

（これは、スニペットフォルダ内にswatch.liquidファイルの下半分、おおよそです）、私は知っている - それでは、試してみて、あなたが変更したいと思う部分を見つけてみましょう。

ここで見本がカラーであるとき見本要素を印刷し、上記の例から一部だ：あなたはあなたが必要とする任意のテキストを追加することができる必要があり、それらの<label>タグの間で

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

- など<span class="swatch-color-name">{{ value }}</span>

あなたは物事がうまく再び並ぶように取得するために追加したすべての要素に適用するためにいくつかの余分なCSSルールを追加する必要があるかもしれませんので、あなたのページの現在のスタイルをオフに投げることがあり、ここでに余分なHTMLを追加します。

希望すると便利です。

NB：Chromeを使用している場合、「Search All」という便利な拡張機能があり、編集が必要なファイルを見つけるのが難しい場合は、Shopifyテーマ全体を検索できます。 'color'や 'variant.options'などのキーワードを検索すると、正しい方向に向けるのに役立ちます。