10
Jul

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.

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.

<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:

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!