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!