xtCommerce: JQuery – Lightbox anstatt PopUp – Fenster einrichten

Dienstag, 26. Mai 2009 Dennis S.
WP Greet Box icon
X
Hallo! neu hier? Dann abboniere doch den RSS feed, um immer auf dem aktuellsten Stand bleibst.
Powered by WP Greet Box WordPress Plugin

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: 
    <script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE.'/javascript/jquery.lightbox-0.5.pack.js'; ?>"></script>

    Der Quellcodeauszug zeigt das Einbinden von JQuery und des Lightbox-Plugin.

  3. Die CSS-Datei wird in der “/aktuelles_template/stylesheets.css” eingebunden. Dazu müsst ihr einfach folgendes einfügen: 
    @import url(jquery.lightbox-0.5.css);
  4. In der Datei “aktuelles_template/module/product_info/product_info_v1.html” muss der Link zum bisherigen PopUp verändert werden. Der Link für die Produktgrafik der bisher so aussah 
    <a href="{$PRODUCTS_POPUP_LINK}" rel="lightbox[{$PRODUCTS_NAME}]">
  <img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" title="{$PRODUCTS_NAME}" />
</a>

    sollte folgendermaßen aussehen:

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

    Die möglichen weiteren Grafiken müssen analog dazu angepasst werden.

  5. Jetzt muss im -Bereich noch die Lightbox-Funktion initialisiert werden. Dazu muss im -Bereich in der header.php im Ordner “/includes/” (Dieses Mal ausgehend vom ROOT des Shops und NICHT vom Template!) folgendes eingefügt werden: 
    <script type="text/javascript">
$(document).ready(function(){
  $("a[@rel*=lightbox]").lightBox({
    imageLoading: 'http://deinedomain.de/templates/TEMPLATE/img/lightbox/lightbox-btn-loading.gif',
    imageBtnClose: 'http://deinedomain.de/templates/TEMPLATE/img/lightbox/lightbox-btn-close.gif',
    imageBtnPrev: 'http://deinedomain.de/templates/TEMPLATE/img/lightbox/lightbox-btn-prev.gif',
    imageBtnNext: 'http://deinedomain.de/templates/TEMPLATE/img/lightbox/lightbox-btn-next.gif',
  });
});
</script>

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:

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

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.

Posted in JQuery, xtCommerce Tags: , ,

RSS FeedDir hat der Beitrag gefallen? Dann abonniere doch den RSS-Feed.
Twitter Delicious Facebook Digg Stumbleupon Mister Wong Technorati Favorites More

«

»

You can leave a response, or trackback from your own site.

