Creative Juices Bo. Co.

Satisfy Your Thirst For Something Refreshing!

Manually Add Items To The WP-eCommerce Gold Cart

WP-eCommerce Gold Cart Plug-In Hack

A friend of mine asked if I could help him out with a project he was working on. He had a client who was trying to sell some products online and the previous developers gave him exactly what he asked for. And unfortunately all they asked for was a way that their visitors could fill out a form to purchase a product. They didn't ask for the ability to view orders, update products, customer data retention, etc.

The problem was that the client really wanted a shopping cart. Something that he could use to manage his business, but because my friend and his client are a little new to the online world, they didn't specify what they wanted to the developer. And unfortunately this developer didn't take any initiative to offer additional options and suggestions.

So I took a look at the website and I realized what the developer had done, which to say the least, wasn't a lot. They basically had a form, and a PHP page that processed the form data. They didn't even take the time to e-mail the customer a receipt. Sheesh. Oh well, I told my friend that I'd look around and see if there was an off-the-shelf PHP solution that could help them out. I'll be the first to tell you that I do not specialize in coding in PHP. My background is ColdFusion, but I've done a few little PHP sites in the past and to be quite honest, I'm not scared to dive into PHP and figure something out. I have a theory, and that is if you know programming logic, you can pretty much program in any language as long as you have good reference material. Hello Google!

After searching and talking to a few people, I decided that converting their website to Word Press and purchasing a commercial license for wp-eCommerce Gold Cart plug-in was the best solution. Word Press would give them the ability to edit various pages on there site and the shopping cart plugin allowed them to manage their online transactions. It was also a fairly cheap solution to fix a problem that they had already paid some good money for.

The site was up and running within a week and I thought everyone was happy. Except the client came back and said, that they really liked the old site, because it had a quick check-out form on the front page. I looked around to see if anyone was doing this with the plug-in, but sadly there wasn't. I mentioned to the client that with an off-the-shelf product you're somewhat limited to what it allows you to do. And wp-eCommerce didn't have any documentation or known way of doing this. After a few days, my friend contacted me and said that they were willing to pay for it and that they really, really, with sugar-on-top, wanted the front-end check-out form. So I took it upon myself to figure out a solution. So I did... and it's not the prettiest thing in the world.

Solution

Breaking down the problem of the form, I soon realized I had two problems. First of all, there is no shortcodes in wp-eCommerce to manually add a product to the shopping cart. That means I had to come up with a way to not only add 1 product to the cart, but because the form allows for the customer to choose a quantity I had to add multiple items to the cart. Secondly, after adding the items to the cart, I had to pass the form data to the checkout. I decided that I wasn't going to do any of the validating, since that was already built into the check-out process. All I had to do was pass the data.

Step 1: Adding the items to the cart

Although this one took me the longest to figure out, the solution is really quite simple. The cart relies on Word Press to handle all the the form submissions for the cart. All I had to do was create a little javascript function that passed data to a built in Word Press function. Here's what I came up with:

var noresult;
function manAddToCart(id) {
   var data = 'prodid=' + id + '&item='; + id + '&Buy=Add%20To%20Cart';
    ajax.post('index.php?ajax=true&user=true', noresult, data);
}

All we need to do is pass the product ID to the function and it will add it to the cart. There's a shortcode to pull the product list, so just use that to create a pull-down menu, or you can manually supply one if you like. The ajax.post operation has a callback variable. Once complete it will call "noresult". If you call this function it will run and then do nothing. If you wanted to add multiple items, then you might do something like this:

var gCount = 0, gData = null;
var callbackresult = function(result) {
    if(gCount < 5) {
        gCount++;
        ajax.post('index.php?ajax=true&user=true', callbackresult, gData);
    } else {
        alert('Done');
    }
}
function manAddToCart(id) {
   gData = 'prodid=' + id + '&amp;item=' + id + '&amp;Buy=Add%20To%20Cart';
   ajax.post('index.php?ajax=true&amp;user=true', callbackresult, gData);
}

You will need to make sure that whatever page is calling this function has the "ajax.js" file loaded as well. This handles the AJAX calls.

Step 2: Handling the checkout process

