Wie ihr eine Bildergalerie in einen Magento-Shop einrichtet und auf der Startseite des Shops platziert, erfahrt ihr in diesem Beitrag. Es geht dabei um eine einfache Bildergalerie, die eine vorgebene Anzahl in einem bestimmten Zeitintervall durchläuft.

Das nachfolgende Schritt-für-Schritt Tutorial soll euch das Anlegen der notwendigen Komponenten und das Einfügen der Galerie vereinfachen.

Integrierte Magento Bildergalerie

1. Statischen Block anlegen

Zunächst solltet ihr einen statischen Block anlegen. Diesen könnt ihr im Backend unter “CMS -> Statische Blöcke -> Neuen Block anlegen” einrichten. Den Blocktitel könnt ihr genauso beliebig wählen, wie auch den Seitenbezeichner. Der Status sollte natürlich auf aktiviert stehen. In das Inhalt-Feld sollte folgendes HTML-Gerüst eingefügt werden:

<script type="text/javascript" src={{skin url="js/simple-slide-show.js"}}></script>
<div id="slide-show">
<ul id="slide-images">
	<li><img src={{skin url="images/media/galerie/home/1.jpg" alt=""}}  /></li>
	<li><img src={{skin url="images/media/galerie/home/2.jpg" alt=""}} /></li>
	<li><img src={{skin url="images/media/galerie/home/3.jpg" alt=""}} /></li>
	<li><img src={{skin url="images/media/galerie/home/4.jpg" alt=""}} /></li>
</ul></div>

Es ist sicherlich nicht schön, dass die Javascript-Datei an dieser Stelle eingebunden wird, aber es ist in Magento durchaus üblich. Eine andere Möglichkeit ist es die Javascript-Datei in dem HEAD-Bereich des HTML-Dokuments einbinden. Bei Interesse beschreibe ich auch gerne diese Möglichkeit.

2. Scriptacolous Datei anlegen

Wie in dem vorherigen Schritt zu sehen ist, muss die Javascript-Datei simple-slide-show.js noch an der entsprechenden Stelle in der Magento Ordnerstruktur angelegt werden. Angelegt wird diese Datei in dem Pfad {{skin url=”js/simple-slide-show.js”}}. Der Pfad zum Skin Ordner lautet /skin/frontend/default/TEMPLATE/.

Hier sollte nun der Ordner js angelegt werden und innerhalb des neu angelegten Ordners die Datei simple-slide-show.js.

3. Scriptacolous Datei füllen

In die simple-slide-show.js Datei gehört nun folgendes Javascript.

var delay = 3000;
var start_frame = 0;

function init() {
	var lis = $('slide-images').getElementsByTagName('li');

	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	start_slideshow(start_frame, end_frame, delay, lis);
}

function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}

function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 4850);
	})

}
Event.observe(window, 'load', init, false);

Erwähnenswert ist hier die Variable delay mit der ihr das Zeitintervall der Diashow in Millisekunden steuern könnt.

4. Bilder hochladen

Im ersten Schritt ist bereits zu erkennen, dass in jedem LI-Element ein Bild eingebunden wird. Die LI-Elemente können beliebig erweitert werden. Allerdings müssen die Bilder natürlich noch an der richtigen Stelle auf dem Webserver hochgeladen werden.

{{skin url="images/media/galerie/home/1.jpg" alt=""}}

Diese Source-Angabe im IMG-Tag verweist wieder auf die Skin-Url, die in der Ordnerstruktur von Magento unter /skin/frontend/default/TEMPLATE/ zu finden ist. Unterhalb des Template-Ordners sollten die Ordner in der Struktur /images/media/galerie/home/ angelegt werden.

In dem home Ordner werden jetzt die einzelnen Bild-Dateien hochgeladen werden. Wichtig hierbei ist, dass die hochgeladen Bilder die gleichen Dateinamen wie in Schritt 1 haben. Ansonsten müssten die Dateinamen oder der Quellcode in Schritt 1 angepasst werden.

5. Statischen Block auf der Startseite des Magento-Shops einbinden

Im letzten Schritt muss nur noch der statische Block aus dem ersten Schritt auf der Startseite eingebunden werden. Dazu muss die Startseite von Magento im Backend aufgerufen werden. Die Startseite ist unter “CMS -> Seiten verwalten -> Home” zu finden.

In dem Reiter Inhalt wird der statische Block aus dem ersten Schritt wie folgt eingebunden:

{{block type="cms/block" block_id="home_galerie"}}

Wichtig ist, dass die Block-ID mit dem Seitenbezeichner aus Schritt 1 übereinstimmt. In diesem Fall steht im statischen Block unter Seitenbezeichner home_galerie und wird daher in diesem Schritt als Block-ID verwendet.

Fazit

Mit diesem kleinen Tutorial kann jetzt auf der Startseite eines Magento-Shops eine Bildergalerie mit z.B. Bildern zu Produkten oder Kategorien ablaufen. Die Bilder können noch mit einem Link versehen werden, um so direkt auf die Produkte oder Kategorien zu verweisen.

Bei Fragen, Anregungen oder Kritik freue ich mich auf eure Kommentare.