Mini Login on Homepage
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'));
so cool
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
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
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.
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.
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
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.
This is driving me mad any help would be greatly appreciated
Thanks
Shaun
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
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
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..
Hello,
This is very easy to understand and implement.
Thanks a lot!!!
Aruna
how can i use my website login form in magento home page?
pLZ.
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!