Archive for January, 2010

Adding Jquery and jquery lightbox to Cubecart 4

Friday, January 22nd, 2010

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 type="text/javascript" src="js/jslibrary.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Replace those lines with the following:

1
2
3
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/jslibrary.js"></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:

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…

Bookmark and Share

Posted in CubeCart, Cubecart skin, jquery | No Comments »

How to setup MAMP and Coda for Cubecart development

Friday, January 22nd, 2010

I was looking for a simple tutorial that described how to use MAMP and Coda together for locally developing CMS (php based) systems before making them live, in this instance Cubecart. I searched high and low and couldn’t find anything on the net specific to Cubecart. The best documentation I found was this blog post by Jay Robinson that explained how to setup Coda to work with MAMP for developing Wordpress sites.

However, this tutorial describes how to set up MAMP to enable you to develop a Cubecart based site, locally, with Coda.

Credit where it is due: I had particular problems getting Ioncube for PHP working with MAMP. The following forum post was very helpful in setting that part up: http://forum.mamp.info/viewtopic.php?f=2&t=6875&start=0

Instructions:

1. Download and install MAMP

2. Download and extract Ioncube. (choose the relevant Ioncube download for your processor). You need to extract the file ‘ioncube_loader_dar_5.2.so’ into the ‘Applications/MAMP/bin/php5/zend/lib/’ folder

3. Browse to Applications/MAMP/conf/php5/ and open the file ‘php.ini’ in Coda

4. Add the following line at line 1085:

1
zend_extension=/Applications/MAMP/bin/php5/zend/lib/ioncube_loader_dar_5.2.so

Be sure to add it at the correct line. When in places you should see lines above and below like this:

1
2
3
4
5
6
7
; Local Variables:
; tab-width: 4
; End:
zend_extension=/Applications/MAMP/bin/php5/zend/lib/ioncube_loader_dar_5.2.so

;zend_extension="/Applications/MAMP/bin/php5/lib/php/extensions/no-debug-non-zts-20060613/eaccelerator.so"
eaccelerator.shm_size="16"

5. Download Cubecart. Extract the contents to the local folder you want to use. For example, I extracted it into a folder on my desktop e.g. ‘Desktop/benfrain.com/clients/clientname/’

6. Start MAMP (Applications > Mamp. Click ‘Stop Servers’.

7. In MAMP, click ‘Preferences…’, choose the ‘Apache’ tab and enter the local folder address you are keeping your files in (same as the ‘Local Root’ field in Coda - we’ll get this in Step 9). Click ‘OK’ and click ‘Start Servers’.

8. Still in MAMP, click the ‘Open Start Page’ button. The start page will open in your default web browser. Click the phpMyAdmin link (under the MySQL header).

9. We now need to create a database for use with Cubecart. Enter a name in the ‘Create new database’ field. E.g. ‘cubecart_test’, ensure ‘Collation’ is selected from the drop down and that ‘utf8_general_ci’ is selected in the drop-down below and click ‘Create’. Now click the ‘Privileges’ tab.Set up a SQL database for use with Cubecart

10. Either amend the user and password of ‘root’ (the default user for SQL databases in localhost) to your preference or create a new user by clicking the ‘Add a new User’ link. Either way, make a note of the username and password and ensure the user has ‘ALL PRIVILEGES’ set. You can now close this browser window.

11. Now open up Coda and select ‘Sites > Add site’

12. Name your site. Enter ‘http://localhost:8888/’ in the Root URL and Local URL boxes, leave ‘Remote Root’ blank and in the ‘Local Root’ box enter the location of the folder you are keeping your local copy of the site at. Click the ‘Set…’ button and browse to it. You don’t need to enter anything in the ‘Connecting’ section for local development. Here’s what it looked like on mine (click for full size version):

Settings in Coda for MAMP

Settings in Coda for MAMP

13. Now two options to set-up Cubecart. Either open the site in Coda, (open the index.php page in your local folder and click Preview in Coda) and it should kick the setup process off.

14. Everything should be straightforward now, when it gets to the database details, you will need to user the database details from step 10.

15. After setup completes it is possible that you will be unable to access the Admin panel. To rectify this you may have to email Cubecart support and ask them to add ‘localhost’ to your licence.

That’s it, Cubecart is setup locally and you can do all your development work locally before uploading your amendments to a live site.

Bookmark and Share

Posted in CubeCart, Ioncube, MAMP | No Comments »

RSS Feeds
rss Gallery RSS Feed rss Blog Entries (RSS)
Site notes
Designed for Explorer 6 and up and Firefox (PC) and Firefox and Safari (Mac). benfrain.com - Freelance writing covering OSX, iPhone, Apple Mac, Windows 7, website design and Screenwriting blog is proudly powered by WordPress
Valid XHTML 1.0 Transitional © benfrain.com 2007-2008 | UK Based Freelance Writing and Web Design