Magento login and register form one page

Question

I am trying to combine the login form and create account form in Magento into one page. The reason is i just think the fewer pages the better. I find Magento confusing and have limited understanding of its layout and template system. I decided the easiest way to do this would be to just add the login form to the register account page. I found the login form and register form in login.phtml and register.phtml in template/customer/form/.

I simply copied the PHTML code from login.phtml into the register.phtml file that is in the same directory. This is what I ended up with:

http://pastebin.com/fpkeBsxc

After I fill in the email and password of an account and click login, the page returns with validation errors referring to the register account form bellow it. Basically, I'm not sure if this is because my approach is completely stupid/wrong and I can't just copy and paste code like this, or is this a simple html problem that I can't see? I think might be wrong way, as register form works. I'll post a screenshot of this in a comment, it won't let me paste more than one link. Thanks for any advice.

Solution 1

<reference name="content">            
    <block type="customer/form_login" name="customer_form_login" template="customer/form/login.phtml">
        <block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml" />            
    </block>
</reference>

by this u can put html where do u want to place in customer/form/login.phtml

<?php echo $this->getChildHtml('customer_form_register') ?>

Solution 2

In customer.xml within your theme you can move the account register block to within the login page.

 <customer_account_login translate="label">
    <label>Customer Account Login Form</label>
    <!-- Mage_Customer -->
    <remove name="right"/>
    <remove name="left"/>

    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
    </reference>
    <reference name="content">
        <block type="customer/form_login" name="customer_form_login" template="customer/form/login.phtml"/>


     <block type="customer/form_register" name="customer_form_register" template="customer/form/register.phtml">
            <block type="page/html_wrapper" name="customer.form.register.fields.before" as="form_fields_before" translate="label">
                <label>Form Fields Before</label>
            </block>
        </block> </reference>
</customer_account_login>

Solution 3

In order to merge the customer registration form with the default login form of Magento, just note the following steps:
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.

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'); ?>

1. You're done. Now clear the cache and reload the customer login page: http://your-mage-store/customer/account/login

Solution 4

You should do it slightly different:

1. get to know the magento layout and how it works
2. use layout references to include both existing forms in to one template
3. let them submit to their existing controllers

View more solutions

Comments

[Nic]

Going to have to agree. Unfortunately, it isn't as easy as combining a couple of phtml files.

[Andrew Barber]

Thanks for posting your answer! Please be sure to read the FAQ on Self-Promotion carefully. Also note that it is required that you post a disclaimer every time you link to your own site/product.