Lightbox als Bildanzeige in xt:Commerce integrieren

Author: Ing. Michael Fürst (m.fuerst@bluegate.at)
Web: http://www.bluegate.at
Publiziert: Dezember 2007

Einleitung und Hinweise

Dieses Tutorial ist für die Version 3.0.4 SP 2.1 des XT:Commerce Shops ausgelegt. Die Anwendung des Tutorials erfolgt auf eigene Gefahr und der Author übernimmt keine Haftung für mögliche Schäden am System. Die Lightbox Bibliothek wurde von Lokesh Dakar entwickelt. Die Lightbox Bibliothek wurde unter der Creative Commons Attribution 2.5 License veröffentlicht.

Dieses Tutorial soll sie bei der Einbindung der Lightbox von Lokesh Dakar in Ihren xt:Commerce Shop unterstützen und berührt oder verändert in keinster Weise die Lizenzbedingungen des Authors.

Vorbereitungen / Einbinden der Bibliotheken

Laden Sie den Lightbox Quellcode von der Website http://www.lokeshdhakar.com/projects/lightbox2/ (zu finden Unter "Downloads" ) herunter. Entpacken Sie die Daten in Ihren xt:Commerce Shop in das Verzeichnis /lightbox. Sie können auch ein anderes Verzeichnis verwenden, allerdings müssen Sie diesen Bezeichner dann auch in den folgenden Schritten korrekt übernehmen.

Hinweis: Dieses Tutorial wurde für unter Verwendung der Version Lightbox 2 - v2.03.3 geschrieben. Für andere Versionen müssen Sie gegebenenfalls Adaptierungen vornehmen. Lesen Sie für diesen Fall das How-To auf der Lightbox Website.

Einbinden der Javascript Biliothek

Öffnen Sie die Datei /templates/<TEMPLATENAME>/module/product_info/product_info_v1.html Ihres Shops in einem geeigneten Editor.

Die Javascript-Bibliotheken der Lightbox müssen nun in die Datei product_info_v1.html integriert werden. Fügen sie dafür folgende Zeilen am Beginn der Datei ein:

Actionscript

{config_load file="$language/lang_$language.conf" section="product_info"}
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
{$FORM_ACTION}
...

Stylesheet für Lightbox einbinden

Als nächstes müssen Sie das mit der Lightbox mitgelieferte Stylesheet in Ihren Shop integrieren. Dieses Stylesheet ist für die Darstellung / das Layout der Lightbox verantwortlich. Öffnen Sie die Datei /includes/header.php Ihres Shops. Suchen Sie darin jenen Abschnitt, in dem das Standard-Stylesheet verlinkt wird (ca. Zeile Nummer 60) und fügen Sie folgende Zeile direkt danach ein:

HTML

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />

Wenn sie diese Zeile eingefügt haben, sollten Sie folgendes Ergebnis erhalten:

HTML

...
<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css'; ?>" />
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
...

Implementieren der Lightbox Funktionsaufrufe

Damit die Lightbox bei der Produkt-Informationsseite korrekt funktioniert, müssen Sie nun einige spezielle Funktionsaufrufe implementieren und Originaldateien adaptieren.

Adaptieren der Datei product_info.php

Im Ersten Schritt müssen Sie eine zusätzliche Smarty-Variable definieren, die nur den Dateinamen des Images ausliefert, um die Verlinkung über die Lightbox zu ermöglichen. Öffnen Sie hierzu die Datei /includes/modules/product_info.php. Fügen Sie in dieser Datei folgende Zeilen ein (die zusätzlichen Zeilen sind kommentiert):

PHP

...
// ZUSÄTZLICHER CODE FÜR LIGHTBOX
// *******************************
$lightBoxImage = $product->data['products_image'];
$info_smarty->assign('PRODUCTS_LIGHTBOX_IMAGE', $lightBoxImage);
// *******************************
 
//mo_images - by Novalis@eXanto.de
if (SEARCH_ENGINE_FRIENDLY_URLS == 'true') {
	$connector = '/';
}else{
	$connector = '&';
}
$info_smarty->assign('PRODUCTS_POPUP_LINK', 'javascript:popupWindow(\''.xtc_href_link(FILENAME_POPUP_IMAGE, 'pID='.$product->data['products_id'].$connector.'imgID=0').'\')');
$mo_images = xtc_get_products_mo_images($product->data['products_id']);
if ($mo_images != false) {
	foreach ($mo_images as $img) {
		$mo_img = DIR_WS_INFO_IMAGES.$img['image_name'];
		$info_smarty->assign('PRODUCTS_IMAGE_'.$img['image_nr'], $mo_img);
		$info_smarty->assign('PRODUCTS_POPUP_LINK_'.$img['image_nr'], 'javascript:popupWindow(\''.xtc_href_link(FILENAME_POPUP_IMAGE, 'pID='.$product->data['products_id'].$connector.'imgID='.$img['image_nr']).'\')');
				
		// ZUSÄTZLICHER CODE FÜR LIGHTBOX
		// *******************************
		$mo_lightbox_img = $img['image_name'];
		$info_smarty->assign('PRODUCTS_LIGHTBOX_IMAGE_'.$img['image_nr'], $mo_lightbox_img);
		// *******************************
	}
}
...

Adaptieren des Lightbox Stylesheets

Für die Einbindung in xt:Commerce muss auch kleine Änderung der Pfadangaben im Stylesheet der Lightbox vorgenommen werden. Öffnen Sie die Datei /lightbox/css/lightbox.css.

In dieser Datei finden Sie drei Notationen (Klassen), die auf Bidldaten zurückgreifen. Die Pfade dieser Bilder müssen nun um den Pfad zum Lightbox-Verzeichnis (jenes Verzeichnis am Server, in dem die Lightbox Bibliothek liegt) ergänzt werden (achten Sie auf die geänderten Pfadangaben bei den Images):

CSS

...
background: transparent url(/lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
...
#prevLink:hover, #prevLink:visited:hover { background: url(/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/lightbox/images/nextlabel.gif) right 15% no-repeat; }
...

Adaptieren der Lightbox Javascript Bibliothek

In der Javascript Bibliothek der Lightbox muss ebenfalls zwein Bildpfade angepasst werden. Öffnen Sie die Datei /lightbox/js/lightbox.js. Gleich zu Beginn der Datei (nach den Kommentarzeilen) finden die Zuweisung zweier Bildpfade. Ändern Sie diese wie folgt (achten Sie auf den geänderten Verzeichnispfad):

Javascript

//	Configuration
//
var fileLoadingImage = "/lightbox/images/loading.gif";		
var fileBottomNavCloseImage = "/lightbox/images/closelabel.gif";
...

Adaptieren der Produkt-Informationsseite / Template

Zuletzt muss noch das Tempalte der Produkt-Informationsseite mit den passenden Links ausgestattet werden. Öffnen Sie dazu die Datei /templates/<TEMPLATENAME>/module/product_info/product_info_v1.html.

Je nachdem welches Template Sie nutzen, kann diese Datei anders aussehen als hier beschrieben. In diesem Beispiel gehe ich von einem unserer CSS basierten Templates aus. Mit ein klein wenig Ahnung von (X)HTML sollte es aber ein leichtes sein, diesen Vorgang auf jedem beliebigen Template anzuwenden.

Sie müssen nun die Verlinkung der Bilder ändern und auf die Lightbox abstimmen. Die Bilder sollen zukünftig ja in der Lightbox anstelle des Popups angezeigt werden. Suchen Sie dazu folgenden Teil aus Ihrem Template:

PHP

<a href="{$PRODUCTS_POPUP_LINK}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>
{if $PRODUCTS_IMAGE_1 != ''}<hr class="lightGrey"/><a href="{$PRODUCTS_POPUP_LINK_1}"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>{/if}
{if $PRODUCTS_IMAGE_2 != ''}<hr class="lightGrey"/><a href="{$PRODUCTS_POPUP_LINK_2}"><img src="{$PRODUCTS_IMAGE_2}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>{/if}
{if $PRODUCTS_IMAGE_3 != ''}<hr class="lightGrey"/><a href="{$PRODUCTS_POPUP_LINK_3}"><img src="{$PRODUCTS_IMAGE_3}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>{/if}

Diese Zeilen liefern die Produktbilder aus und verlinken Sie mit dem gewohnten Popup. Um die Bilder in der Lightbox darzustellen, müssen Sie diese Zeilen (Hyperlinks) wie folgt abändern:

PHP

<a href="images/product_images/popup_images/{$PRODUCTS_LIGHTBOX_IMAGE}" rel="lightbox[{$PRODUCTS_ID}]"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>
{if $PRODUCTS_IMAGE_1 != ''}<hr class="lightGrey"/><a href="images/product_images/popup_images/{$PRODUCTS_LIGHTBOX_IMAGE_1}" rel="lightbox[{$PRODUCTS_ID}]"><img src="{$PRODUCTS_IMAGE_1}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>{/if}
{if $PRODUCTS_IMAGE_2 != ''}<hr class="lightGrey"/><a href="images/product_images/popup_images/{$PRODUCTS_LIGHTBOX_IMAGE_2}" rel="lightbox[{$PRODUCTS_ID}]"><img src="{$PRODUCTS_IMAGE_2}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>{/if}
{if $PRODUCTS_IMAGE_3 != ''}<hr class="lightGrey"/><a href="images/product_images/popup_images/{$PRODUCTS_LIGHTBOX_IMAGE_3}" rel="lightbox[{$PRODUCTS_ID}]"><img src="{$PRODUCTS_IMAGE_3}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>{/if}

Der letzte Schritt: Upload der Dateien

Zuletzt müssen noch die geänderten Dateien sowie das neue Verzeichnis "lightbox" auf Ihren Shop-Server geladen werden. Sobald Sie diesen letzten Schritt durchgeführt haben, wird Ihr Shop die Produktdetail-Fotos in einer Lightbox darstellen.

Online Shop

Kunden über uns

Tutorials