Magento’s Onepage Checkout in a nutshell

19 Comments 8th JAN 2009 | Posted by Branko Ajzele in Magento

Magento’s Onepage Checkout in a nutshell

For the last two days I’ve been working on a custom checkout page for one of our clients. Basicaly a page can be shown in Magento using simple Core_Template type. Basically all code is set inside the .phtml file so it can be shown on every possible page or block, meaning it’s object independent, no inheritance. Something you can call from with your layout files like

<block type=”core/template” name=”checkout_customcart” template=”checkout/customcart.phtml” />

To complete my work, I had two mayor requirements. One was to manage my way around programmable adding a simple products to cart, plus their quantity and other was to do checkout with items in cart. Checkout was to be made with predefined payment method as well as shipping method. After reviewing a lot of Magento’s code involved in checkout process and process of adding products to cart and so on I’ve put together what I see as the most short example one can use to do a checkout with such predefined conditions.

If you have such special requirements for your site below is the code that you can place on whatever file you wish and include it yout tempalte as block type core/template.

$checkout = Mage::getSingleton(’checkout/type_onepage’);
/*
* One page checkout consists of following steps
* (1) Customer login method aka Checkout method
* (2) Billing information (address)
* (3) Shipping information (address)
* (4) Shipping method
* (5) Payment information
* (6) Order review, in short: DO THE ORDER
*/

//STEP(1)
$checkout->saveCheckoutMethod(’guest’);

//STEP(2)
$checkout->saveBilling($billingAddress, false);

//STEP(3)
$checkout->saveShipping($shippingAddress, false);

//STEP(4)
$checkout->saveShippingMethod(’flatrate_flatrate’);

//STEP(5)
$checkout->savePayment(array(’method’=>’checkmo’));

//STEP(6)
/*
* $checkout->saveOrder() returns array holding empty object
* of type Mage_Checkout_Model_Type_Onepage
*/
$checkout->saveOrder();

And here is the example of how the $address variables are supose to look

[billing] => Array
(
[address_id] => 5
[firstname] => Branko
[lastname] => Ajzele
[company] => Surgeworks
[email] => ajzele@somemail.com
[street] => Array
(
[0] => Address part 1
[1] => Address part 2
)

[city] => Osijek
[region_id] =>
[region] =>
[postcode] => 31000
[country_id] => HR
[telephone] => 0038531000331
[fax] => 0038531000332
[customer_password] =>
[confirm_password] =>
[save_in_address_book] => 1
)

[shipping] => Array
(
[address_id] => 6
[firstname] => Ivan
[lastname] => Weiller
[company] => Surgeworks
[street] => Array
(
[0] => Address part 1
[1] => Address part 2
)

[city] => Osijek
[region_id] =>
[region] =>
[postcode] => 31000
[country_id] => HR
[telephone] => 0038531000333
[fax] => 0038531000334
[save_in_address_book] => 1
)

And you can wrapp the above checkout code into something like

if($this->getRequest()->getParam(’submitCustomCheckout’))
{
//Checkout code from above…
}

Where ubmitCustomCheckout is the name of the submit button or submit input field. To extract addresses you can use something like

$billingAddress = $this->getRequest()->getParam(’billing’);
$billingAddress['use_for_shipping'] = 0;
$shippingAddress = $this->getRequest()->getParam(’shipping’);

That’s it. Simple, predefined checkout by whitch order can be make on one click.

If you like what you read, please share it.

  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • BlinkList
  • Kirtsy
  • Yahoo! Bookmarks
  • Reddit
  • Technorati
  • Twitter
  • StumbleUpon
  • LinkedIn
  • MySpace
  • Netvibes

There are 19 comments (Add Yours +)

  • Hello,

    How can I add some more fields to this Checkout form ? And without changing the core files needed to do the checkout process?

  • Hi Joseph

    Above example is the checkout in it’s simplest form. It took me almost whole day to figure the steps. Above steps are not all that make checkout process. They simple represent somewhat of a hooked state where I went behind few functions and “tapped” the right stuff in the right place.

    Answer to your question simply cannot fit into two or three sentence. Best advice I can give right now is to use the method I described in this article http://activecodeline.com/utilize-firebug-and-firephp-to-speed-up-magento-development/ and start playing and debugging the Mage_Checkout_Model_Type_Onepage class if you are a developer. If you are more of a frontend user (the client :) ) I suggest you hire someone to implement custom checkout for you if you require one.

    Not sure how helpful this was. Wish you all the best. Cheers.

  • Hi,

    I want when user click the “Continue” button in billing section after filling the billing details, then on click of continue button, I want to send mail to my sales team with billing details, without stopping the checkout process, it should be using AJAX,

    Can you please tell me how to do this?

    Thanks

  • Branko,

    Will it works if JS disables?

    Looks exciting! I was still eager waiting for Varien releases the single page checkout that one of the team member mentioned.

    Can I copy your code and play with it?

  • Above example is pure PHP, so no JS is required :)

  • @chinesedream and Branko:

    On the topic of JS I was under the impression that Magento didn’t function if JS was disabled. For example my add to cart buttons don’t work and the menu doesn’t drop down, little things like that. I’ve been told that this means if you use Magento you basically have to assume the user has JS installed so you don’t need to code workarounds for a situation that will never exist. Have I been misled? I’d love to see a working Magento with JS disabled if anyone has a link they’d like to share.

    @Branko: I think I speak for everybody when I say your tutorials are very much appreciated

  • @Spuff

    In the default Magento’s one page checkout you have these checkout steps like enter shipping address, choose shipping method, choose payment method and so on. HTML for each next step is retrieved using JS (AJAX). Therefore, you need JS.

    In my example you do not need JS because i throw each of those steps out and made custom checkout with predetermined values inside the code. In my example I never see “Choose your payment method” step because I have set it in code. Hope this clears some stuff for you.

    Cheers…

  • @Spuff,

    I’d been working on improving accessibility and progressive enhancement on Magento store for projects. Things I have done concerning JS turns off that maybe helpful to you are:

    1. Use jQuery Superfish menu instead.
    2. Use jQuery for Tabs – the Modern theme has a Tabs Feature in Product page but it’s no good with JS turns off.

    Thanks Branko.

  • Hi,

    I am trying to have the checkout page in the product page,
    so for each product viewed the customer will be able to complete the checkout, as guest, at the same page where the product is.
    (catalog/product/view.phtml)

    I was trying to follow the code here, and added this as submit button:

    I recived the following error:
    Use of undefined constant ?submitCustomCheckout? – assumed ‘?submitCustomCheckout?’

    How can I do that?

    Thanks

  • regarding the last post, the submit button:
    input type=”submit” name=”submitCustomCheckout” value=”submit”

  • Forget it. It works. It works well.

    Now the problem is how to save the item for the sale from the product page and not from the shopping cart.

  • why don’t you explain it more ?
    it brings more confusions :(

  • If it brings you confusion then do not mess with it. This is advanced stuff, and poking around checkout if you do not understand the basis is a no no. Above article is a basis. Took me 6 days to wrote fully functional version as per client request, it has around 800 lines of code. I have no time, or wish, to explain that in detail. Besides, Margarita seems to be ok with it.

    If you require such functionality, feel free to request a quote. Cheers…

  • @Branko: cool thanks, it’s good to know the checkout page will work for everybody.
    @Chinesedream: Nice, I’ll look into those. We actually managed to change the side nav to use jquery accordian and I’m hoping to replace all Prototype with jQuery (but it looks like a huge task).

  • Excellent! Extremely concise, to-the-point and helpful! Thanks so much for taking the time that all of us developers should take to write down things as we learn them for each other to learn from… Awesome dude…

  • Hi
    I am using One step checkout method. but i am facing one problem during the submit order .In step 4
    $checkout->saveShippingMethod(’flatrate_flatrate’);

    In my site i have enabled United Parcel Service,United States Postal Service . I am getting error “Please specify shipping method”. when i replaced flatrate_flatrate with “United Parcel Service” .
    Can u tell me that how i can solve this problem.

    Thanks

  • Babu laal Says

    Hi I want to redirect the link Place Order to Payment Gateway of bank s site with
    passing some variables like grand total .

    thanks

  • Nightfly Says

    Thanks, most useful article!

  • Rajendra Says

    hi i would like to know how to add some amount say $1.0 to the grand total when use pays through certain payment method.
    Anyway to hack grandTotal() from payment module ??

Leave a Comment

Magento Design and Development | Online Marketing Campaigns | iPhone Application Development Web Application Development with ZEND | WordPress Ecommerce | WordPress development
Sitemap

Inchoo - webappsolutions | 2009