Metaframe-Methoden und Ereignisse
window.metaframe -Objekt
Sobald das Skript geladen wurde, ist das metaframe
-Objekt im globalen window
-Objekt Ihrer Anwendung verfügbar. Das Metaframe-Objekt enthält eine Liste von Methoden, die für die Verwaltung von Metaframe in Ihrer Web-Anwendung erforderlich sind.
Methode window.metaframe.create
Signatur der Methode:
window.metaframe.create: (parameters: {
loginProjectId: string,
merchantId?: number,
projectId?: number,
orbsApiHostId?: string,
isMobile?: boolean,
isCollapsed?: boolean,
layoutSettings?: {
desktop: {
widgetMarginTop?: number,
},
mobile: {
widgetMarginTop?: number,
},
},
}) => void;
Initialisiert Metaframe in Ihrer Webanwendung.
Parameter | Typ | Beschreibung |
---|---|---|
parameters | object | Objekt mit den Parametern für den Metaframe-Start. |
parameters.loginProjectId | string | Login-ID. Diese finden Sie im Kundenportal unter Login > Dashboard > Ihr Login-Projekt. Erforderlich. |
parameters.merchantId | string | Händler-ID. Diesen Parameter finden Sie im Kundenportal:
|
parameters.projectID | string | Projekt-ID. Dieser Parameter wird im Kundenportal neben dem Projektnamen angezeigt.Erforderlich, wenn die Funktion Rucksack in den Projekteinstellungen im Kundenportal aktiviert ist. |
parameters.orbsApiHostId | string | Host-ID. Wenden Sie sich dafür an das Integrationsteam integration@xsolla.com oder an Ihren Customer Success Manager csm@xsolla.com, und teilen Sie ihm die Projekt-ID und die Händler-ID mit.Erforderlich, wenn die Funktion virtuelle Währungen in den Projekteinstellungen im Kundenportal aktiviert ist. |
parameters.isMobile | boolean | Ob Metaframe standardmäßig das mobile Layout verwendet. |
parameters.isCollapsed | boolean | Ob das Widget standardmäßig eingeklappt (minimiert) angezeigt wird. Der Standardwert ist true . |
parameters.layoutSettings | object | Objekt mit den Parametern zur Anpassung des Widget-Layouts. |
parameters.layoutSettings.desktop | object | Objekt mit den Parametern zur Anpassung des Layouts der Desktop-Version des Widgets. Erforderlich. |
parameters.layoutSettings.desktop.widgetMarginTop | number | Oberer Rand für das Metaframe-Widget relativ zum Viewport (in px). Der Standardwert ist 16 . |
parameters.parameters.layoutSettings.mobile | object | Objekt mit den Parametern zur Anpassung des Layouts der mobilgeräteoptimierten Widget-Version. Erforderlich. |
parameters.layoutSettings.mobile.widgetMarginTop | number | Oberer Rand für das Metaframe-Widget relativ zum Viewport (in px). Der Standardwert ist 72 . |
Methode window.metaframe.setIsMobile
Signatur der Methode:
window.metaframe.setIsMobile(isMobile: boolean)
Wechselt Metaframe von der Desktop- zur mobilen Version und umgekehrt.
Parameter | Typ | Beschreibung |
---|---|---|
isMobile | boolean | Ob Metaframe auf die mobile Version umgestellt werden soll. Bei true schaltet Metaframe auf die mobile Version um. Bei false schaltet Metaframe auf die Desktop-Version um. |
window.metaframe.partnerActions -Objekt
Das Objekt enthält Methoden, die Aktionen im Metaframe auslösen.
Bevor Sie Methoden an diesem Objekt anwenden, müssen Sie sicherstellen, dass Metaframe vollständig geladen wurde. Abonnieren Sie dafür das Metaframe Ladeereignis. Wenn das Ereignis verarbeitet wurde, sind die Methoden des Objekts verfügbar.
Beispiel für das Einrichten eines Listeners für das Metaframe-Ladeereignis:
- javascript
window.addEventListener("@metaframe-partner-events:app-loaded", () => {
//Here you can use partner actions
});
Methode window.metaframe.partnerActions.openBackpackItemPage
Signatur der Methode:
openBackpackItemPage: (itemId: string) => void;
Öffnet die Seite für den angegebenen Artikel im Abschnitt
Damit die Methode korrekt funktioniert, müssen folgende Bedingungen erfüllt sein:
- Die Funktion Rucksack ist im Kundenportal aktiviert.
- Der Benutzer ist bei Metaframe authentifiziert.
Parameter | Typ | Beschreibung |
---|---|---|
itemId | string | Interne ID des Elements, das während des Aufrufs der API Methode Element erstellen übertragen wird. |
Methode window.metaframe.partnerActions.openLogin
Signatur der Methode:
openLogin: () => void;
Öffnet die Maske für die Nutzerautorisierung. Wenn der Nutzer bereits autorisiert ist, wird in der Browserkonsole ein Fehler angezeigt.
Methode window.metaframe.partnerActions.openProfile
Signatur der Methode:
openProfile: () => void;
Öffnet den Abschnitt
Methoden window.metaframe.partnerActions.openWallet
Signatur der Methode:
openWallet: () => void;
Öffnet den Abschnitt
Methode window.metaframe.partnerActions.openBackpack
Signatur der Methode:
openBackpack: () => void;
Öffnet den Abschnitt
- Die Funktion Rucksack ist im Kundenportal aktiviert.
- Der Benutzer ist bei Metaframe authentifiziert.
Methode window.metaframe.partnerActions.openCustomMiniApp
Signatur der Methode:
openCustomMiniApp: (params: {miniAppName: string}) => void;
Öffnet den angegebenen benutzerdefinierten Abschnitt vom Typ Iframe, wenn eine der folgenden Bedingungen erfüllt ist:
- Wenn die Option Diese App vor der Nutzeranmeldung anzeigen in den Einstellungen des angegebenen benutzerdefinierten Abschnitts aktiviert ist und der aktuelle Nutzer nicht autorisiert ist.
- Wenn die Option Diese App nach der Nutzeranmeldung anzeigen in den Einstellungen des angegebenen benutzerdefinierten Abschnitts aktiviert ist und der aktuelle Nutzer autorisiert ist.
Wenn keine der Bedingungen erfüllt ist, wird in der Browserkonsole ein Fehler angezeigt.
Parameter | Typ | Beschreibung |
---|---|---|
params | object | Objekt mit Parametern. |
params.miniAppName | string | Der App-Name, der in den Einstellungen des benutzerdefinierten Abschnitts vom Typ Iframe angegeben ist. Erforderlich. |
Methoden window.metaframe.partnerActions.pushNotification
Signatur der Methode:
pushNotification: (params: {
type: string; // use “success”, “warning”, “error” or “info”
text: string;
button?: {
text: string;
onClick: () => void;
};
durationInMs?: number;
}) => void;
Pusht eine neue Benachrichtigung in den Benachrichtigungsstapel.
Parameter | Typ | Beschreibung |
---|---|---|
params | object | Objekt mit Parametern. |
paramps.type | string | Benachrichtigungstyp. Mögliche Werte sind: “success” , “warning” , “error” , “info” . Erforderlich. |
paramps.text | string | Benachrichtigungstext. Erforderlich. |
params.button.text | string | Schaltflächentext. Erforderlich. |
params.button.onClick | () => void | Funktion, die beim Klick auf die Schaltfläche aufgerufen wird. Erforderlich. |
params.durationInMs | number | Wie lange die Benachrichtigung auf dem Bildschirm angezeigt wird (in Millisekunden). |
Methode window.metaframe.partnerActions.setIsCustomMiniAppVisible
Signatur der Methode:
setIsCustomMiniAppVisible: (params: {
miniAppName: string;
isVisible: boolean;
}) => void;
Blendet den angegebenen benutzerdefinierten Abschnitt ein oder aus.
Parameter | Typ | Beschreibung |
---|---|---|
params | object | Objekt mit Parametern. |
params.miniAppName | string | Der App-Name, der in den Einstellungen des benutzerdefinierten Abschnitts angegeben ist. Erforderlich. |
params.isVisible | boolean | Ob der angegebene benutzerdefinierte Abschnitt im Widget angezeigt wird. Erfoderlich. |
Widget-Ereignisse
Sie können folgende Metaframe-Ereignisse abonnieren:
Parameter | Typ |
---|---|
@metaframe-partner-events:app-loaded | Das Ereignis wird ausgelöst, wenn Metaframe erfolgreich, nachdem die Methode window.metaframe.create aufgerufen wurde, geladen wird. |
@metaframe-partner-events:not-authorized-mini-apps-loaded | Das Ereignis wird getriggert, wenn Metaframe benutzerdefinierte Abschnitte erfolgreich geladen hat, in deren Einstellungen die Option Diese App nach der Nutzeranmeldung anzeigen aktiviert ist. |
@metaframe-partner-events:authorized-mini-apps-loaded | Das Ereignis wird getriggert, wenn Metaframe alle konfigurierten Widget-Abschnitte erfolgreich geladen hat, einschließlich benutzerdefinierter Abschnitte, in deren Einstellungen die Option Diese App nach der Nutzeranmeldung anzeigen aktiviert ist. |
@metaframe-partner-events:login-successful | Das Ereignis wird ausgelöst, wenn der Benutzer sich erfolgreich beim Metaframe anmeldet. Es enthält ein detail -Objekt mit dem Authorisierungstoken. |
@metaframe-partner-events:logout-successful | Das Ereignis wird ausgelöst, wenn sich ein Benutzer erfolgreich vom System abmeldet. |
@metaframe-partner-events:mini-app-menu-button-clicked:<YOUR_MINI_APP_NAME> | Das Ereignis wird getriggert, wenn ein Nutzer auf einen benutzerdefinierten Metaframe-Abschnitt klickt. |
@metaframe:custom-action:<ACTION_ID> | Das Ereignis wird ausgelöst, wenn ein Benutzer einen beliebigen Abschnitt des Typs Action im Metaframe wählt. Weitere Informationen finden Sie unter Ereignisse beliebiger Abschnitte nachverfolgen. |
Ereignisse in benutzerdefinierten Abschnitten nachverfolgen
Sie können dem Metaframe einen benutzerdefinierten Abschnitt vom Typ “Action” hinzufügen. Dieser Abschnitt erscheint als Schaltfläche, die beim Anklicken eine Aktion ausführt, z. B. eine Website öffnet.
Um das Ereignis nachzuverfolgen, bei dem ein benutzerdefinierter Abschnitt angeklickt wird, müssen Sie das Ereignis @metaframe:custom-action:<ACTION_ID>
abonnieren, wobei die Aktions-ID <ACTION_ID>
im Kundenportal bei der Einrichtung des benutzerdefinierten Abschnitts generiert wird.
Beispiel für das Einrichten eines Listeners für ein Klickereignis eines benutzerdefinierten Abschnitts:
- javascript
document.addEventListener("@metaframe:custom-action:00000000-0000-0000-0000-000000000000", () => {
// Your code here...
})
Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.