Home > Magento > Mini Login on Homepage

Mini Login on Homepage

Posted on: 1st Feb 2010 By: Adam Moss 14 Comments

It may have gone reasonably unnoticed, but there’s a mini login form phtml file located in the vast folder structure of a Magento website, one which can be used on a website’s homepage to create a quick and simple login area for users. It is common to see such forms on the bigger e-commerce sites across the world wide web, so it’s a nice little addition. This guide assumes that you use 2-columns-right.phtml as your homepage. If not, you can still make it work by including the right sidebar in your 3 column layout.

This guide is based on Sibble’s Tutorial.

Firstly, open mini.login.phtml, located in app/design/frontend/default/yourtheme/template/customer/form/ and replace the existing code with the following:

<div>
    <div>
        <h4><?php echo $this->__('Login') ?></h4>
    </div>
    <form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
        <div>
            <ul>
                    <li>
                        <label for="email"><?php echo $this->__('Email Address') ?> <span>*</span></label><br />
                        <input name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" title="<?php echo $this->__('Email Address') ?>" id="email" type="text" style="width:122px;" />
                    </li>
                    <li>
                        <label for="pass"><?php echo $this->__('Password') ?> <span>*</span></label><br />
                        <input name="login[password]" type="password" id="pass" style="width:122px;" />
                    </li>
                </ul>
                <p><?php echo $this->__('* Required Fields') ?></p>
          </div>
    <div>
        <button type="submit" name="send" id="send2"><span><?php echo $this->__('Login') ?></span></button>
    </div>
</form>
<script type="text/javascript">
    var dataForm = new VarienForm('login-form', true);
</script>
</div>

Now you need to open customer.xml from your layouts folder. Inside the block known as <customer_logged_out>, just before the closing tag add the following reference:

<reference name="right">
            <block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
        </reference>

While you are logged out you will now see the mini login form appear assuming that you have called the right column correctly with:

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

One thing you’ll notice is that it has changed the page title to Customer Login, which is obviously not good. Easily sorted out though by opening app/code/core/Mage/Customer/Block/Form/Login.php. Simply comment out the line of code which determines the title. A couple of forward slashes will do the trick.

$this->getLayout()->getBlock('head')->setTitle(Mage::helper('customer')->__('Customer Login'));

14 Responses to “ Mini Login on Homepage ”

  1. benamlunofu
    #1 | 2nd March 2010

    so cool

  2. Koen
    #2 | 26th April 2010

    I think for keeping the core of Magento as-is you should copy:
    app/code/core/Mage/Customer/Block/Form/Login.php

    to:
    app/code/local/Mage/Customer/Block/Form/Login.php

    But nice info anyway ;)

  3. Rob
    #3 | 27th April 2010

    Hi Koen,

    Yes it’s absolutely vital that you do it the way you suggested – especially as Magento does seem to upgrade every 3 months. Keeping all the core code definitely helps save headaches when upgrading your sites.

    Thanks for visiting!

    Rob

  4. Ann
    #4 | 3rd June 2010

    Hi,

    This is great and even for a newbie like me easy to understand and implement. Well done!!!

    I have two questions though:

    1. The login box shows up at the bottom of my right column and I would like it at the top

    2. Could you add a register button to this beside the login button?

    3. When logged in – it would be great, if the customer would see a logout button in the same location

    I hope that you will find these suggestions interesting, too and that you will implement them. :-)

    My Shop where you can see the problem with the right side location: http://www.annsworld.de/shop

    Many thanks,

    Ann.

  5. Ann
    #5 | 3rd June 2010

    Hi Rob,

    Me again. :-)

    It would also be great, if the customer after logging in was returned to the page he was on, rather than being bounced to an account page.

    Thanks,

    Ann.

  6. shaun
    #6 | 11th November 2010

    I cannot seem to find app/design/frontend/default/yourtheme/template/customer/form/
    I get as far as template/ and then I have catalog, catalogsearch,checkout,newsletter,page,sample

    I do not have customer and form folders….am using the modern theme

  7. Adam Moss
    #7 | 11th November 2010

    Hi Shaun, when I wrote this it was for version 1.3.x.x

    These days, you’ll need to check your base/default folder for the files you require.

  8. shaun
    #8 | 11th November 2010

    This is driving me mad any help would be greatly appreciated

    Thanks
    Shaun

  9. JR
    #9 | 21st November 2010

    Hi Adam,

    This one isn’t working for me. Followed every step but I’m not sure where to place getChildHtml(‘right’) ?> as I think that will be the solution of the mini login not working.

    Could you tell me where you placed the last line of code?

    Thanks in advance,

    JR

  10. valentin
    #10 | 27th March 2011

    Hey! How do I call the email and password boxes individually?

    What I’m trying to do is just add the 2 boxes + a log in button inside the header :)

    Thank you in advance

  11. payal setiya
    #11 | 17th June 2011

    We can do same through our admin panel too. where simply we have to go to cms->pages->home page->design
    and simply paste

    there , and you can see the login form on your home page.

    But your tutorial really gave a depth to reach there:)

    Thanks a lot..

  12. Aruna
    #12 | 17th August 2011

    Hello,

    This is very easy to understand and implement.
    Thanks a lot!!!

    Aruna

  13. amit
    #13 | 19th September 2011

    how can i use my website login form in magento home page?
    pLZ.

  14. Rodney
    #14 | 12th October 2011

    This was very helpful. Thanks so much. I’m using Magento 1.6 and I was able to pull this off by doing what payal setiya suggested (although his code did not show up in his post). In CMS>Pages>Home>Design I pasted the following code in the Custom Layout Update XML box:

    <reference name="right">
                <block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" />
            </reference>
    

    Then all I had to do was copy the Login.php file to my local path, comment out the suggested head update, and I’ve got a login block on my home page.

    Thanks again!

Post A Comment

Your comments:
Enclose code snippets within the appropriate tags: [php][/php]   [js][/js]   [xml][/xml]   [css][/css]   [html][/html]
E.g: [php]<?php echo "hello world"; ?>[/php]

Search Blog

Archives

For the record...

Views & opinions in this blog are those of the individual and do not necessarily reflect those of E-commerce Web Design or the Creare Group.