Little Plum, an online shop for a handmade children’s gift business has just gone live. Design and build both by Toasted Digital, Photography is by Richard Homer. The site uses Modx Evo as its CMS, and FoxyCart as its basket system.
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.
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, £"
+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, £"
+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!
For a few years now I’ve been helping musician Simon Jaymes with the online side of his campaign to get going independently, and finally his album is ready to be released. Last week saw the launch of the single “Sail Boat”, I went to the launch gig with my girlfriend and housemate at the Embassy in London and it was a great evening. The reception was warm and everyone seemed to enjoy themselves.The support for him has been really good, although I’ve seen just how difficult it is for a new artist to self fund themselves into the limelight.
So now comes the album launch. You can buy the CD from simonjaymes.com directly right now, and the download version will available from the 5th of July on iTunes, Amazon, 7Digital etc..
I’m looking forward to seeing how he does, and I wish him all the best. The album really is great and deserves to be heard. Check it out on last.fm.
One of the big decisions I’ve had to make over the past few months with regards the new Toasted Digital website is Flash or no Flash. A large part of the work I do is Flash based, therefore it seems appropriate to display my portfolio in that format. However the internet is changing, and Flash while a big part of the work I do is generally not my favorite thing to use for full websites anyway. The downsides of its SEO capabilities and incompatibility with apple products can be frustrating. So I’ve decided to run a few experiments and tests using jquery to animate divs. I’ve seen a few examples around the net but can jquery alone give me the level of animation I need to make my website? I’ve not yet seen an example of sophisticated animation using jquery as an alternative to Flash, but the animation required for my website is simple and slick, therefore it may work.
Results
http://www.toasteddigital.com/ex/
In this example we have a city growing out of the ground, with smooth easing and timing, a couple of simple sprites going across the page and a button to move the content into the zone we want it. The jquery seems good enough. The stylesheet is a little off in IE7+ and I haven’t yet tested in IE6, but in FF, Chrome and Safari the results are great. I’ve also tested the example on safari on a borrowed iPad with good results, something I’d have no chance with using Flash. It’s all in basic form, but it seems great alternative to Flash when using simple animation. As we get to use more and more HTML5 as well, there are more complex features that can be included.
