Jan 16, 2009
Adding a mini login box to Magento
I’m surprised there is not one in the default template for Magento. Nevertheless, it’s pretty common to see a login box on a sidebar, and I need one. This is actually pretty simple to do, we’re going to be modifying templates, layouts, and unfortunatly we’re going to have to alter the core (for something really silly.)
First, lets go ahead and make a template for the mini login box. Take a look in ⁄template⁄customer⁄form⁄… What’s this!? We already see that there is a mini.login.phtml. For a closer look:
<form action="<?php echo $this->getPostActionUrl() ?>" method="post"> <table width="100%" class="mini-login"> <tr><td><?php echo $this->__('Email') ?>:</td><td><input name="login[username]" /></td></tr> <tr><td><?php echo $this->__('Password') ?>:</td><td><input name="login[password]" /></td></tr> <tr><td> </td><td><input type="submit" value="<?php echo $this->__('Login') ?>" /></td></tr> </table> </form>
We’ll, even though functional, this isn’t styled nor does it fit in with the default Magento template. So let’s change this.
<div class="box base-mini mini-login-form">
<div class="head">
<h4><?php echo $this->__('Login') ?></h4>
</div>
<form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
<div class="content">
<ul class="form-list">
<li>
<label for="email"><?php echo $this->__('Email Address') ?> <span class="required">*</span></label><br />
<input name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" title="<?php echo $this->__('Email Address') ?>" id="email" type="text" class="input-text required-entry" style="width:122px;" />
</li>
<li>
<label for="pass"><?php echo $this->__('Password') ?> <span class="required">*</span></label><br />
<input name="login[password]" type="password" class="input-text required-entry validate-password" id="pass" style="width:122px;" />
</li>
</ul>
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
</div>
<div class="actions">
<button class="form-button-alt" 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>Also add this to your CSS:
.mini-login-form h4 { background-image:url(../images/icon_page_white_text.gif); }
Now that we have a template (mini.login.phtml), we’re going to have to add it to our block structure. Open layout/customer.xml, and make this change starting at line 65.
<customer_logged_out> <reference name="top.links"> <action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>100</position></action> </reference> <remove name="wishlist_sidebar"></remove> <remove name="reorder"></remove> <reference name="right"> <block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" /> </reference> </customer_logged_out>
Remember to copy this file/folder structure and put it in app/code/local. We do this, because when you go to upgrade your Magento installation, your core files get patched, thus erasing all the hard work you did 
Thankyou for sharing this Jeff. I’ve just begun playing with Magento and noticed the majority of time spent working with Magento is on hunting around for things.
Thanks..it was a great help…
Thanks very much..
I was searching it from last 2-3 days. At last i got it here.
This is very help full…gr8
Thanks
[...] so users are only able to order after they have successfully logged in. I found a great post on Sibble.com, which details the steps to add the mini login, walking through the suggested procedure it worked [...]
Thanks for great walk-through, it workd perfectly for me on my ver 1.2.1 install.
Hey, Jeff.
Just wanted to say Thanks for this great tutorial. It really helped me in creating also a Search box, based on these steps.
Thanks a lot, I wish you all the best.
Marius
Hello Jeff,
First of all, thank you for sharing this with us. I did everything you wrote on magento 1.3 and nothing happened on my homepage. I am using 3 columns layout, can it be something related with it? Is it just working with specific layouts?
Thanks in advance
Hey Alp,
This was not written for v1.3, and I have a feeling that the changes to Magento are the reason why it’s not working.
I haven’t had a need to use Magento for a while. However, I may just do a fresh install and write a new blog post.
For now, I’m going to add 1.2 to this title so that it is not misleading.
Thanks for the comment!
Hey Alp,
In 1.3, the login box can be viewed on Customer Login page. All you have to do is go to Login Page, and replace ‘…./customer/account/login’ in the URL to ‘…./customer/account/login_mini’.
Your login box is displayed.
Thanks Sandy!
Hi sibble, thank you for helping me. Where can I find “templatecustomerform…” that you mentioned in the second paragraph of your tutorial? and also, is it possible to explain what Sandy Khan said with more details? because it sounds even simpler than your tutorial. Thank you.
I’ll look into what Sandy said, I haven’t had a need to change the login at all lately.
As for the “templatecustomerform…” it should be “…/template/customer/form/” Don’t quite know how that changed but I’m editing the post now to update it.
[...] This guide is based on Sibble’s Tutorial. [...]
Anyone tried this with 1.4, I see people are having problems with this and 1.3, so I suspect not.
Lee
Works fine in 1.4, just uncomment the lines in logged-out in customer.xml
Works great! But…I cannot get the login box to disappear after the login is complete. I commented out line 40 in mage/customer/block/form/login.php but that did not work. Thanks for any help!