18 Kommentare to “xtCommerce: JQuery – Lightbox anstatt PopUp – Fenster einrichten”

  1. Claudia sagt:
    27. Mai 2009 um 06:46

    Sehr schöne Anleitung – werd ich in unserem Shop auch mal ausprobieren und einbauen – sollte ich dabei Probleme haben, werd ich mich hier wieder melden und um Hilfe bitten ;-)

  2. Dennis S. sagt:
    27. Mai 2009 um 14:20

    vielen Dank Claudia!
    Wenn du Probleme bei der Umsetzung hast, darfst du dich gerne wieder melden ;)

  3. Patrick sagt:
    4. Juni 2009 um 16:27

    Hallo Dennis,

    schöne Anleitung… Leider ist die Funktion im Internet Explorer 6 ausser Kraft… Hast du vielleicht eine Ahnung wieso?

  4. Dennis S. sagt:
    5. Juni 2009 um 23:20

    Hallo Patrick,

    vielen Dank. Leider bin ich gerade etwas unter Zeitdruck, aber ich hoffe ich werde am Wochenende dazukommen, das Problem einmal zu recherchieren.

  5. Jürgen sagt:
    14. Juni 2009 um 10:18

    Interessante Anleitung, und sieht auch gut bei Dir aus.Könnte aber sein, dass durch die feste Verdrahtung bei Punkt 5. (http://...) ein Proxy-SSL unsichere Daten meldet.

  6. Dennis S. sagt:
    25. Juni 2009 um 14:21

    Entschuldigt bitte die späte Antwort, ich war ein wenig im Prüfungsstress ;)

    @Patrick,
    es gibt ein Javascript-Fehler, allerdings habe ich die Ursache dafür nicht finden können.

    @Jürgen,
    das stimmt natürlich, bei SSL-Verschlüsselung gibt es Problem, das kann umgangen werden, in dem man die Grafiken folgendermaßen einbindet:
    $(“a[@rel*=lightbox]“).lightBox({
    imageLoading: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-loading.gif’,
    imageBtnClose: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-close.gif’,
    imageBtnPrev: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-prev.gif’,
    imageBtnNext: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-next.gif’,
    });

  7. Silvio sagt:
    30. Juni 2009 um 10:40

    Hallo Dennis,

    eine sehr schöne Lightbox hast du da erstellt. Läuft wunderbar im Firefox. Nur ebend im IE nicht. Aber ich denke das bekommst du auch noch hin.

    In der header.php musste ich <script type="text/javascript" src="”> weglassen, da ich schon einen Produktslider über jquery laufen habe.

    Mach weiter so! ;-)

    Silvio

  8. Ölbilder sagt:
    10. Juli 2009 um 19:24

    hallo, ich habe mich auch gerade daran gesetzt und kann auch nur sagen dass es im IE leider nicht so funktioniert. oder habt ihr das schon hinbekommen?

  9. Dennis S. sagt:
    12. Juli 2009 um 23:08

    So, nun habe ich den Fehler endlich gefunden und behoben.

    $(”a[@rel*=lightbox]“).lightBox({
    imageLoading: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-loading.gif’,
    imageBtnClose: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-close.gif’,
    imageBtnPrev: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-prev.gif’,
    imageBtnNext: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-next.gif’,
    });

    muss in

    $(”a[@rel*=lightbox]“).lightBox({
    imageLoading: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-loading.gif’,
    imageBtnClose: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-close.gif’,
    imageBtnPrev: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-prev.gif’,
    imageBtnNext: ‘/templates/TEMPLATE/img/lightbox/lightbox-btn-next.gif’
    });

    geändert werden. Also das letzte Komma vor der schließenden Klammer muss entfernt werden.

  10. Adem sagt:
    31. Juli 2009 um 14:54

    Hallo,

    verstehe nicht was ich falsch gemacht haben kann.
    bei mir komme ich nur auf die startseite wenn ich auf das bild klicke. kein popup und kein lightbox.
    hhmmmm

  11. Adem sagt:
    31. Juli 2009 um 15:30

    header.js.php??
    bei mir habe ich eine general.js.php
    xtc304_2.1

  12. Dennis S. sagt:
    4. August 2009 um 16:01

    Hallo Adem,
    Die general.js.php solltest du ebenfalls verwenden können.
    Gruß

  13. Links für Samstag, 06.06. - netztaucherbrille sagt:
    10. August 2009 um 14:34

    [...] xtCommerce: JQuery – Lightbox anstatt PopUp – Fenster einrichten 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. [...]

  14. Andyman sagt:
    14. Januar 2010 um 17:45

    Schoene Anleitung. Wie kriegt man das denn in das Standard-Template fuer Veyton 4.0.12 hin?

  15. Dennis S. sagt:
    14. Januar 2010 um 18:18

    Hallo Andy,
    das kann ich dir leider nicht genau sagen, ich kenne mich mit der Version noch nicht allzu gut aus. Könnte dir aber anbieten, mal auf deine Installation zu schauen…Falls Interesse besteht, bitte per Mail melden :)

    Gruß,
    Dennis

  16. Anodyne sagt:
    9. April 2010 um 04:29

    Hallo,
    schick, schick.
    Benutze bisher lightbox von Lokesh Dakar (bisschen modified), funzelt gut.
    Da ich jedoch auch jquery benutze interessiert micht dein ansatz sehr, vielen Dank für den Post.
    Es gibt nur ein kleines Problemchen welches man schön auf der von dir angeführten Seite “Ottendorfer Teehaus” shen kann:
    Wenn man auf den Close Button klickt (ich weiß geht auch mit Klicken in die “Pampa”), erscheint erstmal ein scrollbalken und erst beim zweiten Klick schließt sich das Bild.
    Irgendeine Ahnung was das Problem verursacht ?

    Nochmals danke für das Tutorial und Grüße von
    Anodyne

  17. Hanswerner sagt:
    21. Juni 2010 um 20:18

    Bei mir wird nur das Produktbild im selben Fenster geladen. Eine Lightbox taucht nicht auf. Ich benutze xtcModified v1.03 auf xt:Commerce V3.0.4 SP2.1.

  18. Dennis S. sagt:
    22. Juni 2010 um 21:39

    Hey Hanswerner,

    das hört sich ganz danach an, dass dein jQuery nicht richtig geladen wurde. Überprüfe vllt mal, ob alles korrekt eingebunden ist.

    Viele Grüße,
    Dennis

Leave a Reply

Twitter Delicious Facebook Digg Stumbleupon Mister Wong Technorati Favorites More

RSS Feed

Dir hat der Beitrag gefallen?

Dann abonniere doch den RSS-Feed

Follow me on Twitter!Follow me on Twitter!