How to Use Joomla! Virtuemart with YooTheme Templates

Sunday, 13 April 2008 23:30 Last Updated on Friday, 24 December 2010 08:29

If you try to combine Joomla! 1.5.2 (1.5.6 works, should work for all), Virtuemart 1.1 (1.2 works, should work for all) and YooTheme template together, you will run into problems with very slow loading times and double lightboxes. Your site will try to load the same javascript over and over again. This is because both Virtuemart and YooTheme template use a javascript libary called MooTools. The problem with double lightboxes comes from having loaded two lightbox javascripts. More specifically, YooTheme template has their own lightbox called Shadowbox, while Virtuemart 1.1 utilizes a popular slimmed-down version of lightbox called Slimbox. I've figured out a workaround to these problems when using these together.

Easy one first. What happens when you try to use these together is your Joomla! site will try to load over 1000 javascripts because it's getting confused trying to load two MooTools. The fix here is simple. Disable MooTools from YooTheme template manager. All your YooTheme modules will still work because VirtueMart will load MooTools for your site.

A harder problem is with the clash between Shadowbox and Slimbox. The problem is that when you click on a product image, you end up with two different lightboxes on top of each other. The Slimbox will load first, then the Shadowbox will load on top of Slimbox. My solution is going use the Shadowbox. The reason is because Shadowbox is better. It is a bit larger in size, but it's able to display not only pictures, but any kind of videos plus external websites. Also, it takes into account how large your browser is, and it will automatically shrink down the full-size image to the maximum allowed by the browser.

So, to only use Shadowbox, we need to stop VirtueMart from loading Slimbox. Then, you'll want to change the image rel tag from "lightbox" to "shadowbox" in VirtueMart's getLightboxImageLink function.

Open htmlTool.class.php in /administrator/components/com_virtuemart/classes/

Find,

 function loadSlimBox( ) {
global $mosConfig_live_site, $vm_mainframe;
if( !defined( '_SLIMBOX_LOADED' )) {
 
vmCommonHTML::loadMooTools();
 
$vm_mainframe->addScriptDeclaration( 'var slimboxurl = \''.$mosConfig_live_site.'/components/'. VM_COMPONENT_NAME .'/js/slimbox/\';');
$vm_mainframe->addScript( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/js/slimbox.js' );
$vm_mainframe->addStyleSheet( $mosConfig_live_site .'/components/'. VM_COMPONENT_NAME .'/js/slimbox/css/slimbox.css' );
 
define ( '_SLIMBOX_LOADED', '1' );
} 
}

And replace it with,

 function loadSlimBox( ) {
if( !defined( '_SLIMBOX_LOADED' )) {
define ( '_SLIMBOX_LOADED', '1' );
}
}

Then, find,

 function getLightboxImageLink( $image_link, $text, $title='', $image_group='' ) {
 
vmCommonHTML::loadSlimBox(); 
 
if( $image_group ) {
$image_group = '['.$image_group.']';
}
$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="lightbox'.$image_group.'"' );
 
return $link;
}

And replace it with,

 function getLightboxImageLink( $image_link, $text, $title='', $image_group='' ) {
 
vmCommonHTML::loadSlimBox(); 
 
if( $image_group ) {
$image_group = '['.$image_group.']';
}
$link = vmCommonHTML::hyperLink( $image_link, $text, '', $title, 'rel="shadowbox'.$image_group.'"' );
 
return $link;
}

That's it, if you have any questions, leave a comment here, and I will try to answer.

TrackBack URI for this entry

Comments (62)

Subscribe to this comment's feed