Hey @freizeit_
Danke für die Frage und lass uns schauen wie wir das lösen können. Wie es aussieht wird das eine Code Lösung verlangen und wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative 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!
Um das Gewicht und den Barcode der jeweils ausgewählten Variante dynamisch anzuzeigen, müsstest du den JavaScript im Liquid-Template bearbeiten wie z. B. hier:
- Gehe im Theme zu "Aktionen" und dann auf "Duplizieren" und Code bearbeiten".
- Suche nach dem Template, das die Produktseite beinhaltet (normalerweise "product.liquid" oder "product-template.liquid").
- Füge im Template an der Stelle, an der das Gewicht und der Barcode angezeigt werden sollen, folgenden Code ein:
<p id="variant-weight">Gewicht: {{ product.selected_or_first_available_variant.weight }} kg</p>
<p id="variant-barcode">Barcode: {{ product.selected_or_first_available_variant.barcode }}</p>
Suche nach der zugehörigen JavaScript-Datei (normalerweise "theme.js" oder "theme.min.js") und ergänze den folgenden JavaScript-Code am Ende der Datei:
document.addEventListener('DOMContentLoaded', function() {
const selectVariantElement = document.querySelector('.single-option-selector');
if (selectVariantElement) {
selectVariantElement.addEventListener('change', function() {
const variantId = this.value;
const productDataElement = document.getElementById('ProductJson-{{ product.id }}');
const productData = JSON.parse(productDataElement.innerHTML);
const selectedVariant = productData.variants.find(function(variant) {
return variant.id.toString() === variantId;
});
if (selectedVariant) {
const weightElement = document.getElementById('variant-weight');
const barcodeElement = document.getElementById('variant-barcode');
weightElement.innerHTML = 'Gewicht: ' + selectedVariant.weight + ' kg';
barcodeElement.innerHTML = 'Barcode: ' + selectedVariant.barcode;
}
});
}
});
Der Code fügt einen Event-Listener hinzu, der auf Änderungen der Variantenauswahl reagiert und bei jeder Änderung wird das Gewicht und der Barcode der ausgewählten Variante daraufhin aktualisiert. Das Gewicht und der Barcode sollten dann auf der Produktseite dynamisch aktualisiert werden, wenn eine andere Variante ausgewählt wird, ähnlich wie bei Preis und SKU.
Gerne kann ich einen Experten empfehlen der das mit euch programmieren kann bei weiteren Fragen. 😉
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
