Aktuelles / BlogAktuelles / Blog

Neueste Meldungen, Hintergrundinfos, HOW-TOs

...und vieles mehr nur hier im Blog

Weitere Informationen zu Contentpapst Weitere Informationen zum CP::Shop

Neueste Beiträge


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

<< zum vorherigen Eintragzum nächsten Eintrag >>

HowTo: Artikel in einem automatisch scrollenden Layer anzeigen (Fr, 28.09.2007)

In diesem Beitrag des Entwickler-Blogs zeigen wir Ihnen, wie Sie einen vertikal scrollenden Layer in Ihrem Online-Shop realisieren können. Mit einer derartigen Animation können Sie z.B. der Startseite Ihres Online-Shops neues Leben einhauchen und den knappen Platz effektiver nutzen.

Da in einem solchen automatisch scrollenden Layer prinzipiell jeder beliebige HTML-Inhalt zum Einsatz kommen kann (d.h. auch jeder Containeraufruf der Shop-Software CP::Shop) können Sie darin z.B. die aktuellen Bestseller, neu hinzugekommene Produkte oder auch die neuesten Kundenmeinungen anzeigen lassen.

Den fertigen Layer sehen Sie als Screenshot auf der linken Seite. Innerhalb des gestrichelten Rahmes werden in diesem Beispiel maximal 5 Bestseller angezeigt, wobei nicht alle Bestseller von Anfang an sichtbar sind. Stattdessen wird der Inhalt langsam von unten nach oben verschoben. Sobald der Mauszeiger auf einen der Artikel zeigt, hält die Animation an und es kann per Klick schnell auf die Detailseite des gewählten Artikels gewechselt werden.

Um einen solchen Layer im Shop einzubauen, öffnen Sie zunächst die gewünschte Vorlage (z.B. "start.htm" aus dem verwendeten Vorlagenset) und fügen Sie dort den unten sichtbaren Javascript-Code ein.


Ein Großteil des Javascript-Codes ist für Sie nur relevant, wenn Sie die Animation grundlegend anpassen möchten. Wichtig sind prinzipiell nur die ersten 4 Zeilen, in denen Breite und Höhe des Layers, die Geschwindigkeit der Animation (zwischen 1 und 10) und der Pause-Modus (0 = kein Stop bei Mouseover, 1 = Stop bei Mouseover) angepasst werden können.

2 Zeilen später wird der Inhalt des Layers festgelegt. In diesem Fall ist dies ein Containeraufruf, der frei modifiziert werden kann. Per PHP wird zusätzlich sichergestell, dass die Rückgabe des Containers keine Zeilenumbrüche enthält, die bei der Verarbeitung per Javascript zu Problemen führen könnten.

Als Vorlage kommt hier die standardmäßig mitgelieferte Vorlage "custom_bestseller.html" aus dem Ordner "/themes/cpshop/" zum Einsatz. Allerdings können Sie dafür natürlich auch eine eigene Vorlage anlegen und deren Namen im Containeraufruf vermerken.

In diesem Beispiel wurde die Vorlage "custom_bestseller.html" geringfügig in der Breite modifiziert, zudem wird für die Darstellung die CSS-Klasse "layer_content" genutzt. Rund um den animierten Layer gibt es zusätzlich einen gewöhnlichen <div>-Layer mit der CSS-Klasse "layer_border". Zusammen mit diesem CSS-Code erhalten Sie dann dass oben sichtbare Ergebnis:



RSS-Feed abonnieren RSS-Feed abonnieren

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.

<< zurück

Weitere Einträge in der Kategorie "Shop-Software CP::Shop"