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 🙂
