Dynamische Seiten und Variantenänderungen#

Das SDK beobachtet Zielelemente, die nach dem Laden der Seite eingefügt werden. Ihr Onlineshop verwaltet weiterhin die Produktauswahl und muss die Attribute der Zielelemente mit dieser Auswahl synchron halten.

Einmal laden, Ziel aktualisieren#

Verwenden Sie genau einen SDK-Loader auf Anwendungs- oder Theme-Ebene. Fügen Sie nicht bei jedem Routenwechsel ein neues Skript ein. Rendern Sie ein Zielelement dort, wo das aktuelle Produkt erscheint, und aktualisieren Sie es, wenn eine Schnellansicht, die Variantenauswahl oder eine clientseitige Route das Produkt ändert.

Für generierte Buttons verwenden Sie den aktuellen Produktcode im Zielcontainer. Für selbst erstellte Buttons setzen Sie zusätzlich den vorherigen SDK-Zustand zurück, wie in der Anleitung für benutzerdefinierte Storefronts gezeigt.

Zurücksetzen des erstellten Buttons#

Der folgende Code entspricht der bestehenden Schnittstelle für einen benutzerdefinierten Onlineshop. Rufen Sie ihn in Ihrem eigenen Auswahlhandler auf, sobald der ausgewählte Produktcode bekannt ist.

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

Verbinden Sie den tatsächlichen Plattformlebenszyklus#

Es gibt kein universelles E-Commerce-Varianten-Änderungsereignis. Der Shopify-Leitfaden definiert ein Ereignis, das Ihr Theme auslösen soll; das Hinzufügen dieses Listeners allein verbindet das Theme nicht. Verwenden Sie den von Ihrem tatsächlichen Theme oder Ihrer Anwendung dokumentierten Callback.

Für React / Next.js und Vue / Nuxt folgen Sie den clientseitigen Lebenszyklus- und Bereinigungsanweisungen des Framework-Leitfadens.

Prüfen Sie auf veraltete Auswahl#

Wechseln Sie zwischen einem geeigneten Produkt, einem anderen geeigneten Produkt und einem Produkt ohne Zuordnung. Der Viewer darf nach einer Auswahländerung niemals das vorherige Produkt erneut öffnen. Wiederholen Sie dies mit Schnellansichten und der Zurück-Navigation im Browser.