Allgemeines

Dieser Artikel beschäftigt sich mit den Integrationsmöglichkeiten von Stories. Hier steht zum einen die klassische Integration per JavaScript und zum anderen eine serverseitig gerenderte Integration zur Verfügung.

Weitere Informationen zur serverseitigen Einbindung befinden sich im Artikel Public API: Render Stories. Die serverseitige Einbindung ermöglicht eine Suchmaschinen-optimierte (SEO) Integration, da der Inhalt von OXOMI fertig gerendert in Ihre Website eingebunden wird. Dabei ist jedoch zu beachten, dass zusätzlich die clientseitige JavaScript-Integration notwendig ist, um die Interaktivität und die korrekte Darstellung (Styling) der Stories zu gewährleisten.

Die Integration per JavaScript hingegen ist eine einfache Möglichkeit, Stories schnell und effektiv einzubinden. Die nachfolgende ausführliche Beschreibung der JavaScript-Integration setzt die im Artikel JavaScript Integrationsgrundlagen beschriebenen Grundlagen voraus. Der Artikel geht dabei insbesondere auf die Parameter (sowie deren Wertebereiche) der vorhandenen Integrationsmöglichkeiten ein und veranschaulicht diese jeweils in einem interaktiven Showcase.

Stories anzeigen

Die Integration oxomi.stories rendert eine Liste von Stories in den angegebenen DOM-Container. Dabei wird je nach gewünschtem Anzeigemodus entweder eine Liste oder ein Slider mit entsprechenden Stories gerendert. Die Integration bietet verschiedene Filter- und Sortiermöglichkeiten mit denen Sie die Ergebnisse einschränken und anpassen können.

Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.

oxomi.stories({
    target: "#output",
    displayMode: "list",
    showBrandLogos: true,
    showDateOfPublication: true
}).then((result) => {
    console.log("success");
}).catch((error) => {
    console.log("failed");
});

Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.

Parameter Parametertyp Beschreibung
target string

Gibt das Ziel-Element an, in welches die gerenderte Liste von Stories eingefügt wird.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird #oxomi-stories als Default-Wert verwendet.
supplierNumbers string

Gibt die Lieferantennummern der Partner an, auf welche die Ergebnisse eingeschränkt werden sollen.

Hinweis:

  • Sie können Ihre eigenen Lieferantennummern verwenden, wenn Sie diese in der Partnerschaft zum Lieferanten gepflegt haben (siehe: Lieferantennummern).
  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
excludedSupplierNumbers string

Gibt die Lieferantennummern der Partner an, deren Inhalte von den Ergebnissen ausgeschlossen werden sollen.

Hinweis:

  • Sie können Ihre eigenen Lieferantennummern verwenden, wenn Sie diese in der Partnerschaft zum Lieferanten gepflegt haben (siehe: Lieferantennummern).
  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
brandIds string

Gibt die IDs der Marken an, auf welche die Ergebnisse eingeschränkt werden sollen.

Hinweis:

  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
  • Die ID kann in der Detailansicht gefunden werden. Hierzu muss unten rechts auf das Info-Icon geklickt werden. Anschließend kann die ID (Entity-ID) mit einem Klick auf das Kopieren-Icon kopiert werden.
  • Die ID der Marke eines Inhalts kann in der jeweiligen Detailansicht innerhalb der Portalinhalte eingesehen werden.
brands string

Gibt die Namen der Marken an, auf welche die Ergebnisse eingeschränkt werden sollen.

Hinweis:

  • Dieser Parameter sollte nach Möglichkeit nicht verwendet werden, da der Name einer Marke nicht eindeutig ist und geändert werden kann. Verwenden Sie stattdessen den Parameter brandIds.
  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
  • Die Groß- und Kleinschreibung wird bei der Angabe der Werte berücksichtigt.
seriesIds string

Gibt die IDs der Serien an, auf welche die Ergebnisse eingeschränkt werden sollen.

