Der Produkt-Customizer läuft als <cv-customizer>-Web-Component auf der Seite. Während der Kunde arbeitet, löst er DOM-Events aus und stellt eine ChamevoJS-Instanz bereit, die Sie direkt auslesen können. Nutzen Sie diese, um den Live-Preis in Ihrem eigenen Plugin zu spiegeln, Anpassungsdaten zu synchronisieren oder eigene Logik auszulösen.

Das ist die häufigste Anfrage von Drittanbieter-Plugins: den Live-Preis des Customizers an anderer Stelle auf der Seite anzuzeigen.

Bevor Sie beginnen

• Dies ist eine clientseitige (Browser-)API. Der gesamte Code läuft auf der Produktseite, nicht in PHP.
• Die folgenden Bezeichner sind echte JavaScript-Namen aus ChamevoJS. Verwenden Sie sie genau so, wie sie geschrieben sind.
• Das Plugin bindet <cv-customizer> per JavaScript ein, daher existiert das Element möglicherweise nicht in dem Moment, in dem Ihr Skript läuft. Siehe Warten, bis das Element existiert weiter unten.
• Selbst wenn das Element existiert, sind seine chamevo-Instanz und der Preis erst verfügbar, nachdem das cvReady-Event ausgelöst wurde.

Die Customizer-Instanz abrufen

Es gibt drei Möglichkeiten, eine Referenz auf den Customizer zu erhalten – je nachdem, wie er zur Seite hinzugefügt wurde.

a) Das Element abfragen (WordPress und WooCommerce). Das Chamevo-Plugin fügt das Element für Sie hinzu, daher ist dies der übliche Weg auf einer Produktseite:

const customizer = document.querySelector('cv-customizer');

Das Plugin bindet das Element per JavaScript ein, nicht als statisches HTML. Daher kann querySelector null zurückgeben, wenn es ausgeführt wird, bevor das Element erscheint – siehe Warten, bis das Element existiert.

b) Den Rückgabewert von createCustomizer() behalten. Wenn Ihr eigener Code den Customizer erstellt, gibt die Factory das Element zurück: