xt:C und Lightbox

Die XT-Commerce Popup-Fenster bestechen nicht gerade durch Schönheit. Hier lohnt sich durchaus der Einsatz einer netten Javascript Applikation wie Thickbox, Slimbox oder Lightbox (2). Für dieses kurze Tutorial habe ich mich für Lightbox2 entschieden.

Zunächst brauchen wir die Dateien für das Lightbox2 Script: Download hier

Als nächstes werden die entsprechenden XTC Dateien angepasst:

1. In der Datei includes/modules/product_info.php fügen wir folgenden Code ab Zeile 93 (unterhalb von $image = ”;) hinzu:

$image_info=' ';
 if ($product->data['products_image'] != ' ')
 { $image= DIR_WS_POPUP_IMAGES.$product->data['products_image'];
 $image_info = DIR_WS_INFO_IMAGES.$product->data['products_image'];
 }
 $info_smarty->assign('PRODUCTS_IMAGE', $image_info);
 $info_smarty->assign('PRODUCTS_IMAGE_POPUP', $image);

2. Anschließend editieren wir die Datei includes/header.php und fügen folgende link Tags in den Head:

<script type="text/javascript" src="<?php echo 'templates/
 '.CURRENT_TEMPLATE.'/lightbox/js/prototype.js'; ?>" /></script>
 <script type="text/javascript" src="<?php echo 'templates/
 '.CURRENT_TEMPLATE.'/lightbox/js/scriptaculous.js?load=effects'; ?>" />
</script>
 <script type="text/javascript" src="<?php echo 'templates/
 '.CURRENT_TEMPLATE.'/lightbox/js/lightbox.js'; ?>" /></script>
  <link rel="stylesheet" href="<?php echo 'templates/
 '.CURRENT_TEMPLATE.'/lightbox/css/lightbox.css'; ?>" 
type="text/css" media="screen" />

3. Im aktuellen Template das Verzeichnis lightbox erstellen und die 3 Order CSS, Images und JS aus der Lightbox-Datei hineinkopieren.

4. Alle Bilder aus dem lightbox/images Ordner in den Order Images im XT-Hauptverzeichnis kopieren.

5. Damit nun auch die richtigen Bilder im Lightbox-Fenster erscheinen, muss noch die Datei templates/deinTemplate/module/product_info/product_info_v1.html angepasst werden. Dazu bitte die folgende Zeile:

<a href="{$PRODUCTS_POPUP_LINK}">
 <img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>

In Zeile 6, gegen diese hier austauschen:

<a href="{$PRODUCTS_IMAGE_POPUP}" 
rel="lightbox" title="{$PRODUCTS_NAME}" > 
<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" /></a>

Nun verwendet Lightbox das Popup-Image.
Lightbox ist nun einsatzbereit.

Free Stuff