Magento Onepage Checkout – down the rabbit hole, and what about the JavaScript?
The Magento Onepage Checkout is quite a tricky component. For simple tasks, it is quite possible to change the PHP code with surgical precision without messing around with the JavaScript part. But unfortunately, in many complicated tasks, like adding a new step with a bunch of new functions, would inevitably involve JavaScript handling.
Here come a couple of useful tips:
Our final target is the opcheckout.js, located at: skin/frontend/default/default/js/opcheckout.js
Before we jump into hundreds of lines of JS codes, our first stop should be the template files for the Onepage Checkout. At the end of those files, you will see something like:
[codesyntax lang=”javascript” lines=”fancy”]
<script type=”text/javascript”>
//<![CDATA[
var billing = new Billing(‘co-billing-form’, …);
//]]>
</script>
[/codesyntax]
Yes, this is the critical link between our PHP part and JS part.
For each new function we want to add, we want to create a new action in the controller, then the block and template files. This forms the backbone of the Magento Onepage Checkout. At the end of the template file, we need to create a new object to accommodate new functions. Then we can go to opcheckout.js to define the corresponding class.
Back to the opcheckout.js, this file may appear intimidating. However, there are simple patterns to follow. Note that there are already example classes within, for us to learn from.
The first thing to do is:
[codesyntax lang=”javascript” lines=”fancy”]var MyNewClass = Class.create();
MyNewClass.prototype = { … }[/codesyntax]
You only need to make a few modifications here and there to get to the Magento Onepage Checkout.
Next, we need to modify the Checkout class to put everything together: we need to add our new step to this.steps, and then add function like setXxxxxx: function() { .. }
Lastly, several caveats, be careful with the tag id prefixes and suffixes, like $('checkout-'+ xxxxx +'-load') or $('opc-'+ xxxxx). Make sure this is the exact match to the tag id defined in the template (.phtml) files.
