FROM CACHE - de_header

Gewicht und Barcode bei Varianten nicht dynamisch

Gewicht und Barcode bei Varianten nicht dynamisch

freizeit_
Tourist
3 0 1

Hi,


ich brauche eine Lösung für folgendes Problem: 

Bei Varianten wird im Frontend immer nur die Gewichtsangabe und der Barcode des 1. Artikels ausgegeben. Wenn man auf eine andere Variante (z.B. Größe) des Artikels klickt, bleibt immer nur das Gewicht und der Barcode des 1. Artikels stehen. Anders ist es bei Preis und SKU. Diese Werte sind dynamisch und ändern sich, sobald man auf eine andere Variante klickt. Wie kann ich die beiden Werte anpassen? 


Gibt es dafür eine Lösung?

Danke

5 ANTWORTEN 5

Gabe
Shopify Staff
18494 2903 4268

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:

  1. Gehe im Theme zu "Aktionen" und dann auf "Duplizieren" und Code bearbeiten".
  2. Suche nach dem Template, das die Produktseite beinhaltet (normalerweise "product.liquid" oder "product-template.liquid").
  3. 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

freizeit_
Tourist
3 0 1

Hi,

danke für den Lösungsvorschlag. Ich habe den Code wie beschrieben in den entsprechenden Bereichen eingefügt, aber leider hat es bei unserem Theme keine Auswirkungen. Wir haben das Theme "Warehouse" im Einsatz, welches wir über den AppStore gekauft haben. Es handelt sich um ein 2.0 Theme, falls es wichtig ist. Warum es nicht funktioniert, kann ich leider nicht eruieren, da meine Programmierkenntnisse dafür nicht ausreichen. Wer könnte uns da weiterhelfen?


Danke.

Gabe
Shopify Staff
18494 2903 4268

@freizeit_ 

 

Ja das Code ist auf unsere gratis Themes ausgerichtet und das drittanbieter Warehouse Theme hat eine ganz andere Code Struktur. Hast du entweder mit den Warehouse Theme Entwickler oder mit einem Experten oder Programmierer diesbzgl. sprechen können? Gerne kann ich welche empfehlen!

 

VG,

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

freizeit_
Tourist
3 0 1

Ich versuche den Theme Entwickler zu kontaktieren. Danke für den Hinweis.

Gabe
Shopify Staff
18494 2903 4268

Gerne! 😉

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