2. Hilfe
  3. Integration
  4. Infoplay 2.0

Infoplay 2.0

Infoplay ist eine artikelbezogene Integration Ihrer Daten. Konkret bedeutet das, dass Sie mit Infoplay z.B. Artikelnummern aus Katalogen, Langtexten oder Exposés mit Artikeln aus Ihrem Shop-System verknüpfen können. Mit Klick auf den Bestell-Button im Infoplay-Dialog, kann so auf diese Weise ein Anwender direkt diesen Artikel in seinen Warenkorb legen, ohne Umwege über die Artikelsuche Ihres Shop-Systems.

Die Warenkorbübergabe ist nur eine der Möglichkeiten, die Sie hierbei nutzen können. Neben der Warenkorbübergabe können Sie auch eine einfache Hyperlink-Verknüpfung mit einer Produkt-Detailseite herstellen.

Beispiel: Infoplay 2.0 Dialog

Infoplay 2.0 Dialog

Um Infoplay einzusetzen benötigen Sie neben unseren OXOMI JavaScript-Baustein auch die entsprechende Option "Infoplay" in Ihrem Leistungspaket. Details zum JavaScript-Baustein finden Sie bei den JavaScript-Integration Grundlagen .

Grundlagen

Infoplay anpassen

Die Infoplay-Integration wird angepasst indem Sie bei der Initialisierung mithilfe vonoxomi.init() die notwendigen Funktionen übergeben.

Übersicht: Anpassbare Funktionen

Eigenschaft Funktionalität
infoplayItemLookup Dient dazu, Preis und Verfügbarkeit sowie weitere Artikeldaten aus Ihrem Warenwirtschafts- oder Shop-System abzufragen.

Details finden Sie unter Eigene Artikelinformationen integrieren
infoplayEmptyResultHandler Wird aufgerufen, wenn weder die infoplayItemLookup noch die interne Suche von OXOMI Daten zu der gegebenen Artikelnummer findet. Dies kann dazu verwendet werden um einen generischen Platzhalterartikel für Anfragen zu erzeugen. Die Aufruf-Signatur ist hierbei gleich wie bei infoplayItemLookup. Wird die Funktion weggelassen, wird dem Benutzer eine entsprechende Meldung angezeigt.
infoplayBasketHandler Dient dazu, einen gefunden Artikel in den Warenkorb des Shop-Systems zu legen.

Details finden Sie im Abschnitt Warenkorbübergabe
infoplayItemHandler Dient dazu, eine komplett eigene Infoplay-Funktionalität einzubauen.

Details finden Sie im Abschnitt Eigene Infoplay-Funktionalität

Beispiel: Eigene Infoplay-Funktionalität anpassen

oxomi.init({
    "portal": "demo",
    "infoplayItemLookup": function(infoplayObj, nextFunc) {},
    "infoplayBasketHandler": function(infoplayObj, nextFunc) {}
});

Hinweis: Sie können die Infoplay2.0-Funktionalität mit unseren Beispieldaten aus dem Portal "DEMO" mit der Artikelnummer "ST.001.A" testen.

Infoplay Datenstruktur

Die für Infoplay relevanten Daten werden in der nachfolgenden Datenstruktur zur Verfügung gestellt. Auf das entsprechende JavaScript-Objekt können alle Infoplay-Funktionen zugreifen. Die Eigenschaften der ersten Ebene des Objekts wird vom OXOMI JavaScript-Baustein befüllt.

Beispiel: Infoplay Datenstruktur

{
    // Diese Werte werden vom JavaScript-Baustein befüllt
    'itemNumber': '1234.56 78',         // String
    'compactSelection': '1234.5678',    // String
    'supplierNumber': '1111',           // String
    'supplierNumbers':['1111', '1112'], // Liste
    'direct': null,                     // Boolean
    'catalogId': 'ABC123',              // String
    'catalogName': 'Katalog',           // String
    'pageNum': 1,                       // Number
    'visiblePageNum': 'COVER',          // String

    // Dieses Array muss beim Artikel-Lookup von Ihnen befüllt werden
    'items': [                          // Array
        // ...
    ]
}

Die Eigenschaft items muss von Ihnen während des Artikel-Lookups mit Artikelinformationen in Form eines JavaScript-Objekts befüllt werden. Dieser Eigenschaftswert ist ein Array, da sich hinter einer Artikelnummer mehrere Artikelvarianten verstecken könnten.

Beispiel: items-Objekte in Infoplay Datenstruktur

