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: