mini-login | sibble.com

Jan 16 2009

Adding a mini login box to Magento

I’m surprised there is not one in the default template for Magento. Nevertheless, it’s pretty common to see a login box on a sidebar, and I need one. This is actually pretty simple to do, we’re going to be modifying templates, layouts, and unfortunatly we’re going to have to alter the core (for something really silly.)

First, lets go ahead and make a template for the mini login box. Take a look in ⁄template⁄customer⁄form⁄… What’s this!? We already see that there is a mini.login.phtml. For a closer look:

<form action="<?php echo $this->getPostActionUrl() ?>" method="post">
    <table width="100%" class="mini-login">
        <tr><td><?php echo $this->__('Email') ?>:</td><td><input name="login[username]" /></td></tr>
        <tr><td><?php echo $this->__('Password') ?>:</td><td><input name="login[password]" /></td></tr>
        <tr><td>&nbsp;</td><td><input type="submit" value="<?php echo $this->__('Login') ?>" /></td></tr>
    </table>
</form>

We’ll, even though functional, this isn’t styled nor does it fit in with the default Magento template. So let’s change this.

<div class="box base-mini mini-login-form">
    <div class="head">
        <h4><?php echo $this->__('Login') ?></h4>
    </div>
    <form action="<?php echo $this->getPostActionUrl() ?>" method="post" id="login-form">
        <div class="content">
            <ul class="form-list">
                    <li>
                        <label for="email"><?php echo $this->__('Email Address') ?> <span class="required">*</span></label><br />
                        <input name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" title="<?php echo $this->__('Email Address') ?>" id="email" type="text" class="input-text required-entry" style="width:122px;" />
                    </li>
                    <li>
                        <label for="pass"><?php echo $this->__('Password') ?> <span class="required">*</span></label><br />
                        <input name="login[password]" type="password" class="input-text required-entry validate-password" id="pass" style="width:122px;" />
                    </li>
                </ul>
                <p class="required"><?php echo $this->__('* Required Fields') ?></p>
          </div>
    <div class="actions">
        <button class="form-button-alt" 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>

Also add this to your CSS:

.mini-login-form h4 { background-image:url(../images/icon_page_white_text.gif); }

Now that we have a template (mini.login.phtml), we’re going to have to add it to our block structure. Open layout/customer.xml, and make this change starting at line 65.

<customer_logged_out>
        <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>
        </reference>
        <remove name="wishlist_sidebar"></remove>
        <remove name="reorder"></remove>
        <reference name="right"> 
            <block type="customer/form_login" name="mini_login" template="customer/form/mini.login.phtml" /> 
        </reference> 
    </customer_logged_out>

Remember to copy this file/folder structure and put it in app/code/local. We do this, because when you go to upgrade your Magento installation, your core files get patched, thus erasing all the hard work you did