{
    // ...

    // Dieses Array wird beim Artikel-Lookup von Ihnen befüllt
    'items': [                              // Array
        {'itemNumber': '1234.5678',              // String
        'supplierName': 'ACME Ltd.'             // String
        'shortText': 'Beschreibungstext',       // String
        'previewImageUrl': '/vorschaubild.jpg', // String
        'itemUrl': '/artikel/1234',             // String
        'features': [                           // Array
            {'title': 'Verfügbarkeit',          // String
             'fields': [                        // Array
                {'name': 'Hauptstandort',       // String
                 'span': false,                 // Boolean
                 'value': '50 Stk'}             // String
            ]}
        ],
        'sections': [],                         // Array
        'open': function() { ... },             // Function
        'select': function() { ... }            // Function
        }
    ]
}

Übersicht: items-Objekt Eigenschaften

Eigenschaft Typ Beschreibung
itemNumber String Artikelnummer des ausgewählten Artikels
supplierName String Names des Herstellers
shortText String Beschreibungstext des ausgewählten Artikels
shortTextHTML String

Alternativer Beschreibungstext des ausgewählten Artikels als HTML. Wenn gefüllt, ersetzt dies shortText in der Anzeige.

Nutzen Sie diese Objekt Eigenschaft, falls ihr Artikel-Lookup Sonderzeichen als kodierte HTML-Entitäten (z.B. ü statt ü) ausgibt.

quantity String Initiale Bestellmenge. Bei Klick auf Bestellen-Button die aktuelle Bestellmenge aus dem Infoplay-Dialog.
previewImageUrl String Internetadresse eines Vorschaubildes
itemUrl String Internetadresse zum Artikel (z.B. in einem Online-Shop)
features Array

Hier können Sie einen dynamischen Bereich des Infoplay-Dialogs selbst definieren. Jeder Baustein ist ein JavaScript-Objekt, das aus den Attributen title und fields besteht, wobei fields wiederum aus den Eigenschaften name, span und value bestehen kann.

  • Mit name definieren Sie die Bezeichnung des Wertes (Typ: String)
  • Mit span definieren Sie, ob der Abschnitt auf die gesamte Breite des Dialogs geht, oder nicht (Typ: Boolean).
  • Mit value definieren Sie den Wert dieses Feldes (Typ: String).

Pro-Tipp: In den Wert value können Sie auch eigenes HTML oder ein jQuery-Objekt mit verknüpften Event-Listenern übergeben. Letzteres können Sie nutzen um zusätzliche Buttons in den Dialog zu bauen. Um sicherzugehen, dass Ihr Wert immer als reiner Text angezeigt wird kann im Gegenzug das optionale Attribut plainText mit true belegt werden.

sections Array

Definieren Sie hier analog zum Wert features eigene Dialog-Abschnitte. Die hier definierten Abschnitte überschreiben das Standard-Aussehen des Infoplay-Dialogs.

Hiermit können Sie den kompletten Infoplay-Dialog selbst definieren. Wollen Sie dies nicht, dann nutzen Sie besser den Eigenschaftswert features.

open Function Definiert optional die Funktion, die mit der "Zum Artikel springen" Funktion ausgeführt wird. Alternativ wird ein Link zu dem Wert itemUrl eingebaut.
select Function Definiert die Funktion, die aufgerufen wird, wenn eine von mehreren Artikelvarianten ausgewählt wird.
reresolve boolean Sollte mehrere Artikelvarianten gefunden werden, so kann dieser Wert gesetzt werden um bei Auswahl einer Alternative die infoplayItem Funktion erneut mit der ermittelten Artikelnummer und "isSelectedAlternative=true" aufzurufen. Dies kann verwendet werden um weitere Daten für einen einzelnen Artikel zu laden.

