Anpassen der Konfiguration - Sprache und Bedingungen

Konfiguration anpassen

Die folgenden Beispiele zeigen Dir, wie Du die Konfiguration des Widgets ändern kannst.

Ändern Sie die Sprache

Um auf eine andere Sprache umzuschalten, definiere die Sprache ISO 639-1 Code im Config-Objekt wie unten gezeigt:

<script>
 window.rnw.tamaro.runWidget('.rnw-widget-container', {
language: 'de',
})
</script>

Debug-Panel anzeigen

Um das Debug-Panel zu sehen, setze den Parameter `debug` auf `true`. 

Alle verfügbaren Optionen können als Konfigurationsparameter eingestellt oder im `Debug-Panel` ausgewählt werden.

Lassen Sie uns einen Blick auf die wichtigsten Optionen werfen:

• Sprache - aktuelle Sprache einstellen

• Layout - Zurzeit ist nur ein Layout namens Liste verfügbar. In Kürze wird ein zweiter Layoutschritt verfügbar sein, der jeden Abschnitt in einem eigenen Schritt rendert.

• overlay_mode - einige Daten im Widget sollen in Overlays angezeigt werden. Diese Option legt fest, wie dieses Overlay aussehen soll.

• outer - das Overlay wird als modaler Dialog angezeigt (ist standardmäßig eingestellt).

• inner - das Overlay wird an Ort und Stelle und nicht über den anderen Blöcken angezeigt.

• test_mode - setze diese Option, um eine Testzahlung zu machen oder wenn Du lokal für einen Test arbeitest. Für produktive Zahlungen muss diese Option entfernt oder auf false gesetzt werden.

<script>
 window.rnw.tamaro.runWidget('.rnw-widget-container', {
debug: true,
layout: 'list',
overlayMode: 'outer',
debugSlots: true,
debugErrorMessages: true,
debugStyles: true
})
</script>

Um das Debuggen von Daten zu erleichtern, kannst Du die Option `Debug-Stile` einstellen.  Die Option "Debug-Fehlermeldung" zeigt alle möglichen Fehlermeldungen an.

"Debug-Slots" zeigt alle Stellen, an denen Du eine zusätzliche Komponente als Feld hinzufügen kannst. Um alle berechneten Konfigurationsparameter zu sehen, klicke einfach auf den Config-Link im Debug-Panel. Um alle verfügbaren Übersetzungen zu sehen, klicke auf den Link "Translations".

Bedingungen in der Konfiguration

Einige der Konfig-Eigenschaften können mit Hilfe von Bedingungen definiert werden.

Dies sind die am häufigsten verwendeten Bedingungen:

• amount()
• paymentMethod()
• paymentType()
• recurringInterval()
• purpose()
• currency().

Eine Bedingung holt sich dynamisch einen Wert aus dem Widget und basierend auf dem resultierenden Wert kannst Du z. B. einige Elemente des Widgets entweder ein- oder ausblenden.

Als Beispiel - lasse uns die Zahlungsarten überschreiben. Es werden drei Zahlungsarten angezeigt: Kreditkarte, PostFinance und SMS. Letztere wird nur angezeigt, wenn die folgende Bedingung erfüllt ist: Wenn der ausgewählte Betrag größer als 100 ist, wird die SMS-Methode ausgeblendet, ansonsten wird sie angezeigt. Sehen Sie sich das vollständige Beispiel an:

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    paymentMethods: [
      "cc",
      "pfc",
      {
        "if": "amount() < 100",
        "then": "sms"
      },
    ]
  });
</script>

 Das war einfach, nicht wahr?

Versuchen wir die nächste: Basierend auf einem ausgewählten Zweck wollen wir verschiedene Zahlungsarten zur Verfügung haben: Die SMS-Zahlungsmethode soll nur angezeigt werden, wenn der erste Zweck ausgewählt ist. Die Bedingung, die wir dafür verwenden werden, ist `purpose()`:

<script>
window.rnw.tamaro.runWidget('.rnw-widget-container', {
  paymentMethods: [
    "cc",
    "pfc",
    {
      "if": "purpose() == p1",
      "then": "sms"
    },
  ]
});
</script>