Hinweis:

  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
  • Die ID kann in der Detailansicht gefunden werden. Hierzu muss unten rechts auf das Info-Icon geklickt werden. Anschließend kann die ID (Entity-ID) mit einem Klick auf das Kopieren-Icon kopiert werden.
  • Die ID der Serie eines Inhalts kann in der jeweiligen Detailansicht innerhalb der Portalinhalte eingesehen werden.
tags string

Gibt die Tags an, auf welche die Ergebnisse eingeschränkt werden sollen.

Hinweis:

  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
  • Die Groß- und Kleinschreibung wird bei der Angabe der Werte berücksichtigt.
categoryIds string

Gibt die IDs der Kategorien an, auf welche die Ergebnisse eingeschränkt werden sollen.

Hinweis:

  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
  • Die ID kann in der Detailansicht gefunden werden. Hierzu muss unten rechts auf das Info-Icon geklickt werden. Anschließend kann die ID (Entity-ID) mit einem Klick auf das Kopieren-Icon kopiert werden.
  • Die ID der Kategorie eines Inhalts kann in der jeweiligen Detailansicht innerhalb der Portalinhalte eingesehen werden.
categories string

Gibt die Namen der Kategorien an, auf welche die Ergebnisse eingeschränkt werden sollen.

Hinweis:

  • Dieser Parameter sollte nach Möglichkeit nicht verwendet werden, da der Name einer Kategorie nicht eindeutig ist und geändert werden kann. Verwenden Sie stattdessen den Parameter categoryIds.
  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
  • Die Groß- und Kleinschreibung wird bei der Angabe der Werte berücksichtigt.
types string

Gibt die Story-Typen an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: Story-Typen

Hinweis:

  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
sortBy string

Gibt die Sortierung der Ergebnisse vor. Die nachfolgenden Werte stehen hier zur Verfügung:

Wert Beschreibung
priority Sortierung nach Marken-Priorität & Marken-Namen. Bei gleicher Marke werden die Dokumente alphanumerisch nach dem Dokumentnamen sortiert. Dies ist der verwendete Standard-Wert.
name Sortiert alphanumerisch nach dem Namen. Keine Markensortierung.
date Sortierung nach Datum, neuste Objekte werden zuerst gezeigt.
random Das Ergebnis ist zufällig gemischt.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird date als Default-Wert verwendet.
limit integer

Gibt die maximale Anzahl an Stories an, welche innerhalb der Integration angezeigt werden sollen.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird 128 als Default-Wert verwendet.
  • Der maximal zulässige Wert für den Parameter beträgt 1000.
own boolean

Gibt an, ob nur eigene Stories oder nur Stories von anderen Anbietern angezeigt werden sollen.

Hinweis:

  • Dieser Parameter bezieht sich dabei ausschließlich auf die eigene Standardmarke.
  • Wird dieser Parameter auf true gesetzt, so werden ausschließlich eigene Stories angezeigt.
  • Wird dieser Parameter auf false gesetzt, so werden ausschließlich Stories von anderen Anbietern angezeigt.
  • Wird dieser Parameter nicht angegeben, so werden sowohl eigene als auch Stories von anderen Anbietern angezeigt, sofern diese über eine Partnerschaft verfügbar sind.
showBrandLogos boolean

Gibt an, ob die Markenlogos der Stories angezeigt werden sollen.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird false als Default-Wert verwendet.
  • Wird dieser Parameter auf true gesetzt, so werden die Markenlogos der Stories angezeigt.
  • Wird dieser Parameter auf false gesetzt, so werden die Markenlogos der Stories nicht angezeigt.
displayMode string

Gibt an, wie die Stories angezeigt werden sollen. Die folgenden Werte stehen zur Verfügung:

Wert Beschreibung
list Zeigt die Stories in einer Liste an.
cards Zeigt die Stories als Karten an.
slider-list Zeigt die Stories in einem Slider an, wobei die Stories selbst in der Listenansicht dargestellt werden.
slider-cards Zeigt die Stories in einem Slider an, wobei die Stories selbst in der Kartenansicht dargestellt werden.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird list als Default-Wert verwendet.
showDateOfPublication boolean

