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.

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.