Client requested to have a user login (user name and password textboxes) on the side bar for the customers to more easily login to their account and place an order. This is a b-2-b web site, so users are only able to order after they have successfully logged in. I found a great post on Sibble.com, which details the steps to add the mini login, walking through the suggested procedure it worked for my ver 1.2.1 install using the BLUE theme.
Below is my walkthrough steps:
1) Modify the boxes.css inside: /skin/frontend/default/blue/css/, near line494 add the following line:
.mini-login-form h4 { background-image:url(../images/icon_page_white_text.gif); }
what this does is add a small logo at the top of the mini login form, so that it stays consistent with all the other boxes in the sidebar.
2) Modify the existing mini.login.phtml file to add extra formatting as the default only shows a plain textbox without any formatting. Go to app\design\frontend\default\blue\template\customer\form and open up mini.login.phtml, and change:
<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> </td><td><input type=”submit” value=”<?php echo $this->__(’Login’) ?>” /></td></tr>
</table>
</form>
to:
<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>
3) Add mini.login.phtml to the sidbar. Go into: app\design\frontend\default\blue\layout and open up customer.xml. Go to line 76, which should take you to the <customer_logged_out> block, then add:
<remove name=”reorder”></remove>
<reference name=”right”>
<block type=”customer/form_login” name=”mini_login” template=”customer/form/mini.login.phtml” />
underneath <remove name=”reorder”></remove>
From here you should see a mini login in your right sidebar when you are not logged in. This mini sidebar would disappear after you have successfully logged in.
One catch to this is that for some reason now all the page title shows: Customer Login, so this required editing the core file. Open up: app/code/core/Mage/Customer/Block/Form/Login.php and comment out the line that says:
$this->getLayout()->getBlock(’head’)->setTitle(Mage::helper(’customer’)->__(’Customer Login’));
Now it should be functional.
blog posting
magento, Mini Login, Sidebar
