Sie brauchen eine Servicebox mit Hotline oder Kontakmöglichkeit für Ihren Magentoshop? Das möchte ich Ihnen nun zeigen, indem wir dies als Callout integrieren.
Wir benötigen als erstes Bildmaterial mit der Abbildung eines Beraters oder einer Beraterin, das Icon eines Telefons sowie ein Icon für die Block-Headline.
Professionelles Bildmaterial finden Sie bei istockohoto.

Ich hatte mich für folgende Bilder entschieden:
- Berater
- Iconset mit Serviceicon
- Iconset mit Telefon

Umsetzung

1. Bilddaten erstellen
1.1: Datei phone.png (15px x 24px) erstellen und in Verzeichnis skin/frontend/default/default/images/media kopieren.
phone

1.2: Datei icon_service.png (16px x 26px) erstellen und in Verzeichnis skin/frontend/default/default/images kopieren.
icon_service

1.3: Datei service_callout.png (193px x 100px) erstellen und in Verzeichnis skin/frontend/default/default/images/media kopieren.service_callout

Wenn Sie dieses Bildmateriel verwenden möchten, müssen Sie das bei istockphoto erwerben!

2. Stylesheet anpassen
Kopieren Sie folgende Zeilen in die Datei skin/frontend/default/default/css/boxes.css

/*** Service Callout ***/
.mini-service .head h4 { background-image:url(../images/icon_service.png); }
.phone {
   font-size: 1.4em;
	font-weight: bold;
	background-image: url(../images/media/phone.png);
	background-repeat: no-repeat;
	padding: 0 0 5px 20px;
}

3. Template erstellen
Erstellen Sie die Datei right_service.phtml mit folgendem Inhalt.

<div class="box base-mini mini-service">
  <div class="head">
    <h4>Service</h4>
  </div>
    <img src="<?php echo $this->getSkinUrl('images/media/service_callout.jpg') ?>" alt="<?php echo __('Servicehotline') ?>" style="display:block;" />
    <div class="content">
      <p>Haben Sie Fragen? Sie erreichen unser Fachpersonal täglich von <strong>9:00 - 17:00 Uhr</strong>.</p>
      <div class="phone">07731 822819-0</div>
    </div>
</div>

Bei Mehrsprachigen Shops müssen Sie das entsprechend anpassen (echo __(xxx)).

Kopieren Sie die Datei in das Verzeichnis app/design/frontend/default/default/template/callouts.

4. catalog.xml anpassen
Öffnen Sie die Datei app/design/frontend/default/default/layout/catalog.xml und suchen Sie nach:

        <reference name="right">
            <block type="core/template" before="cart_sidebar" name="catalog.compare.sidebar" template="catalog/product/compare/sidebar.phtml"/>
            <block type="core/template" name="right.permanent.callout" template="callouts/right_col.phtml"/>

fügen Sie folgende Zeile ein:

            <block type="core/template" name="right.permanent.service" template="callouts/right_service.phtml" />

Nun müssen Sie im Backend den Cache aktualisieren und Ihre Service Box ist fertig. Es sollte wie in unserem Demoshop http://shop.mxperts.de/ aussehen.