Im Live-Chat Fragen an den Support richten

Kontakt aufnehmen

Warenkorb ist leer | Shop aufrufen

75 Nutzer online

Neueste Meldungen, Hintergrundinfos, HOW-TOs

...und vieles mehr nur hier im Blog

Aktuelles / Blog

Produktinfos & Updates (115)
Neue Versionen/Updates der Produkte, Pressemeldungen
Allgemeine Tipps (39)
Tipps & Tricks zur Bedienung / Anpassung der Produkte
CMS Contentpapst (10)
Tipps speziell für das Produkt Contentpapst
Shop-Software CP::Shop (35)
Tipps speziell für das Produkt CP::Shop
Sonstige Informationen (50)
Weitere Meldungen aus dem eBusiness- / eCommerce
Newsletter
Jetzt abonnieren und auf dem neuesten Stand bleiben!

Neueste Beiträge

@sandoba bei Twitter

Tweets von @sandoba

Folge @sandoba

RSS-Feeds im Blog

Alle Beiträge
Produktinfos & Updates
Allgemeine Tipps & Tricks
CMS Contentpapst
Shop-Software CP::Shop
Sonstige Informationen

Entwickler-Blog: Shop-Software CP::Shop (weitere Informationen)

<< zum vorherigen Eintrag

zum nächsten Eintrag >>

Shop-Artikel in Form einer "Cover Flow"-Galerie darstellen (Fr, 11.01.2008)

Die Navigations-Form, welche wir Ihnen in diesem Beitrag des Entwickler-Blogs vorstellen möchten, wurde unter dem Namen "Cover Flow" bekannt und wird u.a. im Apple-Produkt "iTunes Store" eingesetzt. Eine "Cover Flow"-Navigation zeigt mehrere Bilder neben- oder untereinander an. Über eine Scrollleiste, per Tastatur oder per Klick auf eines der Bilder kann der Fokus zwischen den Bildern gewechselt werden. Ein weiterer Klick auf das fokussierte Bild führt den Benutzer zu einer festgelegten URL.

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 - Javascript-Code für die Animationen
reflect.php - PHP-Code für die dynamisch berechneten Reflektionen der Bilder
loading.gif + slider.png - Grafiken für die Scrollleiste und den Ladebalken
screen.css - CSS-Regeln für die Navigation

"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/

Shop-Software CP::Shop | Permalink | Trackback |

Druckversion

Blog-Eintrag kommentieren

Um einen Kommentar zu diesem Beitrag zu verfassen, können Sie sich im folgenden Formular entweder manuell mit Benutzername und Email-Adresse identifizieren oder aber Sie loggen sich über ein vorhandenes Profil bei Facebook, Twitter, OpenID etc. ein. Auf Wunsch haben Sie die Möglichkeit, sich automatisch über weitere Kommentare informieren zu lassen.