EAN Code auf product page

Deutsch Diskussion Shopify Design

Topic summary

Ein Shopify-Nutzer (Theme: Dawn 11.0.0) möchte auf der Produktseite neben der SKU auch den EAN-Code anzeigen lassen. Problem: Bei Produkten mit mehreren Varianten werden SKU und EAN-Code beim Variantenwechsel nicht dynamisch aktualisiert.

Ursache: Der verwendete Custom Liquid Code lädt die Daten nur beim initialen Seitenaufruf, nicht beim Wechsel zwischen Varianten.

Lösungsansatz:

  • Ergänzung durch JavaScript/jQuery erforderlich, um das DOM dynamisch zu aktualisieren
  • Vorgeschlagene Implementierung: Alle SKUs und Barcodes in ein JavaScript-Objekt übertragen und clientseitig ausführen
  • jQuery-Code soll auf Variantenauswahl reagieren (Event-Listener auf select-Element mit name="id")
  • Bei Variantenwechsel werden passende SKU und Barcode aus dem Datenobjekt geladen und HTML aktualisiert

Wichtige Hinweise:

  • Änderungen nur in Themekopie/Testumgebung durchführen
  • Backup vor Code-Bearbeitung erstellen
  • Mögliche negative Auswirkungen auf Page Loading Speed
  • Theme-Updates könnten ausgeschlossen werden
  • Alternativ: Shopify-Experten engagieren

Code-Beispiele wurden bereitgestellt, sind aber theme-abhängig und ohne Gewähr.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hi, ich lasse bei meiner Produktseite neben der SKU auch den EAN Code anzeigen, leider habe ich aber ein Problem bei mehreren Varianten, da es dort beim Variantenwechsel nicht den EAN Code sowie auch die SKU mit aktualisiert.

Ich nutze dafür folgenden Code im custom liquid:

{% assign current_variant = product.selected_or_first_available_variant %}
Artikelnummer: <span class="variant-sku">{{ current_variant.sku }}</span> |
EAN: <span class="variant-barcode">{{ current_variant.barcode }}</span>

Der Code wird wohl nur beim Laden der Seite genutzt, aber dann nicht mehr bei dem jeweiligen Abschnitt für das aktualisieren der passenden Daten. Hat jemand eine Lösung für mich?

Theme is Dawn 11.0.0

Besten Dank!

2

Hey @Fatcarl

Danke für den Code und es fehlt hier ein Javascript dass das DOM dynamisch aktualisiert, sobald man zwischen den Varianten klickt.

Unten ist ein Beispiel, wie du das mit jQuery und Liquid in Shopify probieren kannst. Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Im Liquid müsstest du alle SKUs und Barcodes in ein JavaScript-Objekt übertragen, das du dann auf der Client-Seite exekutierst. Zum Beispiel:

Dann mit jQuery und JavaScript das HTML aktualisieren, wenn der Nutzer eine neue Variante auswählt. Hier ist ein einfacher Beispielcode:

$(document).ready(function() {
 // Wenn der Nutzer eine Variante auswählt...
 $('[name="id"]').change(function() {
   // ... finden Sie die ID der ausgewählten Variante heraus...
   var selectedVariantId = $(this).val();
   
   // ... finden Sie die passenden SKU und Barcode im variantData Objekt...
   var selectedSku = variantData[selectedVariantId].sku;
   var selectedBarcode = variantData[selectedVariantId].barcode;
   
   // ... und aktualisieren Sie das HTML mit den neuen Werten.
   $('.variant-sku').text(selectedSku);
   $('.variant-barcode').text(selectedBarcode);
 });
});

Stelle sicher, dass jQuery in deinem Theme aktiv ist, da der obige JavaScript-Code darauf basiert. Sollte dein Theme kein jQuery enthalten, es hinzufügen, indem du den folgenden Code in den <head> des Dokuments einfügest:

Und so kann die SKU und der Barcode aktualisiert werden, sobald man eine andere Variante auswählt. Dieses Beispiel basiert auf der Annahme, dass das select-Element, mit dem die Variante ausgewählt wird, das Attribut name="id" hat, was bei den meisten Shopify-Themes der Fall ist. Wenn dein Theme dies nicht nutzt, dann den jQuery-Selektor anpassen.

Das Ganze ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.