Gibt an, ob das Datum der Veröffentlichung der Stories angezeigt werden soll.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird false als Default-Wert verwendet.
  • Wird dieser Parameter auf true gesetzt, so wird das Datum der Veröffentlichung der Stories angezeigt.
  • Wird dieser Parameter auf false gesetzt, so wird das Datum der Veröffentlichung der Stories nicht angezeigt.
filterLanguages string

Gibt die Sprachen als 2-buchstabige ISO-Codes an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: ISO-Sprachcodes

Hinweis:

  • Dieser Parameter steht nur für PRO Portale zur Verfügung. Zu den Preisen & Bestellmöglichkeiten
  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
filterCountries string

Gibt die Länder als 2-buchstabige ISO-Codes an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: ISO-Ländercodes

Hinweis:

  • Dieser Parameter steht nur für PRO Portale zur Verfügung. Zu den Preisen & Bestellmöglichkeiten
  • Die Angabe von mehreren Werten erfolgt durch die Verwendung von , (Komma) oder | (Pipe) als Trennzeichen. Es dürfen keine Leerzeichen enthalten sein.
Stories anzeigen - Showcase

Initialisierungsparameter
(portal)
Bitte geben Sie hier den Portal-Code beziehungsweise die Portal-ID an. Hier finden Sie weitere Informationen.
(user) Bitte geben Sie hier den Benutzernamen eines Portalbenutzers ein. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
(roles) Bitte geben Sie hier wahlweise die Portallrollen an, um den Zugriff auf die Inhalte zu steuern. Hier finden Sie weitere Informationen.
(accessToken) Für die externe Authentifizierung kann ein im integrierenden System generierter Access-Token eingesetzt werden. Benutzen Sie den Access-Token Rechner, um Ihren individuellen Access-Token zu berechnen. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
Hauptparameter
(supplierNumbers) Gibt die Lieferantennummern der Partner an, auf welche die Ergebnisse eingeschränkt werden sollen.
(excludedSupplierNumbers) Gibt die Lieferantennummern der Partner an, dessen Inhalte von den Ergebnissen ausgeschlossen werden sollen.
(brandIds) Gibt die IDs der Marken an, auf welche die Ergebnisse eingeschränkt werden sollen.
(seriesIds) Gibt die IDs der Serien an, auf welche die Ergebnisse eingeschränkt werden sollen.
(categoryIds) Gibt die IDs der Kategorien an, auf welche die Ergebnisse eingeschränkt werden sollen.
(tags) Gibt die Tags an, auf welche die Ergebnisse eingeschränkt werden sollen.
(types)
Gibt die Story-Typen an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: Story-Typen
(limit) Geben Sie hier an, wie viele Stories maximal angezeigt werden sollen.
(own)
Gibt an, ob nur eigene Stories oder nur Stories von anderen Anbietern angezeigt werden sollen.
(showBrandLogos) Geben Sie hier an, ob die Markenlogos der Stories angezeigt werden sollen.
(displayMode)
Geben Sie hier an, wie die Stories angezeigt werden sollen.
(showDateOfPublication) Geben Sie hier an, ob das Veröffentlichungsdatum der Stories angezeigt werden soll.
(filterLanguages)
Gibt die Sprachen als 2-buchstabige ISO-Codes an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: ISO-Sprachcodes
(filterCountries)
Gibt die Länder als 2-buchstabige ISO-Codes an, auf welche die Ergebnisse eingeschränkt werden sollen. Die verfügbaren Werte können hier eingesehen werden: ISO-Ländercodes

Ausgabebereich

Story einbetten

Die Integration oxomi.embedStory erlaubt es, eine Story in einen Container einzubetten.

Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.

oxomi.embedStory({
    target: "#output",
    story: "7733"
}).then((result) => {
    console.log("success");
}).catch((error) => {
    console.log("failed");
});

Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.

Parameter Parametertyp Beschreibung
story string

Gibt die ID oder den Code der Story an.

Hinweis:

  • Wird ein Code angegeben, für den mehrere Stories existieren, so wird die aktuellste verwendet.
  • Die ID kann in der Detailansicht gefunden werden. Hierzu muss unten rechts auf das Info-Icon geklickt werden. Anschließend kann die ID (Entity-ID) mit einem Klick auf das Kopieren-Icon kopiert werden.
