Checkout Customization & AJAX

Checkout Customization & AJAX

The requirement

The client had a checkout based on horizontal tabs for each checkout step with only native Magento functionality. What they wanted was (1) a concertina one page checkout responsive across customer devices of all types, (2) a sidebar showing basket items with product images, (3) the removal of an unnecessary payment selection step as customers were directed to an external payment page following review and (4) the ability to receive charitable donations at the review step of checkout.

The solution

Based on wireframes provided by the design team, I defined blocks and templates and specified the CSS with appropriate media queries to meet the layout requirements and provide full responsivity. Removing the payment step essentially involved rewriting onepage block classes, creating and instantiating new Prototype javascript library classes for the checkout steps, shipping method and review, and rewriting the saveShippingMethodAction method in the Onepage Controller to redirect to the review step. A detailed technical approach to customizing checkout to receive charitable donations including use of total collectors and AJAX can be found in my blog.