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:
<script>
var variantData = {
{% for variant in product.variants %}
"{{ variant.id }}": {
"sku": "{{ variant.sku }}",
"barcode": "{{ variant.barcode }}"
}
{% unless forloop.last %},{% endunless %}
{% endfor %}
};
</script>
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:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
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.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
