Greetings Mage Lovers!
In this article, I will be explaining how to merge the customer registration form with the default login form of Magento.
Let’s take a look at the following snapshots. You will know what I am talking about:
Making a long story short, we just need to implement the following few steps in order to get it done:
1. Creating mini.register.phtml file:
First you need to create a new template file: app/design/frontend/[your-interface]/[your-theme]/template/customer/form/mini.register.phtml
And copy the contents of default register file: app/design/frontend/base/default/template/customer/form/register.phtml to the mini.register.phtml and customize as per your requirement.
If you want like the one depicted in above snapshot then you can simply download the customized mini.register.phtml file from [here]
2. Including mini.register.phtml in login.phtml
First copy the file: app/design/frontend/base/default/template/customer/form/login.phtml to your current theme as:
app/design/frontend/[your-interface]/[your-theme]/template/customer/form/login.phtml
And now you need to modify the new login.phtml so that you can include the contents of mini.register.phtml.
For this, you have to use the following XML code in your layout XML file (preferably in app/design/frontend/[your-interface]/[your-theme]/layout/local.xml) as:
<customer_account_login translate="label">
<reference name="content">
<action method="unsetChild"><child>customer_form_login</child></action>
<block type="customer/form_login" name="customer_form_login2" template="customer/form/login.phtml" >
<block type="customer/form_register" name="customer_form_register2" template="customer/form/mini.register.phtml">
<block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" />
</block>
</block>
</reference>
<reference name="head">
<action method="setTitle" translate="title" module="customer"><title>Login or Create an Account</title></action>
</reference>
</customer_account_login>
Now you can simply include the mini.register.phtml in your new login.phtml file as:
<?php echo $this->getChildHtml('customer_form_register2'); ?>OR
You can simply download the modified login.phtml file from [here] and place in your template folder as: app/design/frontend/[your-interface]/[your-theme]/template/customer/form/login.phtml
Notes:
Unset of child block: ‘customer_form_login’ and using different name: ‘customer_form_register2’ for the corresponding block is important else you will get double login block.
3. That’s all.
Now clear the cache and reload the customer login page:
- http://your-mage-store/customer/account/login
You will, of course, see some good results.
Hope you found this article interesting.
Cheers!
Your implementation simply rocks man. Thankyou very much!
Would you please explain about the code?. I do not know to how to change default file format.
Hi,
This blog post has saved my life, many thanks for sharing.
One question, I used your files and all works well when accessing the native Magento login page. However, if I embed the login.phtml file like so:
{{block type="core/template" template="customer/form/login.phtml"}}It does not render the mini.register. Any idea why it seems to ignore the getChild under this scenario?
Many thanks
Thanks for the helpful tutorial. The login form works for me but for some reason the “create an account” button is dead and goes no where.
When I look at the console I see an error:
TypeError: element is null
if (element.addEventListener) {
I even tried implementing your exact code but the button is still dead. Any ideas would be greatly appreciated.
Thanks.
Figured it out. The problem is in your login.phtml file.
The javascript in the bottom is:
var registerForm = new VarienForm('form-validate-register', true);Needs to be:
var registerForm = new VarienForm('form-validate', true);Thanks for sharing the valuable blog.
It needs little more modification.
The create account stops working after changes the phtml in such a way.
So can you just tell me what changes are require to make everything working as it and just changes the layout…
Thanks in advance
Hey dude, I tried doing your suggestion but it did not turn out so great as I hoped. I have done everything as you explained but ended up having a login or create an account on my frontpage. I tried changing all my local.xml and login.phtml files with the originals and clean the cache but still have it on my frontpage. I really sort it out asap, and hope you can help me with the issue. the website is: fashionfactory.bg Thanks in advance 🙂
I followed all the steps you mentioned in the article but it did’nt work for me 🙁
Can you please explain this line…Sorry bro i don’t know coding much….””Unset of child block: ‘customer_form_login’ and using different name:
‘customer_form_register2′ for the corresponding block is important else
you will get double login block.””