Adding a new tab under one page checkout – full working module

Featured Image

Adding a new tab under onepage checkout in Magento might seem as incredibly easy task. right?! Well, it’s not. If you want to do it properly, you gonna have to do some work. Took me few hours to get this one running. Attached are screenshots for you to see final result.

Frontend

Backend1

Here is the module itself Inchoo_Heared4us.

Few words about module. It uses built in Admin theme module from a coworker Ivan Weiler. If you have this Admin theme module installer already please disable it, since its built into this Heared4us module. There is only one thing you NEED TO DO in order for module to work: Once you added it to Magento, go to System > COnfiguration > Design and write down “custom” under Admin theme section. This admin theme section will appear as soon as you refresh Admin page once you copy-pasted module. If you get “Access denie” error, please logout and login into the admin.

That’s it. If you wish to edit the questions that appear under newely added tab, open the app/design/frontend/default/default/template/checkout/onepage/heared4us.phtml file and modify the array at the very top of the file.

DO A FULL DATABASE AND FILE BACKUP BEFORE ADDING A MODULE TO LIVE STORE.
You should always do a full backup when adding modules to live store. Although the module does not have any database dependencies and stuff, it uses overrides on checkout model, controller and block. Use on your own responsibility.

What you can learn from module? -You can learn how to override (extend) default controllers, Models, Blocks. You can learn how to modify existing JS files and reuse them (reused sample of JS for tab, saved it under heared4us.phtml file itself), you can learn how to set custom theme files on admin to avoid modifying default admin theme, learn how to extend order object (or any other, from sql setup file), learn how to “attach a hook” aka observer to event… Lot to learn on a small module like this. Hope it helps.

Cheers.

119
Top

Enjoyed this post?

Subscribe to our RSS Feed, Follow us on Twitter and spread it to your friends!

Author

Branko is Inchoo's CTO with over 3 years of active / everyday full time Magento development.

Other posts from this author

Discussion 119 Comments