Standardmäßig ist dieser Parameter false, und bei Auswahl einer Alternative (die weder eine select() noch open() Funktion hat, wird direkt der ermittelte Artikel angezeigt.

Infoplay Code-Reihenfolge

Übersicht: Die wichtigsten Funktionen

Funktion Beschreibung
infoplayItem Steuert die Ausführung des gesamten Infoplay-Codes
infoplayItemHandler Ersetzt, falls vorhanden, die komplette Integration der Infoplay-Komponente mit eigener Funktionalität
infoplayItemLookup Führt das Nachschlagen der Artikelinformationen von Ihrem System durch
Rendering Mehrere Funktionen, die die Ausgabe des Infoplay-Dialogs erzeugen
infoplayBasketHandler Definiert das Verhalten, wenn der Anwender auf den Bestell-Button im Dialog klickt
Individualisierbare Funktionen sind hervorgehoben.

Eigene Artikelinformationen integrieren

Infoplay integriert Ihre Artikelinformationen in den OXOMI Portal-Viewer und Exposés. Die integrierten Artikelinformationen werden hierbei von Ihren Systemen abgefragt.

Für diesen Fall belegen Sie den Eigenschaftswert infoplayItemLookup mit einer eigenen Funktion und befüllen Sie die items Eigenschaft des Infoplay-Objekts mit den von Ihnen stammenden Artikelinformationen.

Beispiel: Eigener Artikel-Lookup

oxomi.init({
    "portal": "demo",
    "infoplayItemLookup": function(infoplayObj, nextStep) {

        // Eigenen Webservice für Artikelinformationen abfragen
        $.getJSON('webservice.ich.ag/artikel/'+ infoplayObj.itemNumber,
            function(data) {

                // Ihre Artikelinformationen in übernehmen
                infoplayObj.items.push({
                    'itemNumber': data.artikelnummer,
                    'supplierName': data.herstellerName,
                    // ...
                });

                // Nachfolgende Funktion im Infoplay-Code aufrufen
                nextStep(infoplayObj);
            });
    }
});

Für die Abfrage Ihrer Artikelinformationen werden Sie in der Regel eine Webservice-Schnittstelle abfragen. Achten Sie darauf, dass Sie Ihre Daten in die korrekte Infoplay-Objekt Datenstruktur bringen.

Wichtig: Falls Sie in einem Exposé mehrere Artikelnummern bei einer Verlinkung (grüner Punkt) hinterlegt haben, werden diese als Array in infoplayObj.itemNumbers übergeben! Die erste dieser Artikelnummern steht wie üblich in infoplayObj.itemNumber. Falls Sie das Artikelliste-Feature in Exposés nutzen möchten, achten Sie bitte darauf, dass ihr eigener Webservice dann nach allen Artikelnummern aus infoplayObj.itemNumbers sucht. Falls Sie das Feature nicht nutzen, können Sie diesen Hinweis ignorieren.

Beispiel: Infoplay-Objekt mit eigenen Daten

{
    // ...
    'items': [
        {'itemNumber': '1234.5678',
        'supplierName': 'ACME Ltd.'
        'shortText': 'Beschreibungstext',
        'previewImageUrl': '/vorschaubild.jpg',
        'itemUrl': '/artikel/1234',
        'features': [
            {'fields': [{
                  'name': 'Verkaufspreis',
                  'value': '134 EUR'
                }, {
                  'name': 'Mindesbestellmenge',
                  'value': '1 Stk'
                }, {
                  'name': 'Bestellschritt',
                  'value': '1 Stk'
                }]
            }
        ]}
    ]
}

Wichtig: Vergessen Sie nicht in der von Ihnen programmierten Funktion als Abschluss die Funktion für den nachfolgenden Verarbeitungsschritt aufzurufen. Diese Callback-Funktion erhalten Sie als zweiten Parameter im Funktionsaufruf. Übergeben Sie der nachfolgenden Funktion das von Ihnen bearbeitete Infoplay-Objekt.

Beispiel: Nachfolgende Funktion aufrufen

oxomi.init({
    "portal": "demo",
    "infoplayItemLookup": function(infoplayObj, nextStep) {

        // Hier verarbeite ich die Informationen des Artikels
        // ...

        // ...und rufe abschließend die nachfolgende Funktion auf
        nextStep(infoplayObj);
    }
});

Warenkorbübergabe

Sie haben die Möglichkeit Infoplay so anzupassen, dass bei Klick auf den Bestell-Button im Infoplay-Dialog der entsprechende Artikel in den Warenkorb Ihres Online-Shops gelegt wird. Hierfür definieren Sie Ihre spezielle Funktion und belegen damit den Eigenschaftswert infoplayBasketHandler.

Beispiel: Code für Warenkorbübergabe

oxomi.init({
    "portal": "demo",
    "infoplayBasketHandler": function(infoplayObj, nextStep) {

        // z.B.: Weiterleitung zu Warenkorb-Hinzufügen
        // ...mit Artikelnummer und Bestellmenge
        location.href = '/warenkorb/hinzufuegen?artikel='+ infoplayObj.itemNumber +'&quantity=' + infoplayObj.quantity;
    }
});

Sonstige Anpassungen

Menü-Titel ändern

Der Infoplay-Dialog wird über ein Kontextmenü im Portal-Viewer vom Anwender aufgerufen. Der Titel des dortigen Links lässts sich durch den Parameter infoplayMenuTitle konfigurieren.

Portal-Viewer Artikel-Kontextmenü Standardfall

Wird kein Menü-Titel konfiguriert, so wird der Standardtext "Daten zu *** suchen..." angezeigt. "***" steht hierbei für die markierte Artikelnummer und wird im Titel dynamisch durch den Platzhalter __text__ eingebettet.

Beispiel: Anpassung Menü-Titel

oxomi.init({
    // ...
    "infoplayMenuTitle" : "Zum Warenkorb hinzufügen..."
});
}

Beispiel: Anpassung Menü-Titel mit markierter Artikelnummer

oxomi.init({
    // ...
    "infoplayMenuTitle" : "Ich möchte __text__ im Warenkorb haben..."
});
Zurück zur Übersicht
OXOMI - Made with Love by scireum in Remshalden Hilfesystem
Zur englischen Version des Hilfesystems scireum-vmc1-test-oxomi-3