12. März 2015

Wie baue ich ein eigenes Script in meine TOOL Webseite ein?

YOLA Standard-Widgets

Das TOOL bietet eine grosse Auswahl an vorgefertigten, anpassbaren Bausteinen – sogenannten Widgets – zum Integrieren auf der eigenen Webseite. Bei der switchplus Version ist es zudem möglich eigene Scripts und Funktionalitäten einzubauen. Wie das geht, zeigt die folgende Schritt für Schritt-Anleitung.

Welche Bestandteile benötigt ein Script?

Was?Wozu?Wo?
HTMLdient auf der Seite als "Behälter" für die Effekte bzw. stellt die Elemente bereit, die manipuliert werden sollen.In einem HTML-Code Widget
CSSsorgt für die Positionierung und Gestaltung der HTML-Elemente.Im Website-CSS (Site / Inhalte oder Design / Einstellungen).
Website-CSS-Überschreibung aktiviert.
JavaScriptsorgt für die eigentlichen EffekteAufgerufen im Head-Bereich der Seite oder auf der Seite selber.
Gespeichert im YOLA Datei-Manager (Site / Inhalte) oder bei einem externen Anbieter, z. B. Google.
Ressourcen
(zum Beispiel Bilder)
YOLA Datei-Manager (Site / Inhalte)

Vorgehen

1. Sicherstellen, dass das Script lokal funktioniert

Bevor ein komplexes Script in eine TOOL-Seite integriert wird, sollte man sicherstellen, dass es in einer anderen Umgebung funktioniert. Das nachträgliche Finden und Korrigieren von Fehlern wird ansonsten sehr schwierig.

Original Datei-Struktur des einzubauenden Scripts

Original Datei-Struktur des einzubauenden Scripts

Öffnen der index.html-Datei im Browser zeigt: Das Script funktioniert.

2. Ressourcen via Dateimanager hochladen

Slides in YOLA hochgeladen

Slides in YOLA hochgeladen

Die vier Bilder, welche für diesen Slider benötigt werden im TOOL Dateimanager hochladen. Zugunsten der Übersicht lohnt es sich im Dateimanager einen eigenen Ordner zu erstellen und die Struktur des Originalscripts nachzubilden.

3. HTML-Code einbinden

Original HTML des Scripts

Original HTML des Scripts

HTML-Code im YOLA HTML-Widget

HTML-Code im YOLA HTML-Widget mit angepasstem Pfad

Die in TOOL hochgeladenen Dateien werden standardmässig in einem Ordner „resources“ gespeichert. Um diese aus einer Seite anzusprechen, muss der entsprechende relative Pfad eingetragen werden.

Die Bilder werde bereits im HomePageTool angezeigt, sind aber nicht wie gewünscht gestyled und nutzen nicht die gewünschten Effekte weil zur Zeit weder CSS noch JavaScript integriert worden sind.

4. Pfade in JavaScript anpassen / via Dateimanager hochladen

Im head-Bereich des Originalscripts werden JavaScripts und die CSS-Datei aufgerufen.

Das jquery.banner-rotator.min.js Script setzt jquery.min.js voraus. Es ist daher wichtig, dass die Reihenfolge im Code eingehalten wird.

jquery.min.js wird im Beispiel bei Google gehostet und direkt von dort geladen. Als Alternative könnte man das Script ebenso wie jquery.banner-rotator.min.js im Dateimanager hochladen und den Pfad im HTML-Code entsprechend anpassen.

Da wir in TOOL keinen Zugriff auf den head-Bereich einer einzelnen Webseite haben, nutzen wir eine von zwei Möglichkeiten:

  1. Falls das Script zwingend im Head-Bereich sein muss geben wir den Code als Tracking-Code ein (Site / Tracking / Website-Trackingcode).
  2. Wir geben den Code direkt auf der Seite in einem HTML-Code Widget oberhalb des bereits eingefügten Codes ein.

1. Möglichkeit:

Eigener Trackingcode

Eigener Trackingcode

Nachteil dieser Variante ist, dass der Code auf allen Seiten geladen wird, obwohl wir ihn evtl. nur auf einer einzelnen Seite benötigen.

2. Möglichkeit

JavaScript Code in YOLA

JavaScript Code in YOLA

Auch hier ist es wichtig, den Pfad richtig anzupassen und selbstverständlich müssen wir das Script auch im TOOL Dateimanager hochladen:

5. CSS Überschreibung aktivieren und CSS eintragen

Nun fehlt nur noch das CSS. Dieses binden wir via Website-CSS-Überschreibung ein.

Website-CSS-Überschreibung in YOLA

Website-CSS-Überschreibung in YOLA

Achtung: Auch hier müssen die Pfade der Steuerungsbilder angepasst und die Bilder im TOOL Dateimanager hochgeladen werden.