Since originally writing this tutorial FoxyCart’s 0.7.0 release has made some of this a lot more simple. If you’re on an older version then the tutorial below should be of good use to you, but if you’ve upgraded then there’s a couple of cool new features which make the whole process a lot easier.

The foxycart.js now automatically updates some divs which you can freely place on your page. As long as you have FoxyCart up and running, it’ll work without any extra effort. Simply create the elements within your HTML you require with the following class names or IDs, taken from the FC wiki:

• #fc_minicart, .fc_minicart: If the FC.json.product_count is greater than 0, these elements will be shown. Otherwise they’ll be hidden
• #fc_quantity, .fc_quantity: The inner HTML will be replaced by the value in FC.json.product_count.
• #fc_total_price, .fc_total_price: The inner HTML will be replaced by the value in FC.json.total_price, formatted using the _currency_format function (which adds decimals but doesn’t add currency symbols).

Nice and simple.

————————————–

Original Tutorial – 10th July 2010 – For FoxyCart versions prior to 0.7.0

————————————————

I’m currently working on a redesign and rebuild of Little Plum, and the CMS of choice has been modx. The cart we’ve chosen to use is FoxyCart, due to how awesomely customisable it has turned out to be. I’ve noticed quite a lack of tutorials on using modx and foxycart together on the web, so after this experience with the Little Plum store I will try and put a few online.

In this post I’m just going to briefly explain how you can get live figures from your FoxyCart cart on your website using the FoxyCart JSON cart object. I’ll get to work on some more in depth tutorials in the future, so keep checking back.This quick tutorial assumes you’ve got your store set up and the foxycart includes already embedded on your page. Check out the foxycart documentation if any info is needed on how to do this.

When you update your cart, FC will call the fc_BuildFoxyCart() function, so whatever we put within this function will be triggered after any interaction with the cart. Create a new js file and insert this function. Include the new js file on your website.

1
2
3

<a name="line1"></a>function fc_BuildFoxyCart() {
 
}

<a name="line1"></a>function fc_BuildFoxyCart() {

}

So what we want to do in this example, is display how many products we have in our cart, and what the total price is. We want to display this in a div on our website, so we’ll create a div we can write the data to.

1

<a name="line181"></a><div id="minicart"></div>

<a name="line181"></a><div id="minicart"></div>

In this case, our div id is “#minicart”

Getting data from the foxycart JSON is very simple, in this example we want the product_count and the total_price:

So our fc_BuildFoxyCart() function becomes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<a name="line11"></a>function fc_BuildFoxyCart() {
        if (fc_json.product_count > 0) {
            $("#minicart").html("<p>"+fc_json.product_count+" items, &pound;"
            +fc_json.total_price+"</p>");
        }
        else {
            $("#minicart").html("<p>0 Items</p>");
        }
 
        if (fc_json.product_count == 1) {
            $("#minicart").html("<p>"+fc_json.product_count+" item, &pound;"
            +fc_json.total_price+"</p>");
        }
}

<a name="line11"></a>function fc_BuildFoxyCart() {
        if (fc_json.product_count > 0) {
            $("#minicart").html("<p>"+fc_json.product_count+" items, &pound;"
            +fc_json.total_price+"</p>");
        }
        else {
            $("#minicart").html("<p>0 Items</p>");
        }

        if (fc_json.product_count == 1) {
            $("#minicart").html("<p>"+fc_json.product_count+" item, &pound;"
            +fc_json.total_price+"</p>");
        }
}

Go ahead and update your cart, and watch the details written to the #minicart div. The if handles no items, and a single item., but you can customise this how you like.

This should have given you some basic knowledge on the FoxyCart JSON and how we can use it to get data from the cart onto our sites without needing to access the cart popup itself. For a full view of the JSONstructure, check out this documentation. I’ll be writing some proper tutorials very soon on FoxyCart and modx, so keep checking back!

Following up on my previous FoxyCart/MODx Tutorial, more FoxyCart solutions have come my way.  I’ve recently had to implement pixel tracking onto a client’s website. FoxyCart has some good documentation on basic affiliate tracking, however I needed slightly altered data in my tracking image.  Luckily the FoxyCart JSON gives you access to more data, and with a little JavaScript you can get a lot more out.

In this small tutorial I will show you how to include custom tracking information on your receipt page, using JavaScript and the ^^receipt_only_begin^^ ^^receipt_only_end^^ placeholders.

If you’re trying to figure out how to place order data onto your receipt, you may first want to check out this documentation for the existing available placeholders to check that doesn’t already suffice.

The main issue I faced was that my order amount needed the value multiplied by 100 to remove the decimal, it also needed to be the subtotal without tax. While the ^^subtotal^^ exists, it’ll output my total as xx.xx e.g 24.99. What I’m looking for is 2499.

So in comes the FoxyCart JSON. Check out the documentation here.

With this available, we’re able to manipulate our data with JavaScript. In the <head> tag of your receipt template, we can place the following:

<script type=”text/javascript”>
window.onload = function() {
var price = fc_json.total_price;
newprice = price*100;
$(“#track”).html(“<img src=’http://yourtracking.com/&amount=”+newprice+”‘/>”);
}
</script>

Within the <body>tag of your receipt template, create the div #track

<div id=”track”></div>

This is where 0ur pixel tracking gets added.

As this is tracking, we only want the tracking image called once. FoxyCart has two useful tags to make sure this happens.  ^^receipt_only_begin^^ ^^receipt_only_end^^

Place these either side of your javascript

^^receipt_only_begin^^

<script type=”text/javascript”>
window.onload = function() {
var price = fc_json.total_price;
var newprice = price*100;
$(“#track”).html(“<img src=’http://yourtracking.com/&amount=”+newprice+”‘/>”);
}
</script>

^^receipt_only_end^^

This ensures that the javascript function won’t be called on any return visits to the receipt.

There we have our tracking code with custom values inserted. Using the JSON we could potentially create a loop to support multiple tracked products, and get other values such as quantity or category.

Apparently the next release of FoxyCart will see the whole preprocess and buildfoxycart functions a little easier to work with, but even now with a little knowledge FoxyCart is awesomely  flexible.