Wie der Slider in einem Shop wirkt, sieht man auf Hördeutsch.de. Im Jahr 2010 hatte Björn von Modularweb den 3D Flash Slider Piecemaker entwickelt. Anfang 2011 veröffentlichte der Hersteller den Piecemaker 2. Zahlreiche neue Features erwarten den Benutzer. Das Tolle an dem Produkt ist, dass es 100 Prozent kostenlos ist, sogar für kommerzielle Zwecke. Das heißt, jeder kann damit seine Webseite oder seinen Webshop schmücken. Wer den Piecemaker 2 noch nicht kennt, schaut bitte erst hier vorbei.

Tutorial

• Zunächst einmal laden wir uns den neuen Piecemaker 2 runter: Download hier oder Download-Mirror hier.
• Unter \skin\frontend\default\[DEIN-THEME] erstellen wir einen neuen Ordner mit dem Namen piecemaker
• Nun entpacken wir die heruntergeladene Datei piecemaker2.zip – hier befinden sich drei Ordner: documentation, flash und web. Für unser Vorhaben benötigen wir nur den Ordner web
• Den Inhalt des Ordners web kopieren wir nach \skin\frontend\default\[DEIN-THEME]\piecemaker
• Nun rufen wir den Ordner skin\frontend\default\[DEIN-THEME]\piecemaker\scripts auf und erstellen eine neue Datei: piecemaker.js
• In die piecemaker.js-Datei kopierst du folgenden Code rein und änderst www.DEINE-DOMAIN.de auf die von dir benutzte Domain:

var flashvars = {};
flashvars.cssSource = “http://www.DEINE-DOMAIN.de/skin/frontend/default/default/piecemaker/piecemaker.css”;
flashvars.xmlSource = “http://www.DEINE-DOMAIN.de/skin/frontend/default/default/piecemaker/piecemaker.xml”;

var params = {};
params.play = “true”;
params.menu = “false”;
params.scale = “showall”;
params.wmode = “transparent”;
params.allowfullscreen = “true”;
params.allowscriptaccess = “always”;
params.allownetworking = “all”;

swfobject.embedSWF(‘http://www.DEINE-DOMAIN.de/skin/frontend/default/default/piecemaker/piecemaker.swf', 'piecemaker', '930', '525', '10', null, flashvars,
params, null);

• Nun wechseln wir in das Magento Admin-Panel und rufen die CMS Seite „Home“ auf. Unter „Gestaltung“ platzieren wir folgenden Code:

<reference name=”head”>
<action method=”addItem”><type>skin_js</type><name>piecemaker/scripts/swfobject/swfobject.js</name></action>
<action method=”addItem”><type>skin_js</type><name>piecemaker/scripts/piecemaker.js</name></action>
</reference>

• Wir bleiben auf der CMS Seite „Home“, wählen den Punkt „Inhalt“ aus und fügen folgenden Code an der gewünschten Stelle ein (meistens ganz oben):

<div id=”piecemaker”>
<p>Bitte installieren Sie den aktuellen Flash Player von Adobe: <a href=”http://get.adobe.com/de/flashplayer/” target=”_blank”>DOWNLOAD</a></p>
</div>

• Der Piecemaker 2 ist nun in Magento eingebunden und wir können uns der Konfiguration widmen. Wir öffnen die Datei piecemaker.xml unter \skin\frontend\default\[DEIN-THEME]\piecemaker auf. Mit „ImageHeight“ und „ImageWidth“ legen wir die Höhe und die Breite des Sliders fest. Unter „Transition“ wird das Verhalten des Piecemaker konfiguriert. Im Bereich „Contents“ werden Bilder, Texte, URLs und Videos hinterlegt. Detailierte Informationen dazu findest du in der Piecemaker 2-Dokumentation.
• Wichtig! In der XML-Datei dürfen nur absolute URLs verwendet werden! Beispiel:

http://www.DEINE-DOMAIN.de/skin/frontend/default/default/piecemaker/content/bild_slider_1.jpg

Und jetzt viel Spaß mit dem Piecemaker in eurem Shop!

Über den Gastautor

Eugen Andres ist ein Webdesigner, Fotograf und DiskJockey aus Paderborn (NRW). Sein Leistungsspektrum umfasst den klassischen Printbereich und moderne Internetkonzepte. Seine Website: www.timeshift-media.de