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!

admin

artViper designstudio is specialized in validating website design, programming in PHP and AJAX as well as mySQL. We're eager to design graphically impressive sites with convenient content and functions. As we want to share some of this knowledge, this blog has been created - may you find something of interest! Have fun.