Wenn Du unterschiedliche Werte von Beträgen basierend auf der ausgewählten Währung anzeigen musst - verwende currency() in der Bedingung wie im folgenden Beispiel:

<script>
window.rnw.tamaro.runWidget('.rnw-widget-container', {
  amounts: [
    {
      "if": "currency() == usd",
      "then": [5,10,50,100],
    },
    {
      "if": "currency() == chf",
      "then": [10,15,60,80],
    },
    {
      "if": "currency() == eur",
      "then": [15,20,80,100],
    },
  ]
});
</script>

Eine Bedingung besteht in der Regel aus Operatoren und Methoden. Das Zeichen > ist ein Operator.
Es gibt viele Operatoren, die Du bereits kennst, und einige, die für dich vielleicht neu sind.
Neue Operatoren können leicht zur Compiler-Klasse hinzugefügt werden.
Neben den Operatoren gibt es auch Methoden. Der Ausdruck "Betrag()" ist eine Methode.
Methoden sind einfache Funktionen, die Argumente entgegennehmen und einen Wert zurückgeben können, oder auch nicht.
Neue Methoden können auf diese Weise leicht hinzugefügt werden: 

rnw.tamaro.compiler.addMethods({
 date: () => new Date().toLocaleString()
})

Du kannst Bedingungen entweder im traditionellen oder im funktionalen Format schreiben, zum Beispiel:
traditionell: 1 < 2 und 3 > 2,
funktional: und(lt(1, 2), gt(3, 2)).

Liste der verfügbaren Operatoren:

Liste der verfügbaren Methoden:

Konfigurationsmöglichkeiten

Liste aller verfügbaren Konfigurationsoptionen, basierend auf der Klasse WidgetConfig. Bitte beachte, dass wir in Javascript camelCase verwenden, während wir in YAML für die Parameternamen snake_case verwenden.

Unabhängig davon, welche Konfigurationsformate Du verwendet hast, wird das Spendenformular sie alle mit dieser Priorität zusammenführen: Runtime > JavaScript > YAML und erstellt ein neues Konfigurationsobjekt, das auf diesen drei Formaten basiert.

Es ist über die Widget-Instanz `window['widget'].computedConfig` zugänglich. Versuche nicht, irgendwelche Werte des `computedConfig`-Objekts zu überschreiben, da Deine Änderungen überschrieben werden, sobald die Konfiguration neu berechnet wird, verwende stattdessen `window['widget'].config`. Beachte, dass config kein Deep Merge unterstützt. Wenn Du also ein Objekt innerhalb der Konfiguration überschreibst, musst Du die gesamte Unterkonfiguration dieses Objekts bereitstellen.

Hinzufügen von versteckten Parametern

Wenn Du einen versteckten Parameter zusammen mit einer Transaktion übergeben möchtest, füge ihn einfach der Eigenschaft paymentFormPrefill hinzu:

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    paymentFormPrefill: {
      stored_hidden_parameter: "myValue"
    }
  });
</script>

Dieser Parameter wird an eine Transaktion mit einem Wert "myValue" angehängt.

Slots

Innerhalb von Slots kannst Du neue Felder erstellen. Es stehen verschiedene Slots zur Verfügung, bitte schalte die Option `Debug` ein und klicke auf die Option `Debug-Slots`, um sie sichtbar zu machen 

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    debug: true,
    debugSlots: true,
  });
</script>

Anpassen von Übersetzungen 

Um alle verfügbaren Übersetzungen zu sehen, stelle sicher, dass die Option `Debug` eingeschaltet ist. Klicke dann auf den Link "Translations" im "Debug-Bereich".

Du kannst Deine eigenen Übersetzungen innerhalb des Konfigurationsobjekts definieren. Im folgenden Beispiel überschreiben wir die Bezeichnungen von drei Zwecken.

<script>
  window.rnw.tamaro.runWidget('.rnw-widget-container', {
    translations: {
     en: {
        purposes: {
            p1: 'Purpose 1',
            p2: 'Purpose 2',
            p3: 'Purpose 3',
        },
        blocks: {
          payment_purposes: {
            title: "My purposes",
          },
        }
      }
  }});
</script>