22
Jul
Working with MODx & FoxyCart More – Using JSON on Your Receipt Page
Posted by Sam Clarke on Thursday Jul 22, 2010 Under Development, Internet, ecommerce, foxycart, jquery, modxFollowing 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.