target string

Gibt das Ziel-Element an, in welches die gerenderte Story eingefügt wird.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird #oxomi-story als Default-Wert verwendet.
hideShoppingCarts boolean

Gibt an, ob die Warenkörbe von möglichen Produktkacheln ausgeblendet werden sollen.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird false als Default-Wert verwendet.
  • Wird dieser Parameter auf true gesetzt, werden die Warenkörbe ausgeblendet.
  • Wird dieser Parameter auf false gesetzt, werden die Warenkörbe angezeigt.
Story einbetten - Showcase

Initialisierungsparameter
(portal)
Bitte geben Sie hier den Portal-Code beziehungsweise die Portal-ID an. Hier finden Sie weitere Informationen.
(user) Bitte geben Sie hier den Benutzernamen eines Portalbenutzers ein. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
(roles) Bitte geben Sie hier wahlweise die Portallrollen an, um den Zugriff auf die Inhalte zu steuern. Hier finden Sie weitere Informationen.
(accessToken) Für die externe Authentifizierung kann ein im integrierenden System generierter Access-Token eingesetzt werden. Benutzen Sie den Access-Token Rechner, um Ihren individuellen Access-Token zu berechnen. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
Hauptparameter
(story) Gibt die ID oder den Code der Story an.
(hideShoppingCarts) Blendet Warenkörbe von möglichen Produktkacheln aus.

Ausgabebereich

Story öffnen

Mit der Integration oxomi.openStory kann eine Story in einem Overlay geöffnet werden. So können Sie beispielsweise eine Story aus einer Liste oder aus einem anderen Kontext heraus anzeigen.

Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.

oxomi.openStory({
    story: "7733"
}).then((result) => {
    console.log("success");
}).catch((error) => {
    console.log("failed");
});

Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.

Parameter Parametertyp Beschreibung
story string

Gibt die ID oder den Code der Story an.

Hinweis:

  • Wird ein Code angegeben, für den mehrere Stories existieren, so wird die aktuellste verwendet.
  • Die ID kann in der Detailansicht gefunden werden. Hierzu muss unten rechts auf das Info-Icon geklickt werden. Anschließend kann die ID (Entity-ID) mit einem Klick auf das Kopieren-Icon kopiert werden.
hideShoppingCarts boolean

Gibt an, ob die Warenkörbe von möglichen Produktkacheln ausgeblendet werden sollen.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird false als Default-Wert verwendet.
  • Wird dieser Parameter auf true gesetzt, werden die Warenkörbe ausgeblendet.
  • Wird dieser Parameter auf false gesetzt, werden die Warenkörbe angezeigt.
Interaktives Code-Beispiel
Story öffnen - Showcase

Initialisierungsparameter
(portal)
Bitte geben Sie hier den Portal-Code beziehungsweise die Portal-ID an. Hier finden Sie weitere Informationen.
(user) Bitte geben Sie hier den Benutzernamen eines Portalbenutzers ein. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
(roles) Bitte geben Sie hier wahlweise die Portallrollen an, um den Zugriff auf die Inhalte zu steuern. Hier finden Sie weitere Informationen.
(accessToken) Für die externe Authentifizierung kann ein im integrierenden System generierter Access-Token eingesetzt werden. Benutzen Sie den Access-Token Rechner, um Ihren individuellen Access-Token zu berechnen. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
Hauptparameter
(story) Gibt die ID oder den Code der Story an.
(hideShoppingCarts) Blendet Warenkörbe von möglichen Produktkacheln aus.

Ausgabebereich

Banner-Slider

Die Integration oxomi.storiesSlider erlaubt es, einen Banner-Slider in einen Container einzubetten. Der Banner-Slider ermöglicht die automatisch durchwechselnde Vorschauanzeige von mehreren Stories in einem Karussell. Die Stories können dabei vom Betrachter mit einem Klick geöffnet werden. Die Anzahl und der Typ der im Slider angezeigten Stories kann dabei konfiguriert werden.

