Metafield bei Produktvarianten

[franz-messner]

Hallo! 

Ich stehe gerade vor folgender Frage: 
Wie kann ich bei einem Produkt, welches 3 Varianten hat jeweils bei jeder Variante eine Metafield Information hinzufügen? Ich will ja nicht drei einzelne Produkte daraus machen.
(ich verwende das DAWN Theme) 

Danke für Eure Hilfestellung. 
LG
Franz 

[Niki_K]

Hallo @franz-messner,

Um bei einem Produkt mit 3 Varianten jeweils eine Metafield-Information für jede Variante hinzuzufügen, ist es möglich, die Varianten-Metafields in Shopify einzustellen.

 

[franz-messner]

Hallo Niki! 

Danke für deine Rückmeldung! Das habe ich bereits gesehen, dass ich die unter Varianten anlegen muss. 

Jedoch wenn ich jetzt zb. ein Textfeld beim Produkt anlege und die Dynamische Quelle auswähle, sehe ich nicht die Varianten. 

Wo stehe ich da noch am "Schlauch" ? 🙂 

Danke für deine Rückmeldung!

[Niki_K]

Hallo @franz-messner,

Okay, ich verstehe jetzt, was du meinst! 🙂

Das Problem ist, dass du die dynamische Quelle für die Varianten im Moment nicht nutzen kannst. Es gibt kein Feld, das ausschließlich mit den Varianten verbunden ist. Um dies zu tun, müsstest du den Code bearbeiten und ein Stück JavaScript-Code hinzufügen, der sicherstellt, dass sich der Text (z.B. ein Textfeld) ändert, wenn du auf eine andere Variante klickst.

Z.B. Diese Diskussion wird dir helfen: https://community.shopify.com/c/shopify-scripts/variant-metafield-dynamically-changing/td-p/1533060

[franz-messner]

Hallo @Niki_K ! 

Warum kann man zwar auf die Metafields vim Produkt zugreifen über die Dynamische Quelle aber nicht auf die Varianten, die man ja auch unter Metafields anlegt? 

Danke und LG Franz

[Niki_K]

Hallo @franz-messner,

Diese Funktion wird im Moment nicht über die Funktion der Dynamischen Quelle unterstützt. Ich verstehe, dass es frustrierend sein kann, dass du die Informationen zu den Produktvarianten nicht einfach anzeigen lassen kannst. Trotzdem ist es super, dass die Funktion der Dynamischen Quelle für Händler und Händlerinnen verfügbar ist - denn noch vor einem Jahr musste man in den Code einsteigen, um eine einfache Produkt-Metafield anzeigen hinzufügen.

Wie ich jedoch bereits in meiner vorherigen Nachricht geschrieben habe, müsstest du in den Code einsteigen und ein Stück JavaScript-Code hinzufügen, damit sich die Nachricht (der Text) ändert, wenn du eine andere Variante auswählst.

[franz-messner]

Hallo @Niki_K ! 

Danke für die Rückmeldung! Ich habe bereits den JS Code eingefügt! 

Das was mir aber noch fehlt ist, wenn ich ein Textfeld beim Produkt setze, dass das Variant Metafield angezeigt wird. 

Mein Varianten Feld: variant.metafields.custom.info

Wenn ich zb. ein Benutzerdefiniertes Liquid einfüge mit {{variant.metafields.custom.info}} wird nichts dargestellt. 

Hast du noch einen Tipp? 

lg

[franz-messner]

Hallo @Niki_K, hallo @Kai !

So habs jetzt hinbekommen, dass mir das Feld angezeigt wird! 🙂 
Hab ein benutzerdefiniertes Liquid gesetzt und den Code:

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong>{{ variant.metafields.custom.info }}</strong>
{% endif %}
{% endfor %}

eingefügt. Das funktioniert. 

Jedoch hat es noch was bei meinem JS. Da wenn ich die Varianten wechsle wird das Field nicht aktualisiert. 

Der Code des JS wäre:

