Benutzerdefiniertes JavaScript

Nutzung

Über die Variable Configurator erfolgt der Zugriff auf die Konfigurator-Instanz.

Events

Über den $emitter des Konfigurators kann so beispielsweise auf die verschiedenen Events reagiert werden. Folgende Events stehen zur Verfügung:

Event-Name	Auslösegrund
beforeInit	Einmalig, bevor der Konfigurator initialisiert wird.
afterInit	Einmalig, nachdem der Konfigurator fertig initialisiert ist. (detail.currentState)
beforeRefresh	Bevor ein Aktualisierungszyklus (Refresh) des Konfigurators startet. (detail.isDirty)
afterRefresh	Nachdem ein Aktualisierungszyklus abgeschlossen wurde. (detail.isDirty)
fieldChange	Sobald ein Feld im Konfigurator verändert wurde. (detail.field)
afterFieldChange	Nachdem der durch eine Feldänderung gestartete Updatezyklus fertig durchlaufen wurde. (detail.field)
configurationChange	Nachdem der durch eine Feldänderung gestartete Updatezyklus fertig durchlaufen wurde; enthält den kompletten Zustand der Konfiguration.
fieldStructureChange	Bei Wiederholungsfeldern: falls eine neue Wiederholung hinzugefügt oder eine bestehende gelöscht wird.
afterGlobalCalculationCalculated	Nachdem eine einzelne globale Berechnung ausgewertet wurde. (detail.calculation)
afterGlobalCalculationsCalculated	Nachdem alle globalen Berechnungen ausgewertet wurden.
beforeSubcalculationsCalculated	Bevor die Unterberechnungen ausgewertet werden.
beforeSubcalculationCalculated	Bevor eine einzelne Unterberechnung ausgewertet wird. (detail.key, detail.subcalculation, detail.ruleData)
afterSubcalculationCalculated	Nachdem eine einzelne Unterberechnung ausgewertet wurde. (detail.key, detail.result, detail.subcalculation, detail.ruleData)
afterSubcalculationsCalculated	Nachdem alle Unterberechnungen ausgewertet wurden. (detail.result)
beforeValidated	Bevor der Validierungsprozess gestartet wird.
afterFieldValidated	Nachdem ein einzelnes Feld validiert wurde. (detail.field, detail.ruleData)
afterValidated	Nachdem der Validierungsprozess vollständig durchlaufen wurde.
beforeVisibilityUpdated	Bevor die Sichtbarkeiten von Gruppen und Feldern aktualisiert werden.
beforeInfoVisibilityUpdated	Bevor die Sichtbarkeit eines Info-Links aktualisiert wird.
afterInfoVisibilityUpdated	Nachdem die Sichtbarkeit eines Info-Links aktualisiert wurde. (detail.isVisible)
afterGroupVisibilityUpdated	Nachdem die Sichtbarkeit einer Gruppe aktualisiert wurde. (detail.group, detail.ruleData)
afterFieldVisibilityUpdated	Nachdem die Sichtbarkeit eines Feldes aktualisiert wurde. (detail.isVisible, detail.field)
afterFieldValueVisibilityUpdated	Nachdem die Sichtbarkeit eines Feldwerts (einer Option) aktualisiert wurde. (detail.isValueVisible, detail.field)
afterVisibilityUpdated	Nachdem alle Sichtbarkeiten aktualisiert wurden.
listItemIdUpdated	Nachdem die ID des Listen-/Merklisteneintrags aktualisiert wurde.
afterPriceUpdated	Nachdem der Preis aktualisiert wurde.
afterPriceCalculated	Nachdem ein Preis berechnet wurde. (detail.priceType, detail.calculation, detail.ruleData)
afterBasePriceUpdated	Nachdem der Grundpreis aktualisiert wurde.
beforeBlockPricesUpdated	Bevor die Staffelpreise aktualisiert werden.
afterBlockPriceUpdated	Nachdem ein einzelner Staffelpreis aktualisiert wurde. (detail.priceIndex)
afterBlockPricesUpdated	Nachdem alle Staffelpreise aktualisiert wurden.
afterDeliveryTimeUpdated	Nachdem die Lieferzeit aktualisiert wurde.
afterImageUpdated	Nachdem das Produktbild aktualisiert wurde.
afterProductNumberUpdated	Nachdem die Produktnummer aktualisiert wurde. (detail.productNumber)
beforeDynamicTextUpdated	Bevor ein dynamischer Text aktualisiert wird. (detail.ruleData)
afterDynamicTextUpdated	Nachdem ein dynamischer Text aktualisiert wurde. (detail.ruleData)

Beispiele

Bei jeder Feldänderung wird der neue Wert des Feldes ausgegeben

Werte von Mehrfachauswahlfeldern werden kommagetrennt ausgegeben

{% code lineNumbers="true" %}

Configurator.$emitter.subscribe('fieldChange', function(e){
    let currentValue = e.detail.field.value();
    
    if(Array.isArray(currentValue)){
        currentValue = currentValue.map(function(v){
            return v.value;
        }).join(', ');
    }
    alert(e.detail.field.config.label + ' wurde verändert. Aktueller Wert: '+ currentValue);
});

{% endcode %}