How to Programmatically Create a Dropdown Login for your Magento Store?

If you want to improve the interface of your Magento store, then you must include the dropdown login form. This would help create an interactive base for your consumers, and offer convenience too! Let’s see how you can include the form programmatically.

Go to app/design/frontend/base/default/layout/customer.xml and add the code below

<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>

Go to app/design/frontend/base/default/template/page/template/links.phtml. Now, add the code given 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; ?>

Go to app/design/frontend/base/default/template/customer/form/mini.login.phtml and finally add the following code

<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>

With this code added, your login form would appear whenever your mouse hovers on the login link. To create the dropdown form, you will need to use mini.login.phtml and work on the core/template block.

A slight difference to the UI would help you engage the customers better. With the dropdown login form added, you can easily help your customers register and engage with you better. The interface improves drastically. Hire dedicated Magento eCommerce developers to improve your interface and offers better conversions.

About deeparanganathan