Im Live-Chat Fragen an den Support richten

Kontakt aufnehmen

Warenkorb ist leer | Shop aufrufen

125 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 >>

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.

<div class="layer_border">
<script>
var scroll_speed = 1; // Geschwindigkeit (1-10)
var scroll_width = "250px"; // Breite in Pixel
var scroll_height = "300px"; // Höhe in Pixel
var scroll_pause = 1;

var scroll_content = '{cp:container module="shop" type="bestseller" start="0" limit="5" order="number" dir="asc" template="{cp:path}custom_bestseller.html"}';

// Ab dieser Zeile sind keine Änderungen mehr erforderlich!

scroll_speed = (document.all)? scroll_speed : Math.max(1, scroll_speed-3)
var scroll_tmpspeed = scroll_speed;
var iedocument = document.all||document.getElementById;
var actualheight = "";
var cross_scroller, alt_scroll;
var pausespeed=(scroll_pause==0)? scroll_tmpspeed: 0

if (iedocument||document.layers) {
	with (document) {
		if (iedocument) {
			write('<div style="position: relative; width: '+scroll_width+'; height: '+scroll_height+'; overflow: hidden" onmouseover="scroll_tmpspeed=pausespeed" onmouseout="scroll_tmpspeed=scroll_speed">')
			write('<div id="iescroller" style="position: absolute; left: 0; top: 0; width: 100%">')
			write('</div></div>')
		} else if (document.layers) {
			write('<ilayer width="+scroll_width+" height="+scroll_height+" name="alt_scroll">')
			write('<layer name="alt_scroll2" width="+scroll_width+" height="+scroll_height+" left="0" top="0" onmouseover="scroll_tmpspeed=pausespeed" onmouseout="scroll_tmpspeed=scroll_speed"></layer>')
			write('</ilayer>')
		}
	}
}
</script>
</div>

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:

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.