produktvarianten SKU in Dawn mit benutzerdefiniertem Liquid

[cado]

Hallo,

als Neuling bei Shopify versuche ich gerade in einem Dawn Theme mit Varianten einen Block mit custom Liquid (eigentlich nur ein wenig Text mir Zeilenumbrüchen) noch die jeweilige SKU oder Varianten-ID darzustellen.
wie bekomme ich das hin, ohne dass die Seite neu lädt?

aktuell versuche ich es mit:

{%- assign current_variant = product.selected_or_first_available_variant -%}
{{ current_variant.id }}

da wird die ID aber erst nach einem Page-Refresh aktualisiert.

Danke für eure Tipps im Voraus.

[Ben310 · Accepted solution]

Das Problem, dass die Variant-ID oder SKU in Shopify’s Dawn-Theme erst nach einem Seitenreload aktualisiert wird, hängt mit der Art und Weise zusammen, wie du JavaScript für den Variantenwechsel auf deiner PDP anwendest, da das statische Liquid nicht automatisch aktualisiert wird. 

Du musst zunächst sicherstellen, dass deine Ausgangsvariable korrekt definiert ist und Liquid das erste Ergebnis anzeigt:

<div id="variant-info">
  <span class="variant-id" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    Variant ID: {{ product.selected_or_first_available_variant.id }}
  </span>
  <span class="variant-sku" data-variant-sku="{{ product.selected_or_first_available_variant.sku }}">
    SKU: {{ product.selected_or_first_available_variant.sku }}
  </span>
</div>

Du brauchst halt einen JavaScript, um die Variant-ID oder SKU inline zu aktualisieren, sobald der Kunde eine neue Variante auswählt. Shopify’s Dawn-Theme nutzt bereits eine Variantenlogik, die du ergänzen kannst, wie hier:

document.addEventListener('DOMContentLoaded', function() {
  const variantInfo = document.getElementById('variant-info');
  const variantIdElement = variantInfo.querySelector('.variant-id');
  const variantSkuElement = variantInfo.querySelector('.variant-sku');

  document.querySelector('form[action="/cart/add"]').addEventListener('change', function(event) {
    const selectedVariant = JSON.parse(document.querySelector('[data-variant-json]').textContent);

    const selectedOption = this.querySelector('[name="id"]');
    const variantId = selectedOption ? selectedOption.value : null;

    if (variantId) {
      const variant = selectedVariant.find(v => v.id == variantId);

      // Aktualisiere Variant-ID und SKU
      if (variant) {
        variantIdElement.textContent = `Variant ID: ${variant.id}`;
        variantSkuElement.textContent = `SKU: ${variant.sku || 'Keine SKU'}`;
      }
    }
  });
});

[cado]

vielen Dank!
die SKU wird tatsächlich vom Dawn Theme bei Änderungen in der Variantenauswahl aktualisiert.
Das war der entscheidende Hinweis 🙂 

[Ben310]

[Grünspecht]

Hallo zusammen,

ich arbeite gerade an genau dem gleichen Problem wie Cado.

In welchen konkreten Dateien meines Codes muss ich die beiden oben genannten Befehle eintragen? Ich arbeite auch mit dem Dawn Theme.

Danke im Voraus!

[Ben310]

Wie oben bereits erklärt - alles im Code deiner PDP

[Grünspecht]

Hi BEN310,

danke dir. ich hab den ersten Teil des Codes in die main-prouct.liquid Datei eingefügt und die SKUs werden angezeigt. Den zweiten Teil des Codes, damit sich die SKUs bei Variantenauswahl dynamisch anpassen,  muss ich in die theme-editor.js Datei einfügen oder in welche Datei gehört das?

Danke für deine Hilfe!

[Ben310]

Das machst du zuerst in einer Theme als Testumgebung? Es waere in der JavaScript-Datei, die für die PDP zuständig ist, wie die product-form.js, im Ordner assets und ergänze dort die Aktualisierung der SKU. Suche nach bestehenden Funktionen oder Event-Listenern (Strg&F) wie addEventListener, die auf Änderungen der Variante reagieren. Falls du keine findest, teste da einen Code wie den folgenden:

document.addEventListener('DOMContentLoaded', function() {
  const variantInfo = document.getElementById('variant-info');
  const variantIdElement = variantInfo?.querySelector('.variant-id');
  const variantSkuElement = variantInfo?.querySelector('.variant-sku');

  if (!variantInfo || !variantIdElement || !variantSkuElement) return;

  document.querySelector('form[action="/cart/add"]').addEventListener('change', function(event) {
    const variantJson = document.querySelector('[data-variant-json]');
    if (!variantJson) return;

    const selectedVariant = JSON.parse(variantJson.textContent);

    const selectedOption = this.querySelector('[name="id"]');
    const variantId = selectedOption ? selectedOption.value : null;

    if (variantId) {
      const variant = selectedVariant.find(v => v.id == variantId);

      // Aktualisiere Variant-ID und SKU
      if (variant) {
        variantIdElement.textContent = `Variant ID: ${variant.id}`;
        variantSkuElement.textContent = `SKU: ${variant.sku || 'Keine SKU'}`;
      }
    }
  });
});

Falls die Datei bereits eine Variantenlogik enthält, den obigen Code in die bestehende Logik integrieren.