Um die Produktpräsentation in Onlineshops besser zu gestalten sind Videos ein sehr gutes Instrument und Produktvideos können zu mehr Umsatz führen.

Laut Goldmedia, einem Berliner Medienberatungs- und Forschungsunternehmen, könnte sich der Umsatz bei deutschen Onlineshops bis zum Jahre 2012 um fast die Hälfte steigern, wenn mehr Produktvideos eingesetzt würden.

Ich möchte Ihnen nun zeigen wie Sie Ihre Videos, ohne Zusatzattribute in der Datenbank, einbinden können. Einzige Voraussetzung: Sie müssen die SKU als Dateinamen (SKU.flv) verwenden.

Zur Umsetzung

1. Installation von jQuery-Tools
Um den Flowplayer installieren zu können, habe wir die Erweiterung Mxperts: jQuery-Tools entwickelt. Bitte installieren Sie diese über Ihren Magento-Connect-Manager und den Extensions Key magento-community/Mxperts_Jquery_Tools.

2. Verzeichnis erstellen
Die Videos sollen zentral auf dem Webserver liegen. Dafür erstellen wir das Verzeichnis media/catalog/video. Hier kopieren Sie Ihre Viedeos als SKU.flv per FTP hinein.

3. Flash-Files kopieren
Auf der Website von Flowplayer unter http://www.flowplayer.org/download/index.html können Sie sich den Flowplayer downloaden. Wenn Sie sich für die Open Source license entscheiden, dann kopieren die Dateien flowplayer.controls-3.1.2 und flowplayer-3.1.2.swf nach media/swf auf Ihrem Webserver.
Wenn Sie eine kommerzielle Lizenz erworben haben finden Sie die Datei flowplayer.commercial-3.1.1.swf. Zur Integration müssen Sie den Lizenzschlüssel im Code hinterlegen. Ein Anleitung dafür finden Sie unter http://www.flowplayer.org/demos/commercial/index.html.

4. Template anpassen
Zuletzt müssen wir nun die Datei app/design/frontend/default/default/template/catalog/product/view.phtml anpassen.

Als erstes überprüfen wir, ob die Datei zur aktuellen SKU überhaupt existiert.

    $_sku = $_product->getSku();
    $_video_filename = $_SERVER['DOCUMENT_ROOT'] . '/media/catalog/video/' . str_replace(" ", "_", $_sku) . '.flv';

    if ( file_exists($_video_filename) ) {
      $_video_filename = '/media/catalog/video/' . str_replace(" ", "_", $_sku) . '.flv';
    } else {
      $_video_filename = '';
    }

Wie Sie im Quellcode sehen, werden Leerzeichen mit einem Unterstrich ersetzt. Also Leerzeichen in der SKU schreiben Sie beim Dateinamen als Unterstrich.
Beispiel: 100 SK 345 wird zu 100_SK_345.flv

Nun folgt noch die Integration des Flowplayer:

        <?php if ($_video_filename != ''):?>
            <div class="collateral-box">
              <a 	href="<?php echo $_video_filename ?>"	style="display:block;width:640px;height:390px;"	id="player"></a>
              <script language="JavaScript">
	              flowplayer("player", "/media/swf/flowplayer-3.1.1.swf");
              </script>
            </div>
        <?php endif;?>

Haben Sie es sich so leicht vorgestellt? Hier nun zwei Links wie das fertige Ergebnis aussieht.
- http://www.demo-store.de/htc-touch-diamond.html
- http://www.demo-store.de/acer-ferrari-3200-notebook-computer-pc.html

Alle Files inklusive kompletter view.phtml aus dem default template von Magento finden Sie im Download-File zu diesem Tutorial.