Anzeigename der auf Shopify ausgewählten Farbvariante

Question

Unter this page habe ich einige Farbfelder, die bei Auswahl nicht den Variantennamen anzeigen. Grundsätzlich, ich brauche einen Absatztext unter der Variante Muster hinzuzufügen, die den Namen der Variante ausgewählt zeigen ...

Ich bin nicht gut auf JavaScript und Online habe ich keine vollständige Anleitung über diese

gefunden

Vielen Dank für Ihre Hilfe!

Answer 1

Das sieht aus wie ein Thema, das ich schon mal gesehen habe. Wenn ich mich richtig erinnere, verwendet dieses Thema eine Datei namens swatch.liquid, um diese Farbkreise zu erstellen. Ich schreibe diese Antwort unter Verwendung einer Version einer Swatch-Datei, die ich gerade zur Hand habe, so dass der spezifische Code nicht genau das ist, was dein Theme hat, aber hoffentlich kann ich dir helfen, das zu finden, was du brauchst.

Hier ist der Code aus meiner swatch.liquid-Datei, die die Farbfelder ausgibt. (Dies ist in etwa die untere Hälfte der swatch.liquid Datei, in der Schnipsel gefunden Ordner)

<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> 

Das ist ein bisschen chaotisch aussieht, weiß ich - so wollen wir versuchen, und den Teil, die Sie wollen, werden ändern .

Hier ist der Teil aus dem obigen Beispiel, das das Musterelement druckt, wenn der Swatch eine Farbe:

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

Zwischen diesen <label> Tags sollten Sie eine beliebigen Text hinzufügen können, die Sie brauchen - wie ein <span class="swatch-color-name">{{ value }}</span>

hinzufügen zusätzlicher HTML hier kann die aktuellen Stile Ihrer Seite abwerfen, so müssen Sie möglicherweise einige zusätzliche CSS-Regeln hinzufügen, um jegliche Elemente, die Sie hinzufügen, anzuwenden, um die Dinge schön wieder ausrichten.

Hoffe, das hilft!

Hinweis: Wenn Sie Chrome verwenden, gibt es eine nützliche Erweiterung namens "Search All", mit der Sie Ihr gesamtes Shopify-Thema durchsuchen können, wenn Sie Probleme haben, die Datei zu finden, die bearbeitet werden muss. Die Suche nach Schlüsselwörtern wie "color" oder "variant.options" sollte Ihnen helfen, in die richtige Richtung zu weisen.