Ecommerce Web Design & Magento Blog

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'));