I really thought this one was going to be easy, but it turned into a headache real quick. I looked at all the form fields on the checkout form and built my form based off of those values. No problem there. And then I realized that I need to also make a group of fields for the shipping information, in case it wasn't the same as the billing. I built these fields, no problem there. I then added a "onsubmit" handler to the form that would trigger once the customer clicked on submit. This would allow me to copy the billing field's data to the shipping filed's data and then I could just tell the form to submit. Oh-oh, we have a problem.

Here's what the initial code looked like this:

HTML

<form name="MyForm" action="javascript:void(0)" method="post" onsubmit="handleCheckout(this);">
    <!-- billing information -->
    <input type="text" name="collected_data[2]" id="collected_data[2]" value="" /> <!-- billing: first name -->
    <input type="text" name="collected_data[3]" id="collected_data[3]" value="" /> <!-- billing: last name -->
    <!-- shipping information -->
    <input type="text" name="collected_data[10]" id="collected_data[10]" value="" /> <!-- shipping: first name -->
    <input type="text" name="collected_data[11]" id="collected_data[11]" value="" /> <!-- shipping: last name -->
</form>

JavaScript

function handleCheckout(frm) {    

    // copy over the shipping....
    if (frm.use_billing_for_shipping.checked) {
        frm.collected_data[10].value = frm.collected_data[2].value;
        frm.collected_data[11].value = frm.collected_data[3].value;
    }
    
    frm.action = "http://website.com/products-page/checkout";
    frm.submit();

}

Yeah. I wasn't even thinking about it when I was typing it, but they named their form variables with numbers inside of brackets. My guess is that this allows the PHP file to loop through the data as if it was an Array. The problem is that JavaScript will throw a hissy fit if you try to reference any of these variables. So now I needed to rename these variables into something that JavaScript will like so I can manipulate the data and then I have to rename them into the format that the checkout.php script is going to like. No problems, all we need to do is add a little RegEx magic. So here's the updated HTML and JavaScript:

HTML

<form name="MyForm" action="javascript:void(0)" method="post" onsubmit="handleCheckout(this);">
    <!-- billing information -->
    <input type="text" name="collected_data_2" id="collected_data_2" value="" /> <!-- billing: first name -->
    <input type="text" name="collected_data_3" id="collected_data_3" value="" /> <!-- billing: last name -->
    <!-- shipping information -->
    <input type="text" name="collected_data_10" id="collected_data_10" value="" /> <!-- shipping: first name -->
    <input type="text" name="collected_data_11" id="collected_data_11" value="" /> <!-- shipping: last name -->
</form>

JavaScript

function handleCheckout(frm) {
    var re = /(_([\d]+))/gim;
    
    // check the shipping....
    if (frm.use_billing_for_shipping.checked) {
        frm.collected_data_10.value = frm.collected_data_2.value;
        frm.collected_data_11.value = frm.collected_data_3.value;
    }
    // now we need to use regex to change the field names from _x to [x]...
    var jFrm = $(frm).attr("id");
    var flds = $('#' + jFrm + ' input, ' + '#' + jFrm + ' textarea, ' + '#' + jFrm + ' select');
    $(flds).each(function(i, el) {
        $(el).attr({
            name: el.name.replace(re, "[$2]"),
            id: el.name.replace(re, "[$2]")
        });
    });
    
    frm.action = "http://website.com/products-page/checkout";
    frm.submit();

}

Please note, that this assumes you have jQuery available to perform some of the manipulations.

Conclusion

Personally I don't think it's the most elegant solution, but it IS a solution. I wish that the developers of the plug-in would have included this feature, but they didn't. I also wish that they would of had some better documentation, but the don't. And lastly, I wish that they were a little more active on their forums, because they're not. Their forums seem to have a lot of unanswered questions. Including "Manually adding items to the cart", which was asked over 9 months ago, but was never answered. I'm providing it here, for anyone looking to do something similar on there website.

As for the project itself. Well I wish I would have been called earlier, because I never would have suggested any of this from the beginning. It would have been a ColdFusion site and it would of done exactly what the client wanted from the get go.

If you have any questions about any of this or see a problem, please let me know. The code above is psuedo-code that I created on the fly, so there might be a typo or bug or two.

[EDIT] - I almost forgot, if you want to check out the client's website, it's mightyguard.com

[EDIT] - I changed the orphan "data" variable in the second manAddToCart function to be a global variable so the callback function could use it properly. Thanks Jon!