Chicubes is a website I first built back in 2008. 2010 meant it was time for a design refresh to reflect the growth of the company.
The basis for the store is Cubecart. However, besides created a completely bespoke ’skin’ for the store, I’ve added lots of jQuery to add enhanced functionality and done quite a bit of search engine optimisation with the site to provide better Google rankings. (more…)
I’m extremely encouraged that the calls for companies to upgrade away from Internet Explorer 6 are intensifying. If you’re reading in the UK, there’s now an online petition to register your feelings on Microsoft’s crippled and ageing browser (it was released in summer 2001 no less). If your outside the UK, sign the Twitter based equivalent.
IE6 is both slow and insecure and if you’re using it as your primary browser, it’s likely your view of the world wide web is extremely limited. The motoring equivalent of driving a 1982 model car when you could have a 2010 model, complete with ABS, traction control, Air Con etc (for free)!
From a designer’s point of view, making a website Internet Explorer 6 compatible currently takes an unacceptable length of development time. Time that could be spent further improving a site for more mainstream browsers. As such I’ve taken the policy that I won’t be supporting the browser in future development work. I’d encourage other designers to discourage their clients from supporting the browser too. This means we can all look forwards to newer technologies like HTML5, CSS3 and Jquery 1.4 without the headaches of workarounds for Microsoft’s tired old browser.
In the meantime, it’s possible guide users to a different browser with a gentle warning. For example, my own site has only a handful of IE6 visitors (that’s quality readership for you) so with the imminent design refresh I’ll be implementing a Jquery based warning to IE6 users.
Use Jquery to guide users to other browsers
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:
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 |
Replace those lines with the following:
1 2 3 |
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:
1 | rel="lightbox-myGroup" |
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…
Random Pics
|
|