Der Aufruf der Integration liefert ein Promise zurück, welches Ihnen die Möglichkeit gibt, entsprechend auf den Abschluss des Aufrufs zu reagieren. Hierfür können Sie die then und catch Methoden des Promise Objekts verwenden. Der nachfolgende JavaScript-Code zeigt ein Beispiel, wie Sie auf den Abschluss des Aufrufs reagieren können.

oxomi.storiesSlider({
    target: "#output",
    type: "desktop-slider-slim"
}).then((result) => {
    console.log("success");
}).catch((error) => {
    console.log("failed");
});

Die nachfolgende Tabelle enthält eine Übersicht über die verfügbaren Parameter. Fett gedruckte Parameter sind Pflichtparameter. Die Beschreibung der Parameter enthält Informationen über den Typ des Parameters, die möglichen Werte und die Bedeutung sowie weitere Verwendungshinweise.

Parameter Parametertyp Beschreibung
target string

Gibt das Ziel-Element an, in welches der gerenderte Banner-Slider eingefügt wird.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird #oxomi-stories-slider als Default-Wert verwendet.
type string

Gibt den Typ der Stories an, welche im Banner-Slider angezeigt werden sollen. Die nachfolgenden Werte stehen hier zur Verfügung.

Wert Beschreibung
desktop-slider-slim Slider-Banner
mobile-slider-slim Mobiler Slider-Banner
limit integer

Gibt die maximale Anzahl an Stories an, welche innerhalb des Banner-Sliders angezeigt werden sollen.

Hinweis:

  • Wird der Parameter nicht angegeben, so wird 5 als Default-Wert verwendet.
  • Der maximal zulässige Wert für den Parameter beträgt 10.
Banner-Slider - Showcase

Initialisierungsparameter
(portal)
Bitte geben Sie hier den Portal-Code beziehungsweise die Portal-ID an. Hier finden Sie weitere Informationen.
(user) Bitte geben Sie hier den Benutzernamen eines Portalbenutzers ein. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
(roles) Bitte geben Sie hier wahlweise die Portallrollen an, um den Zugriff auf die Inhalte zu steuern. Hier finden Sie weitere Informationen.
(accessToken) Für die externe Authentifizierung kann ein im integrierenden System generierter Access-Token eingesetzt werden. Benutzen Sie den Access-Token Rechner, um Ihren individuellen Access-Token zu berechnen. Diese Eingabe wird zum Pflichtfeld, falls das entsprechende Portal Login-geschützt ist. Hier finden Sie weitere Informationen.
Hauptparameter
(type)
Geben Sie hier den Story-Typ an, welcher im Banner-Slider angezeigt werden soll.
(limit) Geben Sie hier an, wie viele Stories maximal im Banner-Slider angezeigt werden sollen. Die maximale Anzahl der im Slider dargestellten Stories ist jedoch auf 10 begrenzt.

Ausgabebereich

Story-Aktionen

OXOMI Stories stellen einige Aktionen bereit, die für einen Button oder ein Bild in der Story hinterlegt werden können. Diese Aktionen werden dann ausgeführt, wenn ein Nutzer auf das entsprechende Element klickt oder tippt. Die folgende Tabelle listet alle verfügbaren Aktionen und deren Effekte auf.

Code Link-Aktion Beschreibung Verfügbar für Story-Typ
goto Interner Verweis Verweist auf ein Segment der Story. alle
catalog Katalog öffnen Öffnet einen OXOMI-Katalog in einem Overlay. alle
video Video öffnen Öffnet ein OXOMI-Video in einem Overlay. alle
gallery Exposé öffnen Öffnet ein OXOMI-Exposé in einem Overlay. alle
story Story öffnen Öffnet eine andere OXOMI-Story in einem Overlay. Optional mit Sprungziel innerhalb der Zielstory. alle
product Produkt-Verweis Sprungverweis zu einer Produktseite. alle
productsearch Produktsuche ausführen Führt im angeschlossenen Shop / Produktdatenbank die vorgegebene Suche aus. alle
expand Expand (Ausklappen) Klappt einen eingeklappten Story-Teil aus. Nur Navlets
navpro Navigator Pro Suche Setzt vorgegebene Filter in dem aktuell geöffneten Navigator Pro. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-brands Alle Marken anzeigen Öffnet im Navigator Pro die Ansicht aller Marken. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-metaclasses Alle Produktgruppen anzeigen Öffnet im Navigator Pro die Ansicht aller Produktgruppen. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-productgroups Alle Hersteller-Produktgruppen anzeigen Öffnet im Navigator Pro die Ansicht aller Hersteller-Produktgruppen. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-series Alle Serien anzeigen Öffnet im Navigator Pro die Ansicht aller Serien. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-products Alle Produkte anzeigen Öffnet im Navigator Pro die Ansicht aller Produkte. Nur Startseiten und Markenwelten für Navigator Pro

