Eigener Block(Box) für Service oder Hotline in Magento erstellen

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.

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

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

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.

13 Kommentare to “Eigener Block(Box) für Service oder Hotline in Magento erstellen”

1. ds_1984 sagt:

   16. April 2009 um 20:18

   Schönes Tutorial, was mir am besten gefällt ist die Tatsache das in diesem übersichtlichen Abschnitt gezeigt wird wie man mit wenig sehr viel bewirken kann & trotzdem in Berührung mit den .phtml, .css & .xml Dateien kommt.

   Ich werde für meine Zwecke kürzlich auf Grundlage dieses Beitrages eine Seitenübergreifende Versandkosteninfo in meinen aktuellen Projekten realisieren.

   Danke fürs Tutorial!

   Eine Frage noch dazu:
   Ist es beabsichtigt .php Dateien anstelle von .phtml zu erstellen oder ist das egal?

   LG - Daniel

   Zum Antworten anmelden
2. Johannes Teitge sagt:

   17. April 2009 um 15:11

   Du hast recht, .php ist ein Schreibfehler - soll natürlich .phtml sein. Ich habe das nun korrigiert. Wenn man eine .php erstellt und in der XML-Definition .phtml definiert, muss das zu einem Fehler führen

   Danke für den Hinweis
   Johannes Teitge

   Zum Antworten anmelden
3. massi sagt:

   22. April 2009 um 09:25

   Gutes Tutorial, aber kleiner Fehler, große Wirkung:
   In der eingefügten Zeile in catalog.xml fehlt der abschließende Slash, sonst kommt es in Magento zu einer Fehlermeldung.

   Viele Grüße

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     22. April 2009 um 09:30

     Danke für den Hinweis - habe ich korrigiert.

     Zum Antworten anmelden
4. Susem sagt:

   3. Mai 2009 um 14:48

   Super-Tutorial!
   Eine Frage noch dazu: Wie kann ich das Login in die rechte Spalte übertragen?
   Da ich leider nicht über wenig PHP-Kenntnisse verfüge, wäre ich dankbar für eine Antwort - Merci

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     3. Mai 2009 um 18:46

     Danke für den Kommentar, bitte nutze für Deine Frage das deutsche Forum von Magento. Dort beteiligen sich alle Community-Mitglieder und es erreicht wesntlich mehr Leute. Wegen der mangelnden PHP-Kenntnisse empfehle ich das Video PHP 5.1 Professionelles Scripting für dynamische Webinhalte. Wir nutzen das in unserer Agentur bei der Ausbildung unserer “Mediengestalter Onlinemedien”. Man erhält innerhalb 10 Stunden ein breites PHP-Fachwissen.

     Viele Grüße
     Johannes Teitge

     Zum Antworten anmelden
5. toox sagt:

   13. Mai 2009 um 10:20

   hier passiert ja ordentlich was auf euer Seite.
   habe am Anfang auch mit callOut gearbeitet, bis es mich genervt hat. Ich habe das ganze einfach als eigene Box integriert mit genauso viel Aufwand. Der Vorteil ist das mann alles im Backend via cms-Seite immer up2date halten kann und somit noch nen bisl was für die googleBots hat.

   Zum Antworten anmelden
   • Johannes Teitge sagt:

     13. Mai 2009 um 10:27

     Wenn Du willst kannst Du Deine Variante als Alternative hier präsenstieren - ist sicherlich für alle von Interesse. Entweder als Co-Autor oder sende mit eine eine Mail (teitge@tmedia.de).

     Viele Grüße
     Johannes Teitge

     Zum Antworten anmelden
6. Johannes H. sagt:

   15. Juni 2009 um 11:08

   Hallo,

   super Tutorial sei erstmal gesagt. Jetzt hab ich noch eine Frage. Wie kann ich die Positionen meiner Box verändern?
   z.b. das sie ganz oben steht vor dem Warenkorb?

   Danke jetzt schon für euere Hilfe.

   Zum Antworten anmelden
7. toox sagt:

   15. Juni 2009 um 17:26

   hi Johannes,.,.die Positionen gehen mit 2 Befehlen

   im Block entweder davor: before=”BLOCKNAME” oder:”-”
   oder danach: after=”BLOCKNAME”
   schau mal oben im Code. da steht scho was

   Zum Antworten anmelden
8. Johannes H. sagt:

   22. Juni 2009 um 13:45

   Super Sache, gleich kapiert und funktioniert .

   Danke!

   Zum Antworten anmelden
9. FrankW sagt:

   24. Juni 2009 um 21:38

   Tolle Anleitung, alles prima funktioniert. Danke!

   Zum Antworten anmelden
10. nikl sagt:

    10. August 2009 um 10:41

    Statt in der phtml template direkt den Code einzugeben, habe ich darin auf einen Static Block verlinkt. Hier kann ich dann meinen Code ganz bequem vom Backend eingeben und aktualisieren. Wen es interessiert, ich werd mal versuchen den Code zu posten: getLayout()->createBlock(’cms/block’)->setBlockId(’STATICBLOCK-NAME’)->toHtml() ?>

    Für alle, die ohne Backend arbeiten, aber eher unnütz.

    Zum Antworten anmelden