As you will note from my previous post I’ve been working on another Cubecart based site. Cubecart 4 uses the Prototye & Scriptaculous Javascript library, which I’m not a fan of and I wanted to add some Javascript functionality to the site I can only find in Jquery. The task was therefore to remove add Jquery and remove the other unneeded libraries (multiple Javascript frameworks rarely run happily together). The one additional task was to amend Cubecart to use a Jquery lightbox rather than the default.
So here is a step by step of how you can add Jquery to your Cubecart 4 based site (interestingly, Cubecart 5 is using Jquery rather than Protoype/Mootools) and amend the Cubecart templates to use a Jquery lightbox instead of the default:
1. Download jquery
2. Save jquery to the JS folder of your Cubecart site. I also renamed mine from ‘jquery-1.4.min.js’ to simply ‘jquery.js’.
3. Download Lightbox and extract the ‘jquery.lightbox.min.js’ from the JS folder of the archive into the JS folder of your Cubecart installation (it’s in the root). Rename the file to ‘jquery.lightbox.js’ for simplicity.
4. Now extract the jquery.lightbox.packed.css file from the CSS folder of the Jquery Lightbox archive to the CSS folder of your Cubecart skin which will be like so: ‘skins/your skin/styleSheets’. For simplicity rename the file to simply jquery.lightbox.com
5. Within the ‘skins’ folder of Cubecart, within your skin, browse to ‘styleTemplates’ > ‘global’ and open index.tpl
By default (for example with the Carreta-Bright skin), line 17-19 are this:
1
2
3
| <script src="js/jslibrary.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script> |
Replace those lines with the following:
1
2
3
| <script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lightbox.js" type="text/javascript"></script>
<script src="js/jslibrary.js" type="text/javascript"></script> |
6. You will also need to change the style sheets so amend the following line:
1
| <link href="skins/{VAL_SKIN}/styleSheets/lightbox.css" rel="stylesheet" type="text/css" media="all, screen" /> |
To read:
1
| <link href="skins/{VAL_SKIN}/styleSheets/jquery.lightbox.css" rel="stylesheet" type="text/css" media="all, screen" /> |
So the other libraries won’t get loaded now and we have also added the stylesheet for the new Lightbox plugin.
7. By default the ‘next’ and ‘previous’ images of the Jquery lightbox effect live in an ‘images’ folder at the same level as the ‘JS’ folder. Therefore, extract all four images from the ‘images’ folder of the Jquery Lightbox archive into the ‘images’ folder in the root of your Cubecart installation.
8. Now open ‘viewProd.tpl from the skins/your skin/styleTemplates/content folder of your Cubecart installation.
9. Around line 21, change the following line of code:
1
| rel="lightbox[imageset]" |
To read:
This is the call for the new Jquery based Lightbox.
That’s it, Jquery is added and the default lightbox effect has been switched for a Jquery based one. Best of all you can now add new Jquery scripts to your site without any javascript conflicts.
Happy coding… 
It’s a common frustration – you’ve designed a website only to check it out on an iPhone and realise the design looks all screwy. Rather than troubleshoot the CSS with the phone itself, it’s possible to use Apple’s own iPhone Simulator to test and re-test your designs. 
I’ve been trying to get around to a site redesign for literally a couple of years. Finally, got the chance to revamp the site and blog and you’re looking at the results.
