Technische Details
Die Funktionsweise dieses Service basiert auf einem in der eigenen Website eingebundenen JavaScripts, welches durch individuelle Variablen steuerbar ist.
- Dieses ermittelt im ersten Schritt, ob die Zielelemente für die angeforderten Inhalte ebenfalls verfügbar sind, und wird nicht weiter ausgeführt, wenn diese nicht gefunden werden konnten. Falls Ihnen die technische Möglichkeit fehlt, das JavaScript nur an der Seite ein zu binden an der die easyTherm-Inhalte angezeigt werden sollen, können Sie dieses auch global, also auf jeder Seite, verwenden (nicht empfohlen, denn wir alle wollen Ressourcen sparen!).
- Im zweiten Schritt, sofern die Ziel-Elemente gefunden werden konnten, wird ein GET-Request an das easyTherm CDN geschickt, welches, sofern die angeforderten Datensätze verfügbar sind, diese zurück liefert.
- Im dritten Schritt wird der fertig gelieferte HTML-Code in das Zielelement, sowie das Basis-CSS im <head>-Element eingefügt, welches durch eigene Stile überschrieben werden kann.
Einrichtung
Der für die Einbindung des Partner-Contents notwendiger Code besteht aus zwei Teilen.
- Im <head> des HTML-Codes muss ein JavaScript platziert werden, das den gewünschten Inhalt anfordert
- Im <body> muss ein Platzhalter-Element erstellt werden, an dessen Position der angeforderte Inhalt eingefügt wird
Im Folgenden Beispiel sehen Sie den Aufbau dieser zwei Elemente (Der Wert IDENTIFIER wird hier als Platzhalter für die durch easyTherm kommunizierte ID verwendet):
JavaScript im <head>
<script type="text/javascript"> /*<![CDATA[*/ window.et=window.et||function(){(et.r=et.r||[]).push(arguments);}; et({'items':['IDENTIFIER']}); /*]]>*/ </script> <script type="text/javascript" src="//www.easy-therm.com/et_cdn.js" async></script>
Ziel-Element(e) im <body>
<div id="easytherm-IDENTIFIER"></div>
Layouts
Zusätzlich können pro Inhalt verschiedene Layouts angefordert werden.
Folgende Layouts stehen derzeit zur Auswahl
- 0 = Großes Bild mit Text darunter (Standard)
- 1 = Bild im Text Rechts
- 2 = Bild im Text Links
- 3 = Bild neben Text Rechts
- 4 = Bild neben Text Links
Im folgenden Beispiel wird gezeigt, wie der Inhalt mit der ID news, im Layout 2 angefordert wird:
Beispiel Layouts
et({'items':['news:2']});
Überschriften
Falls Sie die Inhalte an einer bestimmten Position der Text-Struktur einbinden möchten, kann zusätzlich die Gewichtung der Überschrift beim Anfordern des Inhalts festgelegt werden.
Wollen Sie beispielsweise statt einer <h2>-Überschrift (Standard) eine <h3>-Überschrift, wird einfach ein zusätzlicher Parameter an die ID im JavaScript eingefügt.
Folgendes Beispiel zeigt, wie ein Inhalt mit der ID news, im Layout 2 und einer <h3>-Überschrift angefordert wird:
Beispiel Überschriften
et({'items':['news:2:3']});
Mehrere Inhalte
Sie können auch mehrere Inhalte zeitgleich für die Darstellung auf einer einzigen Seite anfordern.
Dazu wird einfach das JavaScript-Array um die entsprechenden Werte erweitert.
Folgendes Beispiel zeigt das Anfordern der Inhalte news und kundeninformation, einmal im Layout 1 und einmal im Layout 2:
Beispiel für mehrere Inhalte
et({'items':['news:1', 'kundeninformation:2']});
Zusätzlich müssen in diesem Beispiel zwei Platzhalter mit entsprechender ID als Ziel-Element im <body> des HTML-Codes platziert werden:
Ziel-Element(e) im <body>
<div id="easytherm-news"></div> <div id="easytherm-kundeninformation"></div>
Alternative Sprachen
Des weiteren können Inhalte (sofern verfügbar) auch in anderen Sprachen angefordert werden.
Bitte erkundigen Sie sich bei Ihrem easyTherm-Ansprechpartner betreffend weitere Details dazu und ob eine Übersetzung des gewünschten Inhaltes verfügbar ist.
Grundsätzlich stehen folgende Sprachen bzw. Ländervarianten zur Verfügung:
- Österreich
- Deutschland
- Schweiz
- Frankreich
- Slowenien
- Polen
- Ungarn
- International (Englisch)
Individuelle Stile
Um die Inhalte perfekt an das Aussehen Ihrer Website anpassen zu können, steht es Ihnen frei, diese per CSS (Cascading Style Sheets) zu modifizieren.
Dazu binden Sie einfach auf Ihrer Website den Beispiel-Code ein (oder nur Teile davon) und bearbeiten diesen Ihren Wünschen entsprechend.
Beispiel CSS
/* easyTherm: Example CSS (Overrides default values) */ article.et-item { clear: both; display: inline-block; width: 100%; } article.et-item .et-content { margin-bottom: 15px; } article.et-item .et-header { margin-top: 0; } article.et-item .et-teaser { font-weight: bold; } article.et-item .et-media { padding-bottom: 15px; } article.et-item .et-media img { width: 100%; height: auto; } article.et-item .et-media figcaption { font-size: 80%; } /* Layout 0 */ article.et-item.et-layout-0 .et-media { width: 100%; margin: 0; padding: 0; } /* Layout 1/2 */ article.et-item.et-layout-1 .et-media, article.et-item.et-layout-2 .et-media { width: 33%; } article.et-item.et-layout-1 .et-media { margin: 0 15px 10px 0; float: left; } article.et-item.et-layout-2 .et-media { margin: 0 0 10px 15px; float: right; } /* Layout 3/4 */ article.et-item.et-layout-3, article.et-item.et-layout-4 { display: table; } article.et-item.et-layout-3 .et-media, article.et-item.et-layout-4 .et-media { width: 50%; display: table-cell; vertical-align: top; } article.et-item.et-layout-3 .et-media { padding-right: 7px; } article.et-item.et-layout-4 .et-media { padding-left: 7px; } article.et-item.et-layout-3 .et-content, article.et-item.et-layout-4 .et-content { display: table-cell; } article.et-item.et-layout-3 .et-content { padding-left: 7px; } article.et-item.et-layout-4 .et-content { padding-right: 7px; }
Hilfe
Bitte vergewissern Sie sich, dass in Ihrer Website ein solides CSS verwendet wird, und überprüfen/optimieren Sie gegebenenfalls die Anwendung bestimmter Stile durch einen Webdesigner.
Die erfolgreiche Einbindung der Partner-Inhalte ist von zwei Punkten abhängig:
- Die eigene Website muss frei von JavaScript-Fehlern programmiert sein, und sollte einem modernen Standard entsprechen
- Der Browser des Besuchers muss als "zeitgemäßer Browser" eingestuft werden können, der einerseits moderne Web-Standards sowie CSS3/HTML5 unterstützt
Im Falle eines JavaScript-Fehlers oder eines veralteten Browsers wird unter Umständen kein Inhalt angezeigt. Bitte prüfen Sie daher sorgfältig die korrekte Einbindung und ermutigen Sie Ihre Besucher auf moderne und sichere Browser umzusteigen.
Sollten diese Voraussetzungen erfüllt sein und trotzdem kein Inhalt angezeigt werden, vergewissern Sie sich bitte, dass das JavaScript korrekt eingebunden wurde und Sie die korrekten ID(s) verwenden.
Ansprechperson
Als Ansprechperson betreffend easyTherm CDN steht Ihnen Alexander Dominkovics unter alexander.dominkovics@easy-therm.com oder +43 664 88659 613 zur Verfügung.