Für jede Aktion ist ein Default-Handler definiert, welcher das von OXOMI definierte Standardverhalten ausführt. Wenn Sie allerdings anderweitig auf eine entsprechende Aktion reagiert möchten, kann ein eigener Link-Handler registriert werden. Dies ist vor allem dann notwendig, wenn Produkte aus der Story direkt in Ihrem Webshop gekauft werden sollen.

Im nachfolgenden Abschnitt wird exemplarisch beschrieben, wie ein solcher Handler implementiert und anschließend registriert wird, sodass er vom System aufgerufen werden kann.

Produkt-Verweis und Produktsuche ausführen

Für die Aktionen „Produkt-Verweis“ und „Produktsuche ausführen“ muss jeweils der passende Zielaufruf zwingend selbst implementiert werden. Dazu definieren Sie eine Funktion mit den Parametern link (enthält das URL-Objekt der Story-Aktion) und context (enthält den Aktionstyp, das Aktionsziel und eventuelle URL-Parameter).

Link-Handler für „Produkt-Verweis“ und „Produktsuche ausführen“ könnten beispielsweise so aussehen:

function handleProduct(link, context) {
    if (context.action === 'product') {
        window.alert('Öffne Produkt "' + context.target + '" mit Lieferantennummer "' + context.supplierNumber + '"');

        // Link-Aktion wurde verarbeitet. Weitere Link-Handler für 'product' sollen unterbunden werden.
        return true;
    }
    return false;
}

function handleProductSearch(link, context) {
    if (context.action === 'productsearch') {
        window.alert('Starte Suche nach Suchbegriff "' + context.target + '"');

        // Link-Aktion wurde verarbeitet. Weitere Link-Handler für 'productsearch' sollen unterbunden werden.
        return true;
    }
    return false;
}
        
Weitere Aktionen

Alle anderen Aktionen werden standardmäßig innerhalb von OXOMI ausgeführt. Sie können jedoch auch durch eigene Link-Handler erweitert oder überschrieben werden. Mit der folgenden Funktion lässt sich beispielsweise ein zusätzlicher Hinweis anzeigen, bevor ein Katalog-Overlay durch die „Katalog öffnen“ Aktion geöffnet wird.

function overwriteOpenCatalog(link, context) {
    if (context.action === 'navpro-all-series') {
        window.alert('Achtung! Hier wird gleich ein Katalog geöffnet');
    }

    // Da hier nur ein zusätzlicher Hinweis angezeigt werden soll, werden weitere Link-Handler nicht unterbunden.
    return false;
}
        
Registrierung und Priorität

Das folgende Beispiel zeigt, wie die eigenen Link-Handler bei OXOMI registriert werden. Der Zahlenwert gibt dabei die Ausführungspriorität an, wobei ein Handler mit niedrigerem Wert früher ausgeführt wird. Für die Link-Handler von OXOMI liegt die Priorität immer bei 100. Für eigene Handler muss also ein niedrigerer Wert angegeben werden.

// Je niedriger der Prioritäts-Wert ist, desto früher wird der Link-Handler aufgerufen.
document.addEventListener('oxomi-loaded', function () {
    scireum.stories.addLinkHandler(handleProduct, 1);
    scireum.stories.addLinkHandler(handleProductSearch, 1);
    scireum.stories.addLinkHandler(overwriteOpenCatalog, 1);
});
        
Siehe auch
Enthält die Grundlagen zum Thema Javascript Integration.