September 2009

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.