Der Einsatz einer derartigen Navigation/Galerie bietet sich in einem Online-Shop u.a. an, um auf der Startseite oder innerhalb der Kategorien auf die am häufigsten verkauften Artikel, neu hinzugefügte Artikel oder Sonderangebote hinzuweisen. Gegenüber einer einfachen Auflistung der Artikelgrafiken samt Titel und Links nutzt eine "Cover Flow"-Navigation den verfügbaren Platz wesentlich effektiver und bringt durch die Animation beim Fokussieren der angezeigten Bilder neues Leben in den Online-Shop.
Die auf JavaScript-basierte Version der Navigation wurde von Finn Rudolph unter dem Namen "ImageFlow" entwickelt und ist frei verfügbar. In diesem Beitrag zeigen wir Ihnen, wie Sie beliebige Artikel aus der Shop-Software CP::Shop in Form einer derartigen "ImageFlow"-Navigation präsentieren können.
Hier sehen Sie zunächst einen Screenshot dieser Navigations-Form:
"ImageFlow" ist unter praktisch jedem modernen Browser lauffähig (u.a. Internet Explorer, Opera, Firefox, Safari und Konquerer), setzt jedoch eine aktivierte JavaScript-Unterstützung voraus. "ImageFlow" unterstützt Dateiformate wie PNG, JPG und GIF und kann in der Größe, Darstellung und der Anzahl der Bilder frei angepasst werden. Per Mausrad können die Bilder durchgeblättert werden, ebenso über die Pfeiltasten auf der Tastatur oder über die eingeblendete Scrollleiste.
Um eine Darstellung wie oben sichtbar im Webshop anzuzeigen, muss zunächst das Archiv mit den Dateien von ImageFlow unter http://imageflow.finnrudolph.de/ heruntergeladen werden (aktuell ist dies die Version 0.8). Dieses Archiv sollte dann in einem neuen Ordner "imageflow" innerhalb des von Ihnen verwendeten Vorlagensets extrahiert werden. Hat Ihr Vorlagenset den Namen "shoplayout", so müssen die Dateien von ImageFlow also entsprechend im Ordner "/themes/shoplayout/imageflow/" abgelegt werden.
Für die Generierung der Navigation sind insbesondere die folgenden Dateien im Ordner "imageflow" von Bedeutung:
"imageflow.js" und "reflect.php" müssen nur modifiziert werden, wenn größere Änderungen an den Animationen oder den Reflektionen gewünscht sind. Für das oben sichtbare Beispiel wurde folgender CSS-Code in der Datei "screen.css" genutzt:
Um die "ImageFlow"-Navigation in der Shop-Software CP::Shop einzubinden, müssen Sie zunächst im <head>-Bereich der Vorlage "main.htm" die folgenden Zeilen hinzufügen:
Um nun die Navigation auf der Startseite des Online-Shops anzuzeigen, bauen Sie in der Vorlage "start.htm" den folgenden HTML-Code ein:
Beim nächsten Aufruf der Startseite sollten nun maximal 10 Shop-Artikel mit den entsprechenden Bildern und Titeln angezeigt werden. Per Klick auf ein Bild kann auf die Detailseite eines Artikels gewechselt werden. Der Containeraufruf kann wie gewohnt modifiziert werden, um stets nur die gewünschten Artikel anzeigen zu lassen, weiterhin kann der obenstehende Code nicht nur in der Vorlage "start.html", sondern in jeder beliebigen Vorlage des Systems verwendet werden (z.B. in den Vorlagen für die Shop-Kategorien, um jeweils die 5 Bestseller innerhalb der gerade aufgerufenen Kategorie anzuzeigen).
ImageFlow Demonstration/Changelog: http://imageflow.finnrudolph.de/
ImageFlow Dokumentation: http://imageflowdocu.finnrudolph.de/