Lightbox in xtCommerce

Lightbox in xtCommerce

Wer kennt Sie nicht, die doch etwas in die Jahre geraten PopUp-Fenster in der Produktdetailansicht von xtCommerce. Um diese gealterte Ansicht etwas zu modernisieren, habe ich mich bei einem aktuellen Projekt dazu entschlossen den Lightbox-Effekt mittels JQuery einzurichten.

Die nachfolgende Schritt-für-Schritt-Anleitung zeigt auf, was getan werden muss um die PopUp-Funktion aus xtCommerce zu entfernen und den Lightbox-Effekt einzubinden. Für den Lightbox-Effekt habe ich das klassische Lightbox-Plugin von Leandro Vieira Pinho genutzt.

  1. Als erstes sollte Ihr euch die aktuellste Version vom Lightbox-Plugin herunterladen und entpacken. Anschließend werden die Dateien js/jquery.lightbox-0.5.pack.js,css/jquery.lightbox-0.5.css und alle Grafiken aus dem Images-Ordner hochgeladen. Die Dateien kommen allesamt in den Template-Ordner eures zur Zeit genutzten Templates. Die Javascript-Datei solltet ihr am besten in den Ordner „/aktuelles_template/javascript/“ kopieren, die CSS-Datei in den Template-Root-Ordner „/aktuelles_template/“ kopieren und für die Grafiken legt ihr am besten einen neuen Ordner „Lightbox“ unter „/aktuelles_template/img/“ an. Solltet ihr noch kein JQuery verwenden, solltet ihr euch die aktuellste Version von JQuery herunterladen und ebenfalls mit in den Javascript-Ordner kopieren.
  2. Im nächsten Schritt bindet Ihr die Javascript-Datei(en) in die „aktuelles_template/javascript/header.js.php“ ein. Das sieht folgendermaßen aus:

Jetzt sollten die Grafik, die in der Produktdetailseite angezeigt werden, in der Lightbox angezeigt werden. Sollen allerdings die etwas größeren PopUp-Grafiken in der Lightbox angezeigt werden, sind noch einige kleine Änderungen an der „/includes/modules/product_info.php“ durchzuführen.

Ab ca. Zeile 94 muss folgende Zeile ergänzt werden:

$info_smarty->assign('PRODUCTS_IMAGE_LIGHTBOX',DIR_WS_POPUP_IMAGES.$product->data['products_image']);

so dass es folgendermaßen aussieht:

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

Ebenfalls muss eine neue Variable für die weiteren, alternativen Produktbilder angelegt werden (ca. Zeile 103):

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']).'\')');
   $info_smarty->assign('PRODUCTS_IMAGE_LIGHTBOX_'.$img['image_nr'],DIR_WS_POPUP_IMAGES.$img['image_name']);
  }
}

Ebenfalls müssen die Links zu den Grafiken noch entsprechend angepasst werden. Dazu werden die Links in der Datei aktuelles_template/module/product_info/product_info_v1.html, mit den neuen Variablen ausgestattet, so dass die Links nicht mehr, wie in Schritt 4 beschrieben, aussehen sondern folgendermaßen:


  {$PRODUCTS_NAME}

Das gleiche muss natürlich auch wieder für die alternativen Grafiken angepasst werden. Wer sich das ganze einmal Live ansehen möchte, der kann sich in dem Shop des Otterndorfer Teehaus einmal näher umschauen.