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

58 Comments 10th SEP 2009 | Posted by Branko Ajzele in Magento

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

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.

If you like what you read, please share it.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Yahoo! Bookmarks
  • Reddit
  • Technorati
  • Twitter
  • StumbleUpon
  • LinkedIn
  • Netvibes
  • NewsVine
  • Sphinn
  • Tumblr
  • Posterous

To post code in comments, place your code inside [code] and [/code] tags.

There are 58 comments (Add Yours +)

  • Dumbrava Razvan Aurel Says

    Thanks Branko!

  • 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.

  • @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 :)

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

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

  • 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.

  • Bryan Houghton II Says

    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.

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

  • Kiril Sokolov Says

    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?

  • Bryan Houghton II Says

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

  • 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.

  • Rianti Bieler Says

    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!

  • Toni Anicic Says

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

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

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

  • Mike Whitby Says

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

  • 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?

  • shiv diwan Says

    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

  • 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

  • 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…

  • Hii Branko

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

  • 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.

  • works perfect in 1.3.2.4 thank you so much :)

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

  • louis john Says

    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

  • 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.

  • 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

  • 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 ??

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

  • Thank you , thanks a lot

  • 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?

  • 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.

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

  • 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!

  • 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.

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

  • @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.

  • 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.

  • PollyDog Says

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

  • 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?

  • 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.

  • 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?

  • 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,

  • 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?

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

  • FrozenOne Says

    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! :-)

  • Toni Anicic Says

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

  • 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.

  • 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?

  • Thanx Dear…. Very useful module…

  • Yogendra Mishra Says

    Hello Branko,

    First of all very much thanks for such a nice module and I got it working too.. I have only one concern is that my client don’t use any Free Payment method and as far as I am sure that your module needs free payment methods like check / money order… so is there any way to avoid this error? as I get is usually when I disable the payment method.. and this is the errror in system log : DEBUG (7): NOT Showing Free payment method..

    Many Thanks,
    Yogendra

  • Finally I was able to print the ‘getHeared4us’ in the email as well.

    Here is how:

    In the file: app/code/core/Mage/Sales/Model/Order.php

    Added one more array att. below the line:

    ‘payment_html’ => $paymentBlock->toHtml(),
    ‘heared4us’ => Mage::getSingleton(‘core/session’)->getInchooHeared4us(),

    So now in the ‘order_new’ email it can be printed this way:

    {{var heared4us}}

  • go it to work in magneto 1.4 after i had given up on the admin theme section from appearing. but then it just magically showed up. i guess magneto is robust and it just takes a while for things to show sometimes.

  • also had a problem at first extracting, but got it to work after switching browsers, now trying to find out where to correct the spelling of the tab from heared , to how you heard about us. any suggestions?

  • I am having problem to display info at admin panel otherwise seems working fine.

  • I can’t see the data on the order in the admin.
    I am getting the new tab with option in the checkout.
    Is there a way to check in the db that the info was saved?
    Thanks.

  • forgot to say that I’m using ce 1.4.1.0

  • How can we add another field under default drop down field on new tab ? Also how can we show additional filed value in admin sales order section ? Please guide us on this asap.

Leave a Comment

Please wrap all source codes with [code][/code] tags.
Magento Design and Development | Magento SEO | iPhone Application Development Web Application Development with ZEND | WordPress Ecommerce | WordPress development
Sitemap

Inchoo - webappsolutions | 2009