Internetagentur 8works

xt:Commerce mit Lightbox Funktion

Diese kleine Tutorial beschreibt die Integration des Lightbox V2.04 Scripts in die Detailansicht des Open Source Onlineshops xt:Commerce in der Version V3.0.4 SP2.1.

Bereitstellung der benötigten Software

Schritt eins unseres kleinen Tutorials ist die Bereitstellung des Scripts Lightbox v2.04. Das Script kann unter folgendem Link bezogen werden:

Lightbox V2.04

Detailansicht - Bild klicken

Upload des Scripts

Nachdem wir das erhaltene Lightbox Script entpackt haben, sehen wir eine index.html und drei Ordner. Als nächstes erstellen wir auf unserem Webserver, auf dem sich unser Onlineshop befindet, einen neuen Ordner mit dem namen "lightbox". Dieser neue Ordner sollte sich auf der obersten Ebene unseres Webshops befinden. Zur Kontrolle eine Grafik.

Danach laden wir mittels FTP-Programm den Inhalt des Lightbox Ordners (3 Unterordner) in den zuvor erstellten Ordner "lightbox" auf unserem Webspace.

Detailansicht - Bild klicken

Javascript und CSS bereitstellen

Der nächste Schritt beschreibt die Bereitstellung der Javascript- und CSS-Datei. Der ideale Platz zum Einbinden von JS-Dateien ist die Datei: general.js.php. Die Datei befindet sich in unserem Templateordner. (MeinTemplate/javascript/general.js.php) Fügen Sie den folgenden Quellcode wie auf beiliegendem Bild beschrieben ein.

  1. <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
  2. <script src="lightbox/js/prototype.js" type="text/javascript"></script>
  3. <script src="lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
  4. <script src="lightbox/js/lightbox.js" type="text/javascript"></script>

Smarty Variablen definieren

Hört sich schlimmer an, als es ist. Wir fügen hierzu eine neue Definition für unsere Lightbox in folgende Datei ein: /includes/modules/product_info.php. Nun fügen wir den Inhalt der 2 Markierungen im folgenden Quelltext in die product_info.php ein. Die Markierungen beginnen mit: // lightbox start. (Zeile 3+4,20+21)

Die Änderungen in meiner Datei stehen ca. in Zeile 90.

  1. $info_smarty->assign('PRODUCTS_IMAGE', $image);
  2. // lightbox start -------------------------------
  3. $lightBoxImage = $product->data['products_image'];
  4. $info_smarty->assign('PRODUCTS_LIGHTBOX_IMAGE', $lightBoxImage);
  5. // lightbox end -------------------------------
  6. //mo_images - by Novalis@eXanto.de
  7. if (SEARCH_ENGINE_FRIENDLY_URLS == 'true') {
  8. $connector = '/';
  9. }else{
  10. $connector = '&';
  11. }
  12. $info_smarty->assign('PRODUCTS_POPUP_LINK', 'javascript:popupWindow(\''.xtc_href_link(FILENAME_POPUP_IMAGE, 'pID='.$product->data['products_id'].$connector.'imgID=0').'\')');
  13. $mo_images = xtc_get_products_mo_images($product->data['products_id']);
  14. if ($mo_images != false) {
  15. foreach ($mo_images as $img) {
  16. $mo_img = DIR_WS_INFO_IMAGES.$img['image_name'];
  17. $info_smarty->assign('PRODUCTS_IMAGE_'.$img['image_nr'], $mo_img);
  18. $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']).'\')');
  19. // lightbox start -------------------------------
  20. $mo_lightbox_img = $img['image_name'];
  21. $info_smarty->assign('PRODUCTS_LIGHTBOX_IMAGE_'.$img['image_nr'], $mo_lightbox_img);
  22. // lightbox end -------------------------------
  23. }
  24. }
  25. //mo_images EOF

Pfadanpassungen lightbox.js

Als nächstes steht eine kleine Pfadanpassung in der Datei lightbox.js in unserem neu angeleten Ordner lightbox. Im Ordner "js" befindet sich die Datei. Wir öffnen nun die Datei mit einem HTML-Editor und passen die Variablen in Zeile 5 und 6 wie folgt an ('/lightbox/images/). Des Weiteren habe ich noch in Zeile 17 und 18 die Begriffe für die deutsche Sprache angepasst. Natürlich könnte man hier noch einige Feineinstellungen der Hintergrund Transparenz (Zeile 8) und der Geschwindigkeit der Animation (Zeile 11) vornehmen. Das bleibt jedem selbst überlassen.

  1. //
  2. // Configurationl
  3. //
  4. LightboxOptions = Object.extend({
  5. fileLoadingImage: '/lightbox/images/loading.gif',
  6. fileBottomNavCloseImage: '/lightbox/images/closelabel.gif',
  7.  
  8. overlayOpacity: 0.6, // controls transparency of shadow overlay
  9.  
  10. animate: true, // toggles resizing animations
  11. resizeSpeed: 8, // controls the speed of the image resizing animations (1=slowest and 10=fastest)
  12.  
  13. borderSize: 15, //if you adjust the padding in the CSS, you will need to update this variable
  14.  
  15. // When grouping images this is used to write: Image # of #.
  16. // Change it for non-english localization
  17. labelImage: "Produktbild",
  18. labelOf: "von"
  19. }, window.LightboxOptions || {});

product_info_v1.html bearbeiten

Zu guter Letzt fehlt jetzt noch der Aufruf in der Datei product_info_v1.html. Wir öffnen die Datei, die sich im Template Verzeichnis befindet. Der genaue Ort der Datei: /MeinTemplate/module/product_info/product_info_v1.html.

Nach dem wir die Datei erfolgreich mit unserem HTML-Editor geöffnet haben, suchen wir folgende Zeile:

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

Diesen Teil des Codes ersetzen Sie dann einfach mit folgendem:

  1. <a href="images/product_images/popup_images/{$PRODUCTS_LIGHTBOX_IMAGE}" rel="lightbox[{$PRODUCTS_ID}]"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productImageBorder" /></a>

Für weitere Produktbilder sieht die Änderung dann so aus:

  1. {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}
  2. {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}
  3. {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}

Lightbox in Aktion

Unter folgendem Link kann der Einsatz der Lighbox in Verbindung mit einem xt:Commerce Shopsystem in Aktion gesehen werden.