Metafelder von Produktvarianten dynamisch ausgeben

Deutsch Diskussion Technische Fragen & Antworten
1

Hallo Zusammen,

ich habe hier als Beispiel die Ausgabe eines Metafeldes (beispiel_metafeld) für mehrere Produktvarianten.

{% assign selected_variant_id = product.selected_or_first_available_variant.id %}

{% for variant in product.variants %}
  {% if variant.id == selected_variant_id %}
    {% assign metafield_value = variant.metafields.custom.beispiel_metafeld %}
    {% if metafield_value != blank %}
      <div><strong id="metafield-value">Test: {{ metafield_value }}!</strong></div>
      {% break %}
    {% endif %}
  {% endif %}
{% endfor %}

Das funktioniert soweit auch und das Metafeld wird jeweils ausgegeben aber jedoch nur wenn ich auf die jeweilige Produktvariante klicke und dann die Seite neu lade.

Wie bekomme ich es hin das sich der Wert des Feldes dynamisch ändert wenn ich die andere Variante klicke. Muss ich mit JavaScript oder jQuery nachsteuern. Wenn ja wo muss das genau hin und wie muss es aussehen. Die Variantenauswahl läuft über Selektoren.

<div class="option-selector__btns">
<input class="opt-btn js-option" type="radio" name="template--17896957116684__main-8355910746380-farbe-selector" id="template--17896957116684__main-8355910746380-farbe-selector-opt-0" value="Fawn" checked="" required="">
     <label class="opt-label" data-swatch="fawn" for="template--17896957116684__main-8355910746380-farbe-selector-opt-0"><span class="opt-label__text">Fawn</span></label>
<input class="opt-btn js-option" type="radio" name="template--17896957116684__main-8355910746380-farbe-selector" id="template--17896957116684__main-8355910746380-farbe-selector-opt-1" value="Black" required="">
     <label class="opt-label" data-swatch="black" for="template--17896957116684__main-8355910746380-farbe-selector-opt-1"><span class="opt-label__text">Black</span></label>
</div>

Im Voraus besten Dank für Support.

2

Hey @McFly83

Danke für die Frage und schauen wir hier wie wir das lösen können. Baust du als Partner gerade Shops für deine Klienten?

Generell lassen sich die Metafelder auf Varianten-Ebene nicht über den Theme-Editor als dynamischen Inhalt auswählen. Somit muss man Custom-HTML, Javascript, oder Liquid Block verwenden.

Du kannst JavaScript oder jQuery verwenden, um das Metafeld dynamisch zu aktualisieren, wenn der Nutzer eine andere Produktvariante auswählt. Vielleicht die Metadatenwerte für die Varianten im Voraus laden und in einer JavaScript-Struktur speichern, wie zum Beispiel ein Array oder ein Objekt.

Dann kann man einen Event-Listener auf die Auswahl der Produktvarianten hinzufügen, um den Metafeld-Wert entsprechend zu ändern, wenn der Nutzer eine andere Variante auswählt.

Hier ist ein Beispiel für eine mögliche Umsetzung mit jQuery. Das folgende Skript vor dem Schließen des </body>-Tags in einer Theme-Testumgebung ausprobieren:

Bitte beachte, dass die Metafeldwerte in diesem Beispiel ge-hardcodet sind. Wenn die Metafeldwerte sich häufig ändern, sollte man eine andere Methode verwenden, um sie dynamisch zu laden, zum Beispiel durch eine Ajax-Anfrage an die Shopify-API.

Stelle außerdem sicher, dass die Reihenfolge und die Anzahl der Produktvarianten in variantMetafields mit denen in den Radio-Button-Selektoren übereinstimmen.

Wenn du diese Methode verwendest, stelle auch sicher, dass du jQuery im Theme eingebunden hast, da das obige Skript jQuery-Funktionen verwendet.

Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Das obige ist Theme-abhängig, ohne Gewährund dient lediglich dazu dich in die richtige Richtung zu weisen! :wink:

3

Ja ich baue gerade einen Shop für einen Kunden für den ich das brauche.

Ich kann natürlich eine Funktion implementieren, die bei Auswahl einer Variante die Seite neu lädt dann werden auch die Metafelder der Variante angezeigt. Aber funktioniert das auch ohne neu laden? Ich habe mir ein Custom Liqiud definiert und zusätzlich eben die jQuery Funktion welche die Seite neu lädt.

In dem Zusammenhang kam auch die Frage auf wie man Metafelder die als Rich Text definiert sind ausgeben kann, sodass nur der Inhalt ausgegeben wird und nicht das komplette json-Konstrukt.

4

@McFly83

Du solltest definitiv die Metafelder aktualisieren können, ohne die Seite neu zu laden. Genau das bewirkt das obige JavaScript/jQuery-Skript. Es ändert das Textinhalt des <strong>-Elements mit der ID “metafield-value”, wenn eine andere Produktvariante ausgewählt wird.

Was deine zweite Frage betrifft, ist es möglich, den Inhalt eines Metafeldes, das als Rich Text definiert ist, auszugeben, ohne das gesamte JSON-Konstrukt anzuzeigen. Probiere den Inhalt des Metafeldes zu extrahieren und als HTML im Template darzustellen. Hier eine Beispiel-IF-Statement (ist aber ohne Gewähr):

{% assign metafield_richtext = variant.metafields.custom.beispiel_metafeld %}
{% if metafield_richtext != blank %}
  {% assign rich_content = metafield_richtext.content %}
  {{ rich_content | json_parse }}

{% endif %}

Da wird der “content”-Wert aus dem “beispiel_metafeld” Metafeld extrahiert und in einem <div> ausgegeben. Der json_parse-Filter parst den Inhalt des Metafeldes, bevor er ausgegeben wird. Dadurch wird nur der Inhalt angezeigt und nicht das gesamte JSON-Konstrukt.

Beachte, dass du den genauen Pfad zum gewünschten Wert innerhalb des JSON-Konstrukts kennen solltest da im obigen Beispiel angenommen wird, dass das gewünschte Metafeld den Pfad metafields.custom.beispiel_metafeld.content hat.

Der tatsächlicher Pfad kann abhängig von der Struktur des Metafeldes variieren.

Es ist auch wichtig zu beachten, dass der json_parse-Filter nur in den neueren Versionen von Shopify verfügbar ist.