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'});