• Basket & customer details are not passed to the gateway
• Missing details on “confirmed” page.
• Multiple images may have wrong paths - Lightbox not working.
• “Original Images” not scaled if dimensions are larger than browser window.
• Textbox/Textarea product options are not displayed in the product pages.

I have been working with a number of clients to correct these issues.  It is highly recommended that you update to this latest version.  Instructions to perform a manual update are included in the version.txt file (supplied inside the downloaded package).

To receive this update, please drop me an email with your Google Checkout Order Number.  You can find contact details on our homepage.

jQuery does not provide a quick method for creating functions. That’s because it doesn’t need to. So what are functions? Instead of giving you the standard definition, I’ll explain why/when you might want to create and use functions in your code.

Say that you have a block of code that you would like executed on multiple events. This code could do anything. The principal to consider is that you will need this code to be executed as multiple events are triggered. Instead of writing the code over and over again for each event, you could add this code to a function and then execute this function whenever you want the code to be executed.

Creating Functions

To create a function called “aFunction”, we could write:

function aFunction() {
}

Say that we wanted to alert the user each time this function is executed. We could write:

function aFunction() {
  alert("Hello World!");
}

In this example, the user is alerted each time the function is executed.

Executing Functions

We can execute the function when any event is triggered. If we wanted the function to be executed when the page has loaded, we could write:

$(document).ready(function() {
  aFunction();
});

This is pretty straightforwards… but there’s more to functions.

Passing Arguments

We can pass values into the function that are used when the code is executed.  To demonstrate this, I’ll continue with the example that I’ve been using.  Instead of displaying “Hello World!” whenever the function is executed, we could pass the message into the function:

function aFunction(msg) {
  alert(msg);
}

We could now execute the function as follows (to display any old message to the visitor) when the page has loaded:

$(document).ready(function() {
  aFunction('Just a short message');
});

We could pass multiple arguments by separating them with a comma:

function addNumbers(num1,num2) {
  var total = num1 + num2;
  return total;
}

The function above will simply return the total value of the two numbers passed as arguments. It is important to note that the value returned will not by output to the page. You could print the returned value to the page by using document.write:

$(document).ready(function() {
  document.write(addNumbers(3,5));
});

Over the past few days, I have been working on a brand new skin.  This skin will be exclusive to CubeCart V4.  Although it would be possible to build a “plug-and-play” skin (that includes all our popular mods/tweaks), it just isn’t fesible.  What I have managed to do is further develop the “AJAX Add To Cart” feature.  The latest version will be included with the “Neutrino” skin.

So how would one install the Neutrino skin?  Simple…  Obviously, you will need to upload the skin to your CubeCart directory.  Once you’ve done that, there are just 4 new files to upload to your CubeCart directory.  Activate the skin through the administration panel and away you go!

Are there any new features?  Well… there is just one.  Visitors will be able to change the way that products are displayed in the category pages (and search results).  At the click of a mouse, the products can be displayed in a grid or in rows.

Why not take a look at the demo.  Let me know what you think!

I’m a big fan of the jQuery library.  Since most of the applications I build use jQuery, developing with this library would be the most logical approach.  But wait…  It looks like there are 2 jQuery plugins that allow elements to be sorted.  These are the jQuery Interface plugin and jQuery UI.

At first, I started working with “Interface”.  I soon ran into problems as I started working with styled lists.  For some reason, the list elements lost their styling as they were being dragged.  I just couldn’t quite put my finger on the problem - perhaps I missed something.  I then started working with jQuery UI.  This plugin retained the styling - perfect!

However, neither of these plugins provide a method to easily save and reload the list element order.  Hence, should a user change the order of the list, these changes would be lost as the page is refreshed.

Saving the Reordered List

I determined that the easiest way to accomplish this is through the use of a cookie.  The jQuery UI plugin already allows you to send the ID’s of the list elements (in order) to an array.  Using Klaus Hart’s Cookie plugin, we can easily save the list element order to a cookie.  But how do we retain/reload the element order saved to the cookie?

To restore the element order, I decided to remove all the sortable list elements from the DOM and then immediately append them to their parent element (in the order sepcified by the cookie).  This is all done after the document has loaded.

The HTML Markup

<ul id="list1">
<li id="item-1">List Item 1</li>
<li id="item-2">List Item 2</li>
<li id="item-3">List Item 3</li>
<li id="item-4">List Item 4</li>
<li id="item-5">List Item 5</li>
<li id="item-6">List Item 6</li>
</ul>

The Javascript

/////////////////////////////////////////////////////////////////
/////  EDIT THE FOLLOWING VARIABLE VALUES  //////////////////////
/////////////////////////////////////////////////////////////////
 
// set the list selector
var setSelector = "#list1";
// set the cookie name
var setCookieName = "listOrder";
// set the cookie expiry time (days):
var setCookieExpiry = 7;
 
/////////////////////////////////////////////////////////////////
/////  YOU PROBABLY WON'T NEED TO EDIT BELOW  ///////////////////
/////////////////////////////////////////////////////////////////
 
// function that writes the list order to a cookie
function getOrder() {
	// save custom order to cookie
	$.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" });
}
 
// function that restores the list order from a cookie
function restoreOrder() {
	var list = $(setSelector);
	if (list == null) return
 
	// fetch the cookie value (saved order)
	var cookie = $.cookie(setCookieName);
	if (!cookie) return;
 
	// make array from saved order
	var IDs = cookie.split(",");
 
	// fetch current order
	var items = list.sortable("toArray");
 
	// make array from current order
	var rebuild = new Array();
	for ( var v=0, len=items.length; v<len;>
		rebuild[items[v]] = items[v];
	}
 
	for (var i = 0, n = IDs.length; i &lt; n; i++) {
 
		// item id from saved order
		var itemID = IDs[i];
 
		if (itemID in rebuild) {
 
			// select item id from current order
			var item = rebuild[itemID];
 
			// select the item according to current order
			var child = $("ul.ui-sortable").children("#" + item);
 
			// select the item according to the saved order
			var savedOrd = $("ul.ui-sortable").children("#" + itemID);
 
			// remove all the items
			child.remove();
 
			// add the items in turn according to saved order
			// we need to filter here since the "ui-sortable"
			// class is applied to all ul elements and we
			// only want the very first!  You can modify this
			// to support multiple lists - not tested!
			$("ul.ui-sortable").filter(":first").append(savedOrd);
		}
	}
}
 
// code executed when the document loads
$(function() {
	// here, we allow the user to sort the items
	$(setSelector).sortable({
		axis: "y",
		cursor: "move",
		update: function() { getOrder(); }
	});
 
	// here, we reload the saved order
	restoreOrder();
});

There are 2 functions to be concerned with in the above code.  The first, “getOrder()”, writes the order of the list elements to a cookie.  The second, “restoreOrder()”, fetches the order saved to the cookie and restores that order.  We execute “getOrder()” each time the list order is changed.  We execute “restoreOrder()” after the document has loaded.

Using the code provided above, you should only need to change the variables (at the very top) to get this working with your page.  Just remember to include the jQuery library and jQuery UI plugin!  I hope this is helpful!