Dawn Theme, Varianten-Metafelder ausgeben + neuladen

[Yannick1510]

Hallo zusammen,

ich hänge seit einiger Zeit an einem Problem. Ich möchte eine Tabelle mit Spezifikationen für jede Variante ausgeben. Die Spezifikationen habe ich über Varianten-Metafelder erstellt.

Allerdings finde ich keinen Weg, die Meta-Variantenfelder auszugeben, sodass sie auch angezeigt werden.
So ist z.B. eins gespeichert: custom.stahlsorte

Ich habe viele Möglichkeiten ausprobiert, doch keine funktioniert, z.B.
{{ custom.stahlsorte }}
{{ current_variant.metafields.custom.stahlsorte }} ,...
Die Felder bleiben einfach leer.

Ein zweites Problem ist, dass ich den Liquid Block mit den Varianten-Metafeldern bei der Variantenauswahl vermutlich zum Neuladen zwingen muss. Ich habe diesen Code im global.js hinzugefügt:

ocument.addEventListener('DOMContentLoaded', function() {
  const variantRadios = document.querySelectorAll('input[type="radio"]'); // Radio-Buttons für Varianten

  if (variantRadios.length > 0) {
    variantRadios.forEach(function(radio) {
      radio.addEventListener('change', function() {
        const selectedVariantId = this.value;
        
        // AJAX-Request, um den Spezifikationsteil der Seite neu zu laden
        fetch(`/products/{{ product.handle }}?variant=${selectedVariantId} #variant-specifications`, {
          method: 'GET',
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        })
        .then(function(response) {
          return response.text();
        })
        .then(function(html) {
          // HTML-Teil dynamisch neu laden
          const parser = new DOMParser();
          const newDocument = parser.parseFromString(html, 'text/html');
          const newContent = newDocument.querySelector('#variant-specifications');
          document.querySelector('#variant-specifications').innerHTML = newContent.innerHTML;
        })
        .catch(function(error) {
          console.error('Fehler beim Laden der Spezifikationen:', error);
        });
      });
    });
  }
});

Auch dieser Teil scheint aktuell nicht zu funktionieren.

Ich arbeite mit Dawn.

Ich danke für Hilfe!

VG
Yannick

[Ben310]

Deinen obigen Code hast du von ChatGPT (kleine Anzeichen sind beispielsweise die Kommentare)? Es fehlt auch das "D" am Anfang falls das kein Typo ist. Aus UX Sicht ist aber das ganze leider nicht die beste UX da es meistens ein neuladen/refresh der Page erzwingen muss um die Felder auszugeben. Wenn ich als User auf Seiten bin und eine Auswahl irgendeiner Art anklicken muss, die dann eine Page Refresh erzingt, bin ich als User nicht immer sehr happy tbh.

Dann musst du 👁️, ob current_variant das richtige Objekt ist, da du beim Laden der Seite möglicherweise keine current_variant hast, wenn du sie nicht explizit im Code anforderst, um sicherzustellen, dass der Wert des Metafeldes nur angezeigt wird, wenn er existiert:

{% assign current_variant = product.selected_variant %}

{% if current_variant.metafields.custom.stahlsorte %}
  <p>Stahlsorte: {{ current_variant.metafields.custom.stahlsorte }}</p>
{% else %}
  <p>Stahlsorte nicht verfügbar</p>
{% endif %}

Verwende einen Variant-Selector wie variant_picker, o. ä., um sicherzustellen, dass das Metafeld für jede Variante korrekt geladen wird. Vielleicht weist dich das in die richtige Richtung... Probiere mal:

document.addEventListener('DOMContentLoaded', function() {
  const variantRadios = document.querySelectorAll('input[type="radio"]'); 

  if (variantRadios.length > 0) {
    variantRadios.forEach(function(radio) {
      radio.addEventListener('change', function() {
        const selectedVariantId = this.value;

        fetch(`/products/{{ product.handle }}?variant=${selectedVariantId} #variant-specifications`, {
          method: 'GET',
          headers: {
            'X-Requested-With': 'XMLHttpRequest'
          }
        })
        .then(function(response) {
          return response.text();
        })
        .then(function(html) {
          const parser = new DOMParser();
          const newDocument = parser.parseFromString(html, 'text/html');
          const newContent = newDocument.querySelector('#variant-specifications');
          const currentContent = document.querySelector('#variant-specifications');

          if (currentContent && newContent) {
            currentContent.innerHTML = newContent.innerHTML;
          }
        })
        .catch(function(error) {
          console.error('Fehler beim Laden der Spezifikationen:', error);
        });
      });
    });
  }
});