1. Home
  2. Prices
  3. Guided Tour
  4. New Shop
  5. Shop Review
  6. Ecommerce Marketing
  7. Portfolio
  8. Blog
  9. Contact
Ecommerce Fox

Ecommerce Web Design & Magento Blog

Welcome to our blog, this where you'll find news, reviews and tutorials on all things ecommerce and Magento. If you like what you see, join in with the discussion and be sure to subscribe.

Home > Magento > Mini Login on Homepage

Mini Login on Homepage

Posted on: 1st Feb 2010 By: Adam Leave a comment 1 Comment

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'));
  • Twitter
  • AIM
  • WordPress
  • LinkedIn
  • Facebook
  • StumbleUpon
  • Technorati Favorites
  • Delicious
  • Ping
  • Digg
  • Bebo
  • Reddit
  • MySpace
  • NewsVine
  • Google Bookmarks
  • Sphinn
  • Propeller
Categories: Magento Tags:

One Response to “Mini Login on Homepage”

  1. benamlunofu

    so cool

Post A Comment