Infoplay bietet eine produktbezogene Integration Ihrer Daten. Konkret bedeutet das, dass Sie mit Infoplay etwa Artikelnummern aus Dokumenten, Stories oder Exposés mit Produktdaten aus Ihrem System (z. B. Onlineshop oder ERP) verknüpfen können. Weiterhin kann ein Anwender mit einem Klick auf den Bestell-Button im Infoplay-Dialog direkt dieses Produkt in seinen Warenkorb legen, ohne Umwege über die Produktsuche Ihres Systems.
Die Warenkorbübergabe ist nur eine der Möglichkeiten, die Sie hierbei nutzen können. Daneben können Sie auch eine einfache Hyperlink-Verknüpfung mit einer Produkt-Detailseite herstellen. Darüber hinaus können via Infoplay Direct Produktkacheln und Datenblätter in OXOMI Integrationen wie Stories, Universal Search und Navigator Pro mit Preis- und Verfügbarkeitsinformationen angereichert werden.
Die Beschreibung setzt die Grundlagen des Artikels JavaScript Integrationsgrundlagen voraus. Der Artikel geht dabei insbesondere auf die Parameter (sowie deren Wertebereich) der vorhandenen Integrationsmöglichkeiten ein und veranschaulicht diese jeweils mithilfe eines Beispiels.
Zusätzlich setzt die Beschreibung die Grundlagen des Artikels (Missing Article) voraus, denn die Anbindung von Infoplay erfolgt mittels der scireum BUZZ Schnittstelle. Diese ermöglicht eine einfache und asynchrone Kommunikation - sowohl zwischen Anwendungen im Browser, als auch mit nativen Anwendungen oder Apps, welche entsprechende Callbacks im Browser hinterlegen.
Mit der Capability enhanceProductData können die Daten eines Produktes erweitert werden. Insbesondere können Preis und Verfügbarkeit angezeigt werden.
In der empfangenen Nachricht stehen die folgenden Informationen:
Feld | Beschreibung | ||||||
---|---|---|---|---|---|---|---|
itemNumber | Enthält die Artikelnummer des angefragten Produktes. | ||||||
gtin | Enthält die GTIN des angefragten Produktes, falls am Produkt hinterlegt. | ||||||
supplierNumber |
Enthält die Nummer des Lieferanten, für den die Anfrage gestellt wurde. Diese wird in der Partnerschaft hinterlegt (andernfalls ist diese „-“). Bei eigenen Produkten ist diese auch „-“. |
||||||
supplierNumbers |
Sind in der Partnerschaft mehrere Lieferantennummern hinterlegt, so werden hier alle Nummern als Array übertragen. In diesem Fall enthält supplierNumber die erste Nummer. |
||||||
brand.name | Enthält den Markennamen des Herstellers. | ||||||
scope |
Definiert den Umfang der Daten die an der angefragten Stelle angezeigt werden können. Dies erlaubt es, bestimmte, komplexer zu berechnende Informationen nur dann zu laden, wenn diese letztendlich auch angezeigt werden. Mögliche Werte:
|
Als Ergebnis kann eine Nachricht mit den folgenden Informationen zurückgegeben werden:
Feld | Beschreibung | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
itemNumber | Kann verwendet werden, um die angezeigte Herstellerartikelnummer zu überschreiben. | |||||||||||||||||||||
gtin | Kann verwendet werden, um die angezeigte Hersteller-GTIN zu überschreiben. | |||||||||||||||||||||
model | Kann verwendet werden, um die angezeigte Hersteller-Type zu überschreiben. | |||||||||||||||||||||
shortText | Kann verwendet werden, um den angezeigten Hersteller-Kurztext zu überschreiben. | |||||||||||||||||||||
price.prefix |
Gibt ein Präfix für den Hauptpreis (z. B. zzgl. MwSt.) an. Hinweis:
|
|||||||||||||||||||||
price.amount | Gibt den Preis des Produktes an. Dieser sollte zur Anzeige für den Benutzer formatiert (inkl. Währungssymbol) sein. | |||||||||||||||||||||
priceQuantity | Gibt die Bezugsmenge des Preises an. Beispiel: "je 1 Stück". Auch diese sollte fertig zur Anzeige beim Benutzer formatiert sein. | |||||||||||||||||||||
alternativePrice.prefix | Gibt ein Präfix für den Alternativ-Preis (z. B. inkl. MwSt.) an. | |||||||||||||||||||||
alternativePrice.amount |
Gibt den Alternativ-Preis des Produktes an. Dieser sollte zur Anzeige für den Benutzer formatiert sein. Hinweis:
|
|||||||||||||||||||||
availability.state |
Gibt die Farbe der Verfügbarkeitsampel vor. Mögliche Werte:
|
|||||||||||||||||||||
availability.fromSupplier | Gibt an, dass sich die Verfügbarkeit nicht auf das eigene Lager, sondern auf den Hersteller selbst bezieht. Dies wird durch entsprechende Icons signalisiert. | |||||||||||||||||||||
availability.text | Gibt eine ergänzende Verfügbarkeitsmeldung aus. | |||||||||||||||||||||
order.quantity |
Gibt die empfohlene Bestellmenge an. Diese sollte fertig formatiert sein, da dieser Wert dem Benutzer im Eingabefeld angezeigt wird. Die Mengeneinheit wird in order.unit angegeben und sollte hier nicht enthalten sein. Wenn es keine Vorschlagsmenge gibt, können Sie einen leeren String angeben. Hinweis:
|
|||||||||||||||||||||
order.unit | Gibt die Mengeneinheit an, in der bestellt wird. Diese wird als Hinweise neben dem Eingabefeld angezeigt. | |||||||||||||||||||||
additionalFields | Enthält ein Array (z. B. [{label: 'Feldname', text: 'Wert'}], welches als weitere Name-Wert-Paare auf der Detailseite des Produktes anzeigt wird. | |||||||||||||||||||||
datasheetUrl | Kann verwendet werden, um einen Link zum Datenblatt des Produktes anzugeben. Dieser wird dann als Button im Infoplay Dialog angezeigt. |
Beispiel:
shop.addCapability('enhanceProductData', function (message) { const product = message.payload(); product.gtin = "alternative GTIN"; product.itemNumber = "alternative Artikelnummer"; product.model = "alternative Type"; product.shortText = "alternativer Kurztext"; product.availability = { state: "full", text: "Ausreichend auf Lager" }; product.price = { prefix: "zzgl. MwSt.", amount: "100,00 EUR", }; product.alternativePrice = { prefix: "inkl. MwSt.", amount: "119,00 EUR", }; product.priceQuantity = "je 1 Stück"; product.order = { quantity: "10", unit: "Stück" }; message.reply(product); });
Sollte in Ihrem System keinen Verfügbarkeitsinformationen vorliegen, oder das Produkt als ausverkauft gemeldet werden, so können Sie mittels oxomi.checkAvailability weitere Verfügbarkeiten des Herstellers über OXOMI Blink anfragen und in Ihre Antwort einfließen lassen (siehe Herstellerverfügbarkeiten - OXOMI Blink).
Beispiel:
shop.addCapability('fetchProductData', function (message) { const request = message.payload(); const product = { // ... (siehe oben) }; // Verfügbarkeit von OXOMI laden, falls lokal keine bekannt ist... oxomi.checkAvailability({ itemNumber1: request.itemNumber, supplierNumber1: request.supplierNumber, cached: true, callback: function(blinkResponse) { product.availability = { state: blinkResponse.items[0].stockIndicator, text: blinkResponse.items[0].stockMessage }; message.reply({ products: [ product ] }); } }); });
Mit der Capability addProductToBasket werden Produkte in den Warenkorb gelegt. Ein Warenkorb wird angezeigt, wenn Sie für ein Produkt in enhanceProductData bei order.quantity und/oder order.unit einen Wert angeben. Als Nachricht, wird das komplette Ergebnis von enhanceProductData erneut übermittelt. Wenn Sie also hier dem Objekt weitere Attribute hinzufügen, können Sie diese hier erneut abfragen.
In der empfangenen Nachricht stehen die folgenden Informationen:
Feld | Beschreibung |
---|---|
product.* | Prinzipiell enthält die Nachricht alle Felder, die in enhanceProductData gefüllt werden, auch solche, die von OXOMI selbst nicht verarbeitet oder angezeigt werden. Falls nicht überschrieben, werden die Felder itemNumber, supplierNumber, supplierNumbers, gtin und brand.name aus der ursprünglichen Anfrage übernommen. |
product.order.quantity | Falls ein Mengeneingabefeld verfügbar war (z. B. im Produktdatenblatt), wird hier die gewünschte Bestellmenge (als benutzer-formatierte Eingabe) übermittelt. Wenn kein Eingabefeld angezeigt wird, aber in enhanceProductData eine Menge angegeben wurde, wird diese hier übermittelt. |
Beispiel:
shop.addCapability('addProductToBasket', function (message) { const product = message.payload().product; // TODO handle product... });
Hier wird keine Rückgabe oder Antwort erwartet.
Mittels der Capabilities jumpToProduct und provideJumpToProductLabel kann der Infoplay-Dialog und der Kopfbereich des Datenblatts um eine Schaltfläche erweitert werden, die den Benutzer direkt zum Produkt springen lässt.
Die Capability provideJumpToProductLabel legt hierbei den Text für die Schaltfläche fest und jumpToProduct die auszuführende Logik beim Klick auf die Schaltfläche.
Sind beide Capabilities gesetzt, wird die Schaltfläche im Kopfbereich des Datenblatts und im Infoplay-Dialog angezeigt. Darüber ist es unter anderem möglich, den Nutzer direkt zur erweiterten Produktdetailseite auf ihrer Website zu leiten, aber auch andere über JavaScript lösbare Aktionen sind denkbar.
Wird die Schaltfläche vom Nutzer betätigt, wird die Capability jumpToProduct mit den folgenden Informationen als Nachricht aufgerufen:
Feld | Beschreibung |
---|---|
product.* | Prinzipiell enthält die Nachricht alle Felder, die in enhanceProductData gefüllt werden, auch solche, die von OXOMI selbst nicht verarbeitet oder angezeigt werden. Falls nicht überschrieben, werden die Felder itemNumber, supplierNumber, supplierNumbers, gtin und brand.name aus der ursprünglichen Anfrage übernommen. |
Beispiel:
shop.addCapability('provideJumpToProductLabel', function (message) { message.reply({label: 'Zum Produkt'}); }); shop.addCapability('jumpToProduct', function (message) { const product = message.payload().product; // Zum Produkt springen... window.open('/product/' + product.supplierNumber + '/' + product.itemNumber); });
Hier wird keine Rückgabe oder Antwort erwartet.
Mit der Capability fetchProductData können die Daten eines Produktes abgerufen werden. Die Capability wird verwendet, wenn eine Artikelnummer in einem Dokument oder Exposé angeklickt wird. Wenn diese Capability nicht vorhanden ist, oder ein leeres Ergebnis liefert, wird das Produkt in OXOMI Data gesucht und anschließend mit enhanceProductData erweitert. Dieser Callback kann also insbesondere verwendet werden, wenn die eigenen Daten bevorzugt vor den OXOMI-Daten angezeigt werden sollen, oder wenn Daten geliefert werden können, die nicht in OXOMI verfügbar sind.
Die Daten sind im Wesentlichen dieselben, wie bei enhanceProductData, jedoch können hier mehrere Produkte zurückgegeben werden, falls die Artikelnummer nicht eindeutig ist. Weiterhin kann zusätzlich mit previewImageUrl ein Vorschaubild und mittels brand Marken-Informationen angegeben werden.
In der empfangenen Nachricht stehen die folgenden Informationen:
Feld | Beschreibung |
---|---|
itemNumber | Enthält die Artikelnummer des angefragten Produktes. |
supplierNumber |
Enthält die Nummer des Lieferanten, für den die Anfrage gestellt wurde. Diese wird in der Partnerschaft hinterlegt (andernfalls ist diese "-"). Bei eigenen Produkten ist diese auch "-". |
supplierNumbers |
Sind in der Partnerschaft mehrere Lieferantennummern hinterlegt, so werden hier alle Nummern als Array übertragen. In diesem Fall enthält supplierNumber die erste Nummer. |
Als Ergebnis kann entweder eine Liste mit einem oder mehreren Produkten als {products: [product1, product2]} übergeben werden, oder ein komplett leeres Objekt, also {}, falls OXOMI selbst nach dem Produkt suchen soll.
Ein einzelnes Produkt kann wie folgt aussehen:
Feld | Beschreibung | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
itemNumber | Gibt die effektive Artikelnummer aus. | |||||||||||||||||||||
gtin | Gibt die anzuzeigende GTIN an. | |||||||||||||||||||||
model | Gibt die Type oder Modellnummer des Produktes an. | |||||||||||||||||||||
shortText | Enthält den Kurztext des Produktes. | |||||||||||||||||||||
previewImageUrl | Enthält die URL zum Vorschaubild des Produktes. | |||||||||||||||||||||
brand.name | Enthält den Markennamen des Herstellers. | |||||||||||||||||||||
brand.imageUrl | Enthält die URL zum Markenlogo des Herstellers. | |||||||||||||||||||||
price.prefix |
Gibt ein Präfix für den Hauptpreis (z. B. zzgl. MwSt.) an. Hinweis:
|
|||||||||||||||||||||
price.amount | Gibt den Preis des Produktes an. Dieser sollte zur Anzeige für den Benutzer formatiert (inkl. Währungssymbol) sein. | |||||||||||||||||||||
priceQuantity | Gibt die Bezugsmenge des Preises an. Beispiel: "je 1 Stück". Auch diese sollte fertig zur Anzeige beim Benutzer formatiert sein. | |||||||||||||||||||||
alternativePrice.prefix | Gibt ein Präfix für den Alternativ-Preis (z. B. inkl. MwSt.) an. | |||||||||||||||||||||
alternativePrice.amount |
Gibt den Alternativ-Preis des Produktes an. Dieser sollte zur Anzeige für den Benutzer formatiert sein. Hinweis:
|
|||||||||||||||||||||
availability.state |
Gibt die Farbe der Verfügbarkeitsampel vor. Mögliche Werte:
|
|||||||||||||||||||||
availability.fromSupplier | Gibt an, dass sich die Verfügbarkeit nicht auf das eigene Lager, sondern auf den Hersteller selbst bezieht. Dies wird durch entsprechende Icons signalisiert. | |||||||||||||||||||||
availability.text | Gibt eine ergänzende Verfügbarkeitsmeldung aus. | |||||||||||||||||||||
order.quantity |
Gibt die empfohlene Bestellmenge an. Diese sollte fertig formatiert sein, da dieser Wert dem Benutzer im Eingabefeld angezeigt wird. Die Mengeneinheit wird in order.unit angegeben und sollte hier nicht enthalten sein. Wenn es keine Vorschlagsmenge gibt, können Sie einen leeren String angeben. Hinweis:
|
|||||||||||||||||||||
order.unit | Gibt die Mengeneinheit an, in der bestellt wird. Diese wird als Hinweise neben dem Eingabefeld angezeigt. | |||||||||||||||||||||
additionalFields | Enthält ein Array (z. B. [{label: 'Feldname', text: 'Wert'}], welches als weitere Name-Wert-Paare auf der Detailseite des Produktes anzeigt wird. | |||||||||||||||||||||
datasheetUrl | Kann verwendet werden, um einen Link zum Datenblatt des Produktes anzugeben. Dieser wird dann als Button im Infoplay Dialog angezeigt. |
Beispiel:
shop.addCapability('fetchProductData', function (message) { const product = { gtin: "GTIN", itemNumber: "Artikelnummer", model: "Type", shortText: "Kurztext", previewImageUrl: "https://...", brand: { name: "Hersteller", imageUrl: "https://..." }, availability: { state: "full", text: "Ausreichend auf Lager" }, price: { prefix: "zzgl. MwSt.", amount: "100,00 EUR", }, alternativePrice: { prefix: "inkl. MwSt.", amount: "119,00 EUR", }, priceQuantity: "je 1 Stück", order: { quantity: "10", unit: "Stück" } }; message.reply({ products: [ product ] }); });
Genau wie bei enhanceProductData kann auch hier oxomi.checkAvailability verwendet werden, um Herstellerverfügbarkeiten nachzuladen, falls keine Informationen vorliegen.