1. Home
  2. Prices
  3. Guided Tour
  4. New Shop
  5. Shop Review
  6. Ecommerce Marketing
  7. Ecommerce TV
  8. Magento Developers
  9. Portfolio
  10. Blog
  11. Contact
Home > Magento > Mini Login on Homepage

Mini Login on Homepage

Posted on: 1st Feb 2010 By: Adam Moss Leave a comment 5 Comments

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:

5 Responses to “Mini Login on Homepage”

  1. benamlunofu

    so cool

  2. Koen

    I think for keeping the core of Magento as-is you should copy:
    app/code/core/Mage/Customer/Block/Form/Login.php

    to:
    app/code/local/Mage/Customer/Block/Form/Login.php

    But nice info anyway ;)

  3. Rob

    Hi Koen,

    Yes it’s absolutely vital that you do it the way you suggested – especially as Magento does seem to upgrade every 3 months. Keeping all the core code definitely helps save headaches when upgrading your sites.

    Thanks for visiting!

    Rob

  4. Ann

    Hi,

    This is great and even for a newbie like me easy to understand and implement. Well done!!!

    I have two questions though:

    1. The login box shows up at the bottom of my right column and I would like it at the top

    2. Could you add a register button to this beside the login button?

    3. When logged in – it would be great, if the customer would see a logout button in the same location

    I hope that you will find these suggestions interesting, too and that you will implement them. :-)

    My Shop where you can see the problem with the right side location: http://www.annsworld.de/shop

    Many thanks,

    Ann.

  5. Ann

    Hi Rob,

    Me again. :-)

    It would also be great, if the customer after logging in was returned to the page he was on, rather than being bounced to an account page.

    Thanks,

    Ann.

Post A Comment