login_boxEs gibt in Magento bereits ein Template mini.login.phtml. Wer diese einsetzen möchte wird sofort merken, dass man dieses auf jeden Fall anpassen muss. Genau das werden wir in diesem Tutorial tun. Initiator war ein Beitrag aus dem deutschen Magentoforum.

Dafür müssen wir kein eigenes Modul erstellen. Wir benötigen dafür ein Template, einige Grafiken, etwas CSS sowie eine Anpassung im Layout (XML).

Umsetzung

Als erstes erstelle ich das Template app/design/frontend/default/[ihr theme]/template/customer/form/mxperts.login.phtml

<div class="box base-mini mini-login">
  <div class="head">
    <h4><?php echo $this->__('Login') ?></h4>
  </div>

  <div class="content">
    <form id="mini_login_form" action="<?php echo $this->getPostActionUrl() ?>" method="post">
      <div>
         <div id="email-div" >
            <input id="logemail" type="text" class="input-text required-entry" name="login[username]" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>" title="<?php echo $this->__('Email Address') ?>" />
         </div>
         <div id="pass-div" >
            <input id="logpass" type="password" class="input-text required-entry validate-password" name="login[password]" value="<?php echo $this->helper('catalogSearch')->getEscapedQueryText() ?>" />
            <input type="image" src="<?php echo $this->getSkinUrl('images/btn_go.png') ?>" alt="<?php echo $this->__('Go') ?>"/><br />
         </div>

         <div id="links-div" >
           <a href="<?php echo $this->getUrl('customer/account/create/') ?>" title="<?php echo $this->__('Create New Customer Account'); ?>"><?php echo $this->__('Create New Customer Account'); ?></a><br />
           <a href="<?php echo $this->getUrl('customer/account/forgotpassword/') ?>" title="<?php echo $this->__('Password forgotten'); ?>"><?php echo $this->__('Password forgotten'); ?></a>
         </div>

           <script type="text/javascript">
            var searchForm = new Varien.searchForm('email-div', 'logemail', '<?php echo $this->helper('catalogSearch')->__('Email Address') ?>');
              new Varien.searchForm('pass-div', 'logpass', '<?php echo $this->helper('catalogSearch')->__('Password') ?>');
          </script>
       </div>
    </form>
  </div>
</div>

Damit die Ausghabe des Templates richtig formatiert wird fügen wir der Datei skin/frontend/default/[ihr theme]/css/boxes.css folgende CSS-Anweisungen hinzu.

/* Mini Login */
.mini-login .head h4 { background-image:url(../images/icon_lock.gif); }

#email-div {
	padding-left: 14px;
	margin-bottom: 4px;
	background-image: url(../images/login_username.png);
	background-repeat: no-repeat;
	background-position: 0 3px;
}

#pass-div {
	padding-left: 14px;
	margin-bottom: 4px;
	background-image: url(../images/login_password.png);
	background-repeat: no-repeat;
	background-position: 0 3px;
}

#links-div {
	padding-left: 14px;
	margin-bottom: 4px;
}

#mini_login_form #logpass {
	width: 98px;
}

Folgende Grafiken werden für das CSS benötigt. (Sie finden alle Dateien am Ende des Tutorials zum Download)
login_images
Die 3 Grafiken müssen in das Verzeichnis skin/frontend/default/[ihr theme]/images/ kopiert werden.

Zum Schluss muss noch die Datei app/design/frontend/default/[ihr theme]/layout/customer.xml angepasst werden. Suchen Sie dazu in der Datei den Bereich Load this update on every page when customer is logged out und fügen Sie vor </customer_logged_out> folgenden Inhalt ein:

        <reference name="right">
           <block type="customer/form_login" name="mini_login" template="customer/form/mxperts.login.phtml" before="-" />
        </reference>

Nun noch den Cache im Backend leeren und die Loginbox sollte, wie in unserem Demoshop, in der rechten Spalte an erster Stelle erscheinen.

Download: mxperts_login.zip

Leider haben wir nun den unschönen Effekt, dass alle Seiten im Titel den Text “Kundenlogin” beinhalten. Woher kommt das? Die Definition unseres Blocks zeigt uns welche Klasse verwendet wird.
block type=”customer/form_login” = app\code\core\Mage\Customer\Block\Form\Login.php. Wenn wir diese Datei öffnen, sehen wir, dass in der Funktion _prepareLayout() der Titel verändert wird.

...
    protected function _prepareLayout()
    {
        $this->getLayout()->getBlock('head')->setTitle(Mage::helper('customer')->__('Customer Login'));
...

Um dies zu korrigieren benötigen wir eine Erweiterung. Diese soll die Klasse Mage_Customer_Block_Form_Login überschreiben.
Dazu erstellen wir das Modul Mxperts_Customer.

1. app\etc\modules\Mxperts_Customer.xml

<?xml version="1.0"?>
<config>
  <modules>
    <Mxperts_Customer>
      <active>true</active>
      <codePool>local</codePool>
    </Mxperts_Customer>
  </modules>
</config>

2. app\code\local\Mxperts\Customer\etc\config.xml

<?xml version="1.0"?>
<config>

  <modules>
    <Mxperts_Customer>
      <version>0.1.0</version>
    </Mxperts_Customer>
  </modules>

  <global>

    <blocks>
      <customer>
        <rewrite>
          <form_minilogin>Mxperts_Customer_Block_Form_Minilogin</form_minilogin>
        </rewrite>
      </customer>
    </blocks>

  </global>

</config>

3. app\code\local\Mxperts\Customer\Block\Form\Minilogin.php

<?php
class Mxperts_Customer_Block_Form_Minilogin extends Mage_Customer_Block_Form_Login
{
    protected function _prepareLayout()
    {
      // nothing here ...
    }
}

4. Ändern der app/design/frontend/default/[ihr theme]/layout/customer.xml
Suchen Sie dazu in der Datei den Bereich Load this update on every page when customer is logged out und fügen Sie vor </customer_logged_out> folgenden Inhalt ein:

        <reference name="right">
           <block type="customer/form_minilogin" name="form_minilogin" template="customer/form/mxperts.login.phtml" before="-" />
        </reference>

Nun wieder den Cache löschen – der Titel ist wieder so wie er sein soll.

Download: mxperts_login2.zip

Viele Spaß damit
Johannes Teitge