// START eingefügter Code
onVariantChange() {
this.updateOptions();
this.updateMasterId();
this.toggleAddButton(true, '', false);
this.updatePickupAvailability();
this.removeErrorMessage();

if (!this.currentVariant) {
this.toggleAddButton(true, '', true);
this.setUnavailable();
} else {
this.updateMedia();
this.updateURL();
this.updateVariantInput();
this.renderProductInfo();
this.updateShareUrl();

this.updateVariantDetails(this.currentVariant);
}
}

updateVariantDetails(currentVariant){
const variants = document.querySelectorAll('[data-variant-id]')

variants.forEach( function(variant) {
variant.style.display = 'none';
if(variant.dataset.variantId == currentVariant.id){
variant.style.display = 'block'
}
});
}

// ENDE eingefügter Code


Habt Ihr dazu eine Idee wo mein Fehler liegen könnte? 

Liebe Grüße

[franz-messner]

Hallo @Niki_K , Hallo @Kai !

ich hab jetzt die Lösung! 

Ohne ins global JS geschrieben. Direkt im benutzerdefinierten LIquid Feld im Product Template. 


{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong>{{variant.metafields.custom.info}}</strong>
{% endif %}
{% endfor %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".no-js-hidden").on("click", function(){
var refreshint = setInterval(function(){
location.reload();
}, 100); }); });
</script>

Es aktualisiert ... das einzige was ich noch merke ist ein kleines Zucken beim Refresh. 

Habt ihr dazu noch Verbesserungsvorschläge?

LG

[Gabe]

Hey Alle, @franz-messner 

Wow, wo eine Wille, da ein Weg! Und dein JavaScript-Code sieht gut aus und der "click" Event wird richtig abgefangen, um die Seite zu aktualisieren. Dennoch führt das vollständige Neuladen der Seite zu einem leichten "Zucken" was nicht optimal für die UX deiner User sein kann.

Verbesserungsvorschläge...hmmm, wie wäre die Verwendung von AJAX (Asynchronous JavaScript and XML), um die Daten der ausgewählten Variante abzurufen und das Metafield-Element zu aktualisieren, ohne die gesamte Seite neu zu laden? Das AJAX würde aber erfordern, dass die Metafield-Informationen in den Produktvariantendaten verfügbar sind, die von Shopify's AJAX API zurückgegeben werden. ¯\_(ツ)_/¯

[franz-messner]

Hallo @Gabe !

Dankeschön für deine Rückmeldung! 

Ja genau das stört mich auch noch, dass die Seite geladen wird und der "zucker" kommt!

Habt ihr bei Shopify dies schön gelöst? Bzw. gibts da die Unterstützung, da ich das Dawn Theme verwende? 

Danke und LG 

[Gabe]

Hey @franz-messner 

Wir bieten etwas unterstützung für unsere Themes an (60-Min "Design Time") aber leider nicht bei eigene Code Anpassungen. 

Wenn du glaubst es handelt sich um ein Bug des Themes dann sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

VG,

[Kai]

Hi @franz-messner,

um unterschiedliche Metafelder auf der Produktseite im Shopify-Theme Dawn 2.0 anzuzeigen, müssest du die Datei product-template.liquid im Code des Themas bearbeiten. 

Du kannst auf diese Datei zugreifen, indem du zu Onlineshop > Themen > Aktionen > Code bearbeiten gehest.

Sobald du die Datei product-template.liquid geöffnet hast, müsstest du den Abschnitt des Codes suchen, der die Varianten anzeigt. Dies ist normalerweise in einer for-Schleife zu finden, die die Produktvarianten durchläuft.

Du kannst dann den Code einfügen, um die gewünschten Metafelder für jede Option anzuzeigen. Wenn die Metafelder beispielsweise „finish“, „dimensions“ und „product_care“ heißen, kannst du den folgenden Code verwenden:

{{variante.metafields.global.finish }}
{{ option.metafields.global.dimensions }}
{{ option.metafields.global.product_care }}

Platziere den Code an der entsprechenden Stelle in der Datei product-template.liquid, an der die Informationen auf deiner Produktseite angezeigt werden sollen.

