Create Magento Dropdown Login in a few minutes
Dropdown login forms are not a feature many online stores use, but in some cases they could be quite useful UX feature. In this tutorial, I will explain how to create such a dropdown in a few minutes!
Let’s open app/design/frontend/base/default/layout/customer.xml and just add the line that’s highlighted.
<customer_logged_out>
<!---<reference name="right">
<block type="customer/form_login" name="customer_form_mini_login" before="-" template="customer/form/mini.login.phtml"/>
</reference>-->
<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>
<block type="core/template" name="customer_form_mini_login" before="-" template="customer/form/mini.login.phtml"/>
</reference>
<remove name="reorder"></remove>
</customer_logged_out>Now open app/design/frontend/base/default/template/page/template/links.phtml and add the highlighted lines below:
<?php $_links = $this->getLinks(); ?>
<?php if(count($_links)>0): ?>
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
<?php foreach($_links as $_link): ?>
<?php if ($_link instanceof Mage_Core_Block_Abstract):?>
<?php echo $_link->toHtml() ?>
<?php else: ?>
<li<?php if($_link->getIsFirst()||$_link->getIsLast()): ?> class="<?php if($_link->getIsFirst()): ?>first<?php endif; ?><?php if($_link->getIsLast()): ?> last<?php endif; ?>"<?php endif; ?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?>
<?php if($_link->getIsLast()): ?>
<?php echo $this->getChildHtml('customer_form_mini_login'); ?>
<?php endif; ?>
</li>
<?php endif;?>
<?php endforeach; ?>
</ul>
<?php endif; ?>And, lastly, open app/design/frontend/base/default/template/customer/form/mini.login.phtml as well and place the code below instead.
<style>
#dropdown
{
position: absolute;
top: 70px;
right: 20px;
visibility: hidden;
float:right;
}
.last:hover #dropdown
{
visibility: visible;
}
</style>
<div class="block block-login" id="dropdown">
<div class="block-title">
<strong><span><?php echo $this->__('Login') ?></span></strong>
</div>
<form action="<?php echo $this->getUrl('customer/account/loginPost') ?>" method="post">
<?php echo $this->getBlockHtml('formkey'); ?>
<div class="block-content">
<label for="mini-login"><?php echo $this->__('Email:') ?></label><input type="text" name="login[username]" id="mini-login" class="input-text" />
<label for="mini-password"><?php echo $this->__('Password:') ?></label><input type="password" name="login[password]" id="mini-password" class="input-text" />
<div class="actions">
<button type="submit" class="button"><span><span><?php echo $this->__('Login') ?></span></span></button>
</div>
</div>
</form>
</div>And that’s it! Your login form should appear when hovering over ‘Log In‘ link in the top menu:
The important thing to note here is that we’re using Magento’s default mini.login.phtml with slight modifications for it to work on homepage.
We’re also using core/template block instead of customer/form_login. The reason for this is that the latter sets the page title to ‘Customer login‘ on all pages it’s being displayed on.
As a downside to using different block, we now can’t use methods of the customer/form_login block. That is why we’re using $this->getUrl(‘customer/account/loginPost’) as a form action instead of $this->getPostActionUrl().
It’s also important that you have a form key present, otherwise your form won’t get processed.
<?php echo $this->getBlockHtml('formkey'); ?>And all that’s left is to have your frontend developer (you?) make the dropdown pretty 🙂
17 comments
Is there any similar solutions for magento 2 ?
Hi, It did not work well when i followed your instructions what you told. Please kindly help me out.
This method always redirects user to the account page even if it’s turned off inside the Magento configuration. Is there any form action method that I can use other than customer/account/loginPost? Because when I’m using it, I’m getting redirected to the customer/account page. 🙁
Hi
i have to implement same functionality in my web site, i am using enterprise edition,
u explained with base theme, which files do i need to change if i use enterprise edition
i really appreciate your help
thanks
subject :—- Including top links(login/logout sign up under Account as dropdown select values)
I want to add login signup and login/out options inside account i.e account as dropdown menu where login , sign up and login/logout should be inside Account dropdown. Can please somebody guide me how to do this.. I tried but is default . .. Please help.. such that it should not effect the functionality . . . ..
regards
Pradeep
So, I have the Full-Width Responsive Grayscale theme installed, and I went trhough the step with no success. Can you help me out regarding what files would be altered instead? I figure there might be some alteration to local.xml, ou a custom links phtml file…
Now , it works. good 🙂
Hi, Finch.
One way would be to compare the title of your links before they get printed to html with the title of your ‘Log in’ link, e.g.
Place the condition inside the ‘else’ (lines 8-13), depending on the construction of your links.
I also tried this yesterday but it didn’t work. Good thing the post is updated. Now it works. Thanks Petar Sambolek! 🙂
Btw, what if my login form is not in the last li? And not in the first li? How can I make the dropdown drop?
Sorry, everyone. I seem to have forgotten one more step that needs to be done in order for login box to show.
The article has been updated, just edit the links.phtml template as shown above.
I followed all steps which u mentioned but it did not work. 🙁
Please don’t do this on your website unless your site is completely on SSL/HTTPS. Having a login form displayed on an http page is still vulnerable to a type of man in the middle attack even if the login form points to a secure/https URL. Granted the vulnerability is much less severe than submitting to an unencrypted endpoint.Jason Coco’s answer on this SO post is probably the best explanation http://stackoverflow.com/questions/274274/is-it-secure-to-submit-from-a-http-form-to-https
Very useful article. Even though this feature looks simple but can be useful in many ways. We have recently placed this feature in our client website and he is really impressed. Petar, i’ll give full credit to you because this post has really helped me a lot. Thanks 🙂
I really liked this Petar. It looks simple but a valuable feature. We recently had this requirement for a B2B Magento website and a drop down login is a valuable UX feature.
I never thought this can be done using CSS only. I thought I needed javascript.
This saved me $25.00. I’m about to buy the magento quick login/dropdown login extension by plazathemes at magento connect. Good thing I read this post before clicking the buy now button. Haha! You just posted this last April 16, 2014! Lucky me, a recent post, for my needs. 😀
Hi, Marius.
Thank you for your insight.
I agree that the block type of core/template can be limiting sometimes – you should always try to adopt your template to an existing block the template is based on, or create a brand new block.
There are a few ways of doing this differently, but since there is only one situation in which this block type presents a problem, it doesn’t present a major issue 🙂
Nice and simple, but to nitpick, I must say you shouldn’t use `core/template`. I understand the reason you use it, but in case I decide to temporarily disable the output of the `Mage_Customer` module, the login form will still be there. But this is not a big issue. Like I said..I was just nitpicking. This can be fixed by adding in the template an if statement: if (Mage::helper(‘core’)->isModuleOutputEnabled(‘Mage_customer’)) {…}