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.

Conclusion

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 Magento developers to improve your interface and offers better conversions.

Other blogs you may like

How to Manage the Backend Functionality of Your Magento Store?

Helper contains the necessary functions for you; you can call in a helper from anywhere. An example of helper is as below $helper = Mage::helper('monhelper'); The call can be related to $helper = Mage::helper('monhelper/data'); **Let's create a helper file** You will need to... By Deepa Ranganathan   On 17 Jul 2015  Viewed: 222

3 Ways to Track Shoppers Checking-in From Different Devices

Smart devices are just increasing and improving with time. The digital era has definitely introduced many devices that will offer convenience and ease out your problems. With multiple platforms available for logging into your favourite store, it becomes difficult for you as a store owner or a... By Deepa Ranganathan   On 18 Jun 2015  Viewed: 256