Darstellung anpassen

Styling mit CSS

Einfache Anpassungen der Darstellung erreichen Sie mithilfe eigener CSS-Regeln. Überschreiben Sie die vordefinierten Regeln mit Ihren eigenen Regeln, indem Sie ein eigenes Stylesheet einbinden oder entsprechende inline-Styles definieren.

Hinweis: Bitte beachten Sie, dass Anpassungen der CSS oder der Templates nur durchgeführt werden sollten, wenn Sie damit Erfahrung haben und Ihnen bewusst ist, dass damit fortlaufende Wartungsaufwände verbunden sein können! OXOMI wird regelmäßig gepatcht, daher ist es nicht ausgeschlossen, dass Sie Ihre Anpassungen von Zeit zu Zeit warten müssen.

Wir informieren Sie per MEMOIO-Broadcast, wenn am System Änderungen vorgenommen wurden. Um die Benachrichtigungen zu abonnieren, klicken Sie hier: OXOMI-Änderungen abonnieren.

Hinweis: Nutzen Sie zum Entwickeln Ihrer Stylings die Entwicklungstools Ihres Browsers.

Beispiel: Vorschaubild-Größe der Katalog-Übersicht

<style type="text/css">
.oxomi-catalog img {
    max-width: 165px;
}
.oxomi-catalog-links .oxomi-catalog-title {
    width: 100px;
}
</style>

Styling des HTML-Viewers mit CSS

Auch die Darstellung des neuen HTML-Viewer für Dokumente lässt sich mit Hilfe von CSS-Regeln anpassen. Legen Sie hierfür ein eigenes Stylesheet auf Ihrem Server ab, welches die Regeln unseres Viewers überschreibt und übergeben Sie anschließend die (absolute) URL zu diesem Stylesheet als Parameter webviewerCSS beim oxomi.init() Aufruf.

Beispiel: Anpassung der HTML-Viewer Darstellung mittels CSS

oxomi.init({
    portal: 'IHRE PORTAL-ID',
    user: 'BENUTZERNAME',
    accessToken: 'AUTHENTIFIZIERUNGS-TOKEN',
    webviewerCSS: 'STYLESHEET-URL'
});

Styling-Klassen ergänzen

Eine weitere Möglichkeit die Darstellung der eingebunden Daten anzupassen, ist es, die Klassen des HTML-Markups durch eigene Klassen zu erweitern.

Parameter Beschreibung
classMap

Definiert die Erweiterungsregeln in Form eines JavaScript-Objekts. Objekt-Eigenschaften sind jQuery-Selektoren (z.B. #link oder .links), deren Klassen-Attribut durch die nachfolgenden Klassen erweitert wird.

Beispiel:

// API Aufruf und definierte Klassen-Erweiterungen
oxomi.embedCatalog({ catalog: '9000179',
                     target: '#my-catalog',
                     classMap: {
                         '.oxomi-catalog' : 'span3',
                         '.oxomi-link' : 'pull-right extralarge'
                     }
                   });

Hinweis: Dieses Property kann entweder als Property beim Integrationsaufruf oder als Property während der Initialisierung übergeben werden.

Templates ändern

Für eine strukturelle Anpassung des dargestellten Markup haben Sie die Möglichkeit eigene Templates zu definieren. Die Template-Schnipsel werden mit Mustache-Code mit Daten befüllt. Details zur  Mustache-Template Sprache finden Sie hier.

Hinweis: Beachten Sie, dass Sie alle Template-Variablen aus den vordefinierten Templates beibehalten sollten. Ansonsten werden nicht alle Information dargestellt.

Templates können Sie auf zwei unterschiedliche Arten ändern. Entweder mit dem Property template im jeweiligen Integrationsaufruf oder während der Initialisierung des JavaScript-Codes oxomi.init() mit entsprechenden Template-Properties.

Integrationsaufruf

Parameter Beschreibung
template

Gibt die Vorlage an, welche als Vorlage für den einzubindenden HTML-Code dient. Dieses Template muss in der Mustache-Template Sprache beschrieben sein.

Beispiel:

// API Aufruf durchführen und HTML-Vorlage definieren
oxomi.embedCatalog({ catalog: '9000179',
                     target: '#my-catalog',
                     template: '<img src="{{mediumUrl}}" />'});

Initialisierung

Benutzen Sie die nachfolgenden Template-Property, um während der Initialisierung Templates festzulegen.

Aufruf Parameter
oxomi.embedCatalog embedCatalogTemplate
oxomi.catalogs catalogsTemplate
oxomi.itemPages itemPagesTemplate
oxomi.itemAttachments itemAttachmentsTemplate
oxomi.itemImages itemImagesTemplate
oxomi.itemText itemTextTemplate
oxomi.embedVideo embedVideoTemplate oder previewVideoTemplate, je nach verwendetem Modus
oxomi.videos videosTemplate
oxomi.itemVideos videosTemplate
oxomi.openGallery galleryTemplate
oxomi.embedGallery galleryTemplate
oxomi.galleries galleriesTemplate
oxomi.catalogBrands brandsTemplate
oxomi.galleryBrands brandsTemplate
oxomi.videoBrands brandsTemplate

Beispiel:

// OXOMI initialisieren und die HTML-Vorlage überschreiben
oxomi.init({ portal: 'IHRE PORTAL-ID',
             accessToken: 'AUTHENTIFIZIERUNGS-TOKEN',
             catalogsTemplate: '<img src="{{mediumUrl}}" />'});

Details zur  Initialisierung finden Sie hinter dem Link.

Hilfselemente einblenden

Es kann vorkommen, dass Sie neben den Daten auch zusätzliche Elemente, wie zum Beispiel Steuerelemente, einblenden müssen. Ein typisches Beispiel sind Pagination-Elemente, um durch eine größere Anzahl an Elementen seitenweise durchnavigieren zu können.

Parameter Beschreibung
auxElements

Gibt weitere Elemente als jQuery-Selektoren an (z.B. #link oder .links) welche sichtbargemacht werden, wenn passende Daten gefunden werden. Dies kann dazu verwendet werden Steuerelemente einzublenden wenn Daten vorliegen.

Beispiel:

// API Aufruf durchführen und .pagination Elemente bei Erfolg einblenden
oxomi.catalogs({ supplierNumber: 'L10190',
                 target: '#my-catalog-list',
                 auxElements: '.pagination'});