Add lightbox to XT:Commerce shops ( XT:Com 3.04 SP2.1 )

XT:Commerce is getting old, as the actual release still utilizes popups to display original images. So here’s a simple way to include the lightbox ( well, in this case, slimbox, as we are going to use the famous mootools framework )…

Step 1:
Copy your mootools.js to the main folder of your shop. Copy slimbox.js to the same location, and copy slimbox.css as well as all attached images to the templates/YOUR_TEMPLATE_/ main folder.

Step 2:
Go to templates/YOUR_TEMPLATE_/javascript/general.js.php and open this file.

Step 3:
Add this line of code to the file

<script language='javascript' type='text/javascript' src='mootools.js'></script>


Step 4:
Go to templates/YOUR_TEMPLATE_/modules/product_info/product_info.html and open it

Find this:
{if $PRODUCTS_IMAGE!=''}

{/if}

Change it to this:
<a href="{$REAL_IMAGE}" rel="lightbox" title="{$PRODUCTS_NAME}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="prod_image" /></a>

Now go to your templates/YOUR_TEMPLATES_/ folder and locate the main CSS file. Open it and include the slimbox.css file via import:
import url(slimbox.css);

Now the real important part
As you surely wish to show biiiiig images in the lightbox instead of the resized versions that XT:Commerce creates, do the following:

Open in your main shop directory the file /includes/modules/product_info.php. Locate this piece of code, which should be around line 92:
$info_smarty->assign('PRODUCTS_DESCRIPTION', stripslashes($product->data['products_description']));
$image = ”;

Add the following below this line:
$image2 = DIR_WS_ORIGINAL_IMAGES.$product->data['products_image'];
$info_smarty->assign(’REAL_IMAGE’,$image2);


That’s it - your shop now displays the big product info pictures via lightbox / slimbox!