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.

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 Wertebereich) der vorhandenen Integrationsmöglichkeiten ein und veranschaulicht diese jeweils in einem interaktiven Showcase.

Story Einbetten

Diese Integration erlaubt es, eine Story in einen Container einzubetten. Wahlweise können die Warenkörbe der sich innerhalb der Story befindlichen Produktkacheln ein- oder ausgeblendet werden.


Parameter Beschreibung
story Definiert die Story, welche eingebettet werden soll. Als Wert wird hier entweder die ID (aus der URL der Detailseite) oder der Code einer Story erwartet. Werden mehrere Stories mit demselben Code gefunden, so wird die aktuellste Story angezeigt.
hideShoppingCarts Definiert, ob die Warenkörbe von möglichen Produktkacheln ausgeblendet werden sollen. Als Wert wird hier entweder true oder false erwartet. Bei true werden die Warenkörbe ausgeblendet.
target Definiert das Ziel-Element, in welches die Story eingebettet werden soll. Als Wert wird hier eine HTML ID inklusive # erwartet.
Story Einbetten - Showcase

Allgemeine Parameter

Bitte geben Sie hier den Portal-Code beziehungsweise die Portal-ID an. Hier finden Sie weitere Informationen.
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.
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.
Bitte geben Sie hier wahlweise die Portallrollen an, um den Zugriff auf Dokumente zu steuern. Hier finden Sie weitere Informationen.

Aufruf Parameter

Geben Sie hier entweder die ID (aus der URL der Detailseite) oder den Code einer Story an. Werden mehrere Stories mit demselben Code gefunden, so wird die aktuellste Story angezeigt.
Blendet Warenkörbe von möglichen Produktkacheln aus.

Ausgabebereich

Banner-Slider

Diese Integration 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.


Parameter Beschreibung
type Definiert den Typ der Stories, 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 Definiert die maximale Anzahl an Stories, welche innerhalb des Slider-Banners angezeigt werden sollen. Als Wert wird hier eine positive Ganzzahl erwartet. Die maximale Anzahl der im Slider dargestellten Stories ist jedoch auf 10 begrenzt.
target Definiert das Ziel-Element, in welches der Slider-Banner eingefügt werden soll. Als Wert wird hier eine HTML ID inklusive # erwartet.
Banner-Slider - Showcase

Allgemeine Parameter

Bitte geben Sie hier den Portal-Code beziehungsweise die Portal-ID an. Hier finden Sie weitere Informationen.
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.
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.
Bitte geben Sie hier wahlweise die Portallrollen an, um den Zugriff auf Dokumente zu steuern. Hier finden Sie weitere Informationen.

Aufruf Parameter

Geben Sie hier den Story-Typ an, welcher im Banner-Slider angezeigt werden soll.
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. Die folgende Tabelle listet alle verfügbaren Aktionen und deren Effekte auf.

Code Link-Aktion Beschreibung Verfügbar für Story-Typ
goto Internal link Jumps to a segment of this story. alle
catalog Open catalog Opens an OXOMI catalog in an overlay. alle
video Open video Opens an OXOMI video in an overlay. alle
gallery Open gallery Opens an OXOMI gallery in an overlay. alle
story Open story Opens another OXOMI story in an overlay. Optional mit Sprungziel innerhalb der Zielstory. alle
product Product Reference Opens a product page alle
productsearch Product Search Reference Opens a product search alle
expand Expand Expands a collapsed story part. Nur Navlets
navpro Navigator Pro search Sets default filters in the currently open Navigator Pro. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-brands Show all brands Opens the view of all markers in Navigator Pro. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-metaclasses Show all product groups Opens the view of all product groups in the Navigator Pro. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-productgroups Show all manufacturer product groups Opens the view of all manufacturer product groups in Navigator Pro. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-series Show all series Opens the view of all series in the Navigator Pro. Nur Startseiten und Markenwelten für Navigator Pro
navpro-all-products Show all products Opens the view of all products in Navigator Pro. Nur Startseiten und Markenwelten für Navigator Pro
Product Reference und Product Search Reference

Für die Aktionen „Product Reference“ und „Product Search Reference“ 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 „Product Reference“ und „Product Search Reference“ 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 „Open catalog“ 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('stories-ready', function () {
    window.scireum.stories.addLinkHandler(handleProduct, 1);
    window.scireum.stories.addLinkHandler(handleProductSearch, 1);
    window.scireum.stories.addLinkHandler(overwriteOpenCatalog, 1);
});
        
See also
Enthält die Grundlagen zum Thema Javascript Integration.