Es ist erwähnenswert, dass du die Metafelder zuvor erstellt haben und den richtigen Namensraum und Schlüssel haben sollten, da diese Codes sonst nicht funktionieren. 

Bevor du Code-Änderungen an deinem Shop vornimmst, also auch Apps installierst ist es auch immer ratsam vorher das eigene Theme zu duplizieren, damit immer eine funktionierende Version des Shopify Shops gesichert ist.

Klappt das für dich? Und welche Art von Produkten verkaufst du in deinem Shopify Shop und an wen?

[franz-messner]

Hallo @Kai !

Danke für deine Rückmeldung! 

Meinst du beim Dawn Theme die product-variant-options.liquid oder die main-product.liquid? 

wie sieht dies dann aus. zwar durchläuft es die FOR schleife, jedoch benötigt man nicht den Javascript Teil für den refresh der textbox? so wie @Niki_K gemeint hat? 

Frage abseits: (warum hat man dies Seitens Shopify noch nicht ergänzt?) Eigentlich ist das ja gar kein seltener Fall, dass Varianten Metafields haben können und dann auch angezeigt werden sollen?

Danke für deine Hilfe 
LG
Franz 

[Niki_K]

Hi @franz-messner,

Es tut mir leid, dass ich so spät antworte. Falls es noch relevant ist, habe ich mich entschlossen, eine Schritt-für-Schritt-Anleitung zu schreiben, wie man die Werte der Varianten-Metafelder auf den Produktseiten dynamisch darstellen kann - das heißt, wenn ein Kunde eine andere Produktvariante auswählt.

Die Anleitung enthält Codeschnipsel, einschließlich JavaScript, das eine dynamische Aktualisierung der Werte ermöglicht. Dieser Artikel ist in englischer Sprache verfasst.

https://ecommercepot.com/shopify-qa/variant-metafield/

Ich hoffe, dass dies hilfreich ist!

[franz-messner]

Hallo Niki! 

Danke für deine Rückmeldung! Ich habe eine Lösung, die noch nicht optimal ist, da immer ein Refresh auf die ganze Seite passiert. 

Wenn du dazu bereit bist deine Version hier zu posten, wäre das sicherlich eine tolle Sache! 

Danke und Liebe Grüße

[Niki_K]

Hallo @franz-messner,

meine Version ist in dem Artikel gut beschrieben, aber natürlich kann ich hier eine Zusammenfassung schreiben. Ich müsste den größten Teil des Artikels kopieren, was meiner Meinung nach nicht viel Sinn macht.

Die Hauptsache ist, dass, wenn du die Variante Metafeld Werte dynamisch ändern möchtest-wenn ein Kunde eine andere Produktvariante auswählt, musst du JS verwenden.

Im Dawn-Theme verwende ich eine der bereits vorhandenen Funktionen, die immer dann aufgerufen wird, wenn ein Kunde eine andere Variante auswählt und zwar toggleAddButton.

Wenn du meine Lösung ausprobiert, lass du mich wissen, wie es bei dir funktioniert.

[Weedness]

Danke für die Anleitung, aber diese hilft nur bedingt. Es ist 0 erklärt wo genau ich diesen Code einfügen muss. Ich bin in diesem Bereich absoluter Anfänger.

Vielleicht könntest du das vereinfachen?

[Gabe]

Hey @Weedness 

Vielleicht wäre es eine effizientere Nutzung deiner Zeit und Energie wenn du uns die folgenden Angaben sendest, so dass wir nicht weitere Fragen stellen müssen und dir effektiver helfen können, und zwar folgende:

• Was genau du erreichen möchtest (Istwert und Sollwert),
• Ein Link zu einem Beispiel, Screenshots usw.
• Welche genauen Schritte du bis jetzt ausgeführt hast und wo genau die obige Anleitung nicht mehr weiterhilft,
• Deine Shop Testumgebung, wo du das testest bevor du es im Live-Theme implementierst, wie dein Test-Theme usw. (wir wissen ja nicht einmal um welches Theme es sich bei dir handelt denn alle Themes machen das etwas anders...)

Wir erwarten somit deine Rückmeldung mit den obigen Angaben! 😉