1 2 3
Add Comment
  1. Dumbrava Razvan Aurel

    Thanks Branko!

  2. Ted

    That’s a great module, but ‘heared’ isn’t an english word! Nor is the syntax standard! It should be either “Where did you hear about us?” or “How did you hear about us?” or preferably “How did you find out about us?”

    Aside from that, you’re doing great work explaining magento to the world. Thanks.

  3. @Ted “Google” is also a non English word but everyone is using it… enjoy the module, and off course rename the strings to your preference :)

  4. @Ted: I’m also not going to use it because of that !! ;)

    You saved me some time Branko, as usual, great example.

  5. Wow amazing.

    Only problem is I’m scared of running new modules in a live site. I’m always having to change permissions via shh which causes problems with my integrated blog..

    Hope I can get it going though.

  6. Bryan Houghton II

    Hi Branko,

    Many thanks for this module. Really helpful for us. :) . If I’m going to add a new tab for the customer page would this be a similar approach?

    Thanks again Branko.

  7. @Bryan Yes, the approach is the same. You got all you need already extracted (extended controller, block, class).

  8. Kiril Sokolov

    I think it’s great.
    I need an extra tab after shipping method for delivery date for flower shop. I think that with small changes I can achieve that. Maybe I can share the solution, if successful :)
    Only one problem.
    When I try Your solution on a local installation of Magento on admin end it’s all OK. But on front end when I go to Checkout I get a blank page. The url says index.php/checkout/onepage/ but the layout switches to 3columns (I use 2columns-right) and I get default right column, not checkout progress with blank middle column.
    Any ideas?

  9. Bryan Houghton II

    @Branko, Many thanks, I’ll try it then :)

  10. Wow – Great! Thanks!

    I would love to see a similar article, but for the Account Creation System instead of the Checkout System. For example, if a customer is registering a product, they can either choose the product from a drop-down list, or simply type in the name of their product in a text field.

  11. Rianti Bieler

    Hi, with this module, can you actually see the answer of the “Where do you hear about us” in the admin section? I mean, see all the result like the poll result or do you actually need to gather the answers manually from each order page? Because I’m thinking of adding a poll to the end of a one page checkout asking the same question. Cheers!

  12. Toni Anicic

    @Rianti, how about using Google Analytics and KNOWING how did they hear about you? :D

  13. Thanks Branko! Is it possible to move this field to another step?

  14. wee-man

    If i would like to edit the questions in the administration of magento and not directly in the code, how could it be done?

  15. Mike Whitby

    Very nice module :) I can testify to how hard it is to add a step to the OP checkout!

  16. I think it’s great.
    I need an extra tab after shipping method for delivery date for flower shop. I think that with small changes I can achieve that. Maybe I can share the solution, if successful :)
    Only one problem.
    When I try Your solution on a local installation of Magento on admin end it’s all OK. But on front end when I go to Checkout I get a blank page. The url says index.php/checkout/onepage/ but the layout switches to 3columns (I use 2columns-right) and I get default right column, not checkout progress with blank middle column.
    Any ideas?

  17. shiv diwan

    I think it’s great.
    I need an extra tab after shipping method for delivery date for food shop . I think that with small changes I can achieve that. Maybe I can share the solution, if successful :)
    Only one problem.
    When I try Your solution on a local installation of Magento on admin end it’s all OK. But on front end when I go to Checkout I get a blank page. The url says index.php/checkout/onepage/ but the layout switches to 3columns (I use 2columns-right) and I get default right column, not checkout progress with blank middle column.
    Any ideas?

    please Help Asap i have lose client.

    thanks

    shiv

  18. Guys … haven’t something related, but not exactly this … and maybe you can help. If I try click on create order in the backend, it gives me this error, but carries on loading: Notice:
    Undefined index: type in /home/digitala/public_html/app/code/core/Mage/Adminhtml/Model/Giftmessage/Save.php on line 96

    I’ve tried everything to fix this, including replacing the entire app directory.

    Then when I create the order … there is no option to set shipping, so when I click submit order it gives me the error that shipping isn’t selected. Suddenly, now the shipping appears, but it appears inside the gift card message box, which also wasn’t there before.

    Any ideas how I could fix this … I’ve tried everything I can think of :P

  19. Tom Alney

    Hi Branko,

    I’ve tested this module in Magento 1.3.2.1, but it didn’t work. When I go to checkout page, it displays a blank page. I think there’s problem with controller…

  20. Mak

    Hii Branko

    i can not see the checkoutpage after installing the module can any body help me..
    aReply asap

  21. Simply disable the module in app/etc/name_of_the_module for starters, if you used it on live site. I to have stumbled on blank page on some servers. Not sure what the issue is. Did not had time to debug it. Could be Apache related, really not sure.

  22. Omer

    works perfect in 1.3.2.4 thank you so much :)

  23. Jen

    no matter what i do, it wont let me extract this folder!

  24. louis john

    HI branko.
    Thanks for the code.With this code is it able to bring a date field and checkbox in the 3rd step of checkout that is shipping method and show it on admin side when we select a particular order

  25. Jamal

    I have installed the heared4us module. It works as described. Thank you.

    I tried to use it with http__www_magentocommerce_com_extension__1361__checkout-newsletter. Before I installed heared4us module, the Checkout Newsletter was working fine. Is there any changes I should make to heared4us module in order to get this working (2 modules together).

    Thank you.

  26. Your module was installed on my client machine and the cart is stuck up its not moving all the steps are disabled . Can you please help

    Regards

  27. Will

    This looks very interesting… I cannot find it in the magneto Connections.

    Soo When I downloaded the linked table. I was hoping for some instalation instructions..
    There are 2 directories
    _MACOSX
    Inchoo_heared4Us

    Both have app directories.
    Which one do I copy to my app directory?? Both ??

  28. Will

    Sorry Figured it out…. MACOSX is for Apple MAC .. once I wrote it down and looked at my Message I realized my mistake
    w

  29. prakash

    Thank you , thanks a lot

  30. Dilby

    Sounds promising but unfortunately I’ve had the same error as many of here with the layout problem with onepage checkout. It’s not a white page – but only shows the cart box on the left column and the rest is an empty wrapper. Is there no fix for this at all?

  31. This doesnt seem to work on magento version 1.3.0 and 1.3.1. To make it work on these version i had to directly modify the core magento files, which i know is not good, but didnt have any other option.

  32. This is shows blank checkout page in magento version 1.3.0 and 1.3.1

  33. Dilby

    Yes guys it doesn’t seem this is compatible or stable so it is unfortunate as it did seem to be needed. Will have to keep looking!

  34. jnunez

    The issue seems to reside in the config.xml file /config/global/rewrite.

    If you comment that out it the panel will show but it will not be active. Everything is rendered but the panel is never activated.

    Could be a quick fix. I’ll post if I find it.

  35. jnunez

    Ok the only way to fix it is to upgrade to the latest 1.3.2.4

  36. neochap

    @Branko

    I have updated to 1.3.2.4 .
    When I log into admin and see the order.

    There is a tab in the admin, for “How did you hear about us” but it is blank inside. No value of the chosen option is getting stored.

    If the value is stored in the database, can you tell me the table in which it is stored? So I can check . Thanks.

  37. neochap

    This module works well with 1.3.2.4
    If you have a payment gateway(like worldpay), make sure you return to the website http://www.site.com/magento/checkout/onepage/success/
    after placing the order.

    other wise there would be no data in the admin section of “how did you hear about us?” even when the order is placed.

  38. PollyDog

    Branko ,thank you very much.This module helps me so much .
    BTW, as to me ,it worked well with magento 1.4.0.1.

  39. MG

    I’m using this to integrate a coupon code functionality – can anyone help me with this? I would like the front-end coupon code field to link up with the shopping cart price rules. Any ideas?

  40. Daisy

    Hi ,
    Its a nice module. Thanks a lot for sharing that module.
    I want more than 5 fields inside my new created step. What need to be done to add more fields.

  41. Matt

    I used this as a base for a module and it worked fine in community edition. However it’s not working in Enterprise edition 1.3. Does anyone know what the differences might be between the two versions are that may prevent it from working properly?

  42. Branko, Hi,

    Thanks for the module. I have it working on 1.3.2.4 and it’s working well. Just one question, I extended it and added more fields with radio buttons and inputs, but now, it no longer saves. I am in app/code/local/Inchoo/Heared4us/Model/Observer.php and if I add this: $_heared4us_data = is_array(Mage::getSingleton(‘core/session’)->getInchooHeared4us()); then it only saves the value 1..which I’m not sure. If you have a moment, I could use your input, Thanks a bunch and I hope your’e doing great,

  43. I uninstalled the heard4us extension because it did not work. I deleted the files manually. But now my admin page site crashed! Is it about selecting the ‘custom’ design for admin theme?

  44. Ok problem got fixed by removing the cache files and sessions via ftp under /var directory.

  45. FrozenOne

    This is the place I found a solution or at least some hints for a lot of tasks I needed to complete.

    Thanks a lot, Branko! The next time I get to Croatia, you will be invited to some drinks! :-)

  46. Toni Anicic

    @FrozenOne, that must be due to the famous “Beerware licence” :)http://en.wikipedia.org/wiki/Beerware

  47. Deric Braito
  48. A word of warning…..this extension causes problems with the SagePay extension:

    http://www.magentocommerce.com/magento-connect/ebizmarts/extension/163/protx-direct-payment-module

    I would avoid if you are using this payment gateway.

  49. Hello,

    I am getting the info on the Order page in admin.

    But I need to show the ‘Where did you heared about us’ box in the New Order email as well, which sent to customer. How can it be done.

    I tried to put {{var order.getHeared4us()}} in the email, but nothing is getting printed. Any help please?

  50. Thanx Dear…. Very useful module…

1 2 3

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top