Sehr geehrte Kunden,

heute stellen wir Ihnen eine sehr einfache Möglichkeit vor Werbebanner, schöne Produktfotos, oder individuelle HTML-Inhalte über einen "Flow" (Slider) anzeigen zu lassen den der Kunde selbst bedienen kann.

Schon 2007 hatten wir gezeigt, wie man verlinkte Grafiken in eine SLIDEshow, die automatisch abläuft realisiert.

Basis dieses mal ist jquery, das ausdrücklich nicht zur POWERGAP Software gehört, sondern eine auf GNU/GPL Lizenz frei nutzbare Javascript Bibliothek ist. Wir stellen in diesem Beitrag lediglich vor, wie man diese JS-Skripte in seinem eigenen Shop nutzen kann. Wir übernehmen für solche externen Skripte wie immer keinerlei Garantien oder Support.

Beispiel:


http://www.testinstallation.de/s01.php?shopid=s01&sp=de&cur=eur&ag=2

Dies muss nicht nur ein starres Bild sein, wie wir es hier gemacht haben. Das kann genauso beliebiges HTML mit individuellen Inhalten sein. Auch Flash, oder ein integrierter Ticker, usw..
Oder um im Impressum oder bei den Versandkosten einzelne Punkte zu unterteilen. Auch die AGB, deren einzelne Paragraphen man hinter solchen Reitern aufteilen könnte ist denkbar. Von der Darstellung wirkt so etwas natürlich wesentlich professioneller. Und darum geht es hier. Nicht weil so etwas eine Art Modererscheinung ist! Nein, es zeigt dem Besucher eines Shops, dass hier Aktualität und Mühe drin steckt!
Mühe, die er dann auch bei der Abwicklung seines Kaufs oder beim Support erwartet. Es hebt ganz einfach das Vertrauen, wenn man mit modernen und zeitgemäßen Techniken einen Shop stetig verbessert.

Wir brauchen kaum zu erwähnen, was das bilden von "Vertrauen" für eine Bedeutung hat im Kaufprozess. Manchmal haben wir das Gefühl, dass viele Shopbetreiber diese grafischen tools gar nicht aus dieser Richtung betrachten, sondern einfach nur als unnötige Spielereien. Das halten wir für einen Fehler.


So wird's gemacht:

Zunächst über Sonstiges > Sonstige Einstellungen > Feld Javascript_Head: diesen Code einfügen:



Die dort verlinkten Javascriptdateien von jquery haben wir bereits auf Ihr Hosting hoch geladen.

Über Layout > Schriften / CSS > ROOT müssen folgende Zeilen ergänzt werden:



Diese CSS-Zeilen zeigen das Schema wie im oben gezeigten Demoshop umgesetzt. Hier muss man natürlich farblich auf das eigene CI anpassen. Jeder der sich mit CSS auskennt, wird durch ausprobieren schnell das gewünschte Ergebnis einstellen.

Nun zum eigentlichen Quellcode, der das Ergebnis anzeigt. Im Demoshop haben wir ein HTML-Include für die Anzeige verwendet. Natürlich kann man so etwas auch in einem Grafik/Text Modul in der Infogruppe einer Startseite oder als Banner über einem bestimmten Suchergebnis einbinden. Selbst in verkleinerter Version wäre ein schickes Shopfenster möglich, in dem der Besucher z.B. einzelne Artikel blättert.

Hier der Code aus dem o.g. Beispiel:



Der Aufbau ist einfach. Mit der Class "jFlowControl" definiert man X beliebige einzelne Objekte, die hier gleichzeitig als Überschriften/Reiter dienen. Im DIV-Container "mySlides" müssen ebenso viele einzelne DIV auf und zu gehen mit den einzelnen Inhalten darin. Also ein IMG, Flash oder individuelles HTML, usw..

Natürlich sollte die Anzahl der Objekte/Reiter gut bedacht sein. Denn die Ladezeiten das Shops kann man damit schnell überreizen, wenn wie im Demoshop-Beispiel sehr große Grafiken ins Spiel kommen.

Auf die schnelle haben wir einen kleinen Bug nicht herausfinden können. Das letzte Bild bei einer Abfolge bleibt weiß. darum ist in dem Beispiel-Code einmal ein <span class="jFlowControl"></span> ohne Inhalt enthalten. Vielleicht schafft es jemand von Ihnen das so einzustellen, dass es ohne diesen leeren Step funktioniert. UPDATE: Siehe ein Beitrag tiefer, mit dem automatischen Flow gibt es diesen Bug nicht mehr!

Ansonsten wünschen wir viel Spaß beim einrichten!

Wer das gerne eingerichtet hätte, ihm aber die Zeit fehlt, so erstellen natürlich auch wir im Auftrag die Grafiken und binden das voll nach Ihren Wünschen ein. Das Beispiel oben mit 4 einfachen Produktgrafiken und der Einbindung des ganzen z.B. auf einer Startseite würden kaum eine Stunde (70,-€) übersteigen.