Infobox in Randspalte erstellen

Oftmals ist ein notwendig eine oder mehrere Infoboxen in der Kontextspalte anzuzeigen. Dazu werden wir ein Template anlegen und ein bestehendes Layout um einen weiteren Block erweitern. In drei Schritten werden wir diese Arbeiten erledigen, als Beispiel bauen wir eine Box mit einem Hinweis auf die Videogalerie ein.

1. Schritt: Template erstellen
Dazu erstellen wir uns einen Ordner "app/design/frontend/default/default/template/infobox/" und erstellen in diesem die Template-Datei "videobox.phtml" mit z.B. folgendem Inhalt:

<div class="context video-box">
    <h4>Videogalerie</h4>
    <img src="<?php echo $this->getSkinUrl('images/infobox/infobox_video.jpg') ?>"
      alt="<?php echo __('Videogalerie') ?>" />
    <div class="copy">
        Sehen Sie unsere Geräte in Aktion!
    </div>
</div>

Das hier referenzierte Bild muss im Ordner "skin/frontend/default/default/images/infobox/infobox_video.jpg" vorhanden sein.

2. Schritt: Einfügen in das Layout
Da die neue Infobox in allen Seiten des Katalogs erscheinen soll, öffnen wir die "catalog.xml", die sich im Ordner "app/design/frontend/default/default/layout" befindet. Um die Infobox in der rechten Randspalte zu positionieren, fügen wir diesen Code:

<block
    type="core/template"
    name="right.infobox.video"
    alias="infobox_video"
    after=""
    before=""
    template="infobox/videobox.phtml"
/>

in Abschnitt:

<reference name="right">
    /* layout definition */
</reference>

ein.
Der Alias ist nicht zwingend notwendig, jedoch hilfreich, wenn man die Positionierung der Boxen beeinflussen möchte.

3. Schritt: Anpassen des CSS
Um das hier verwendete Template Ihren Bedürfnissen anzupassen, dient das folgende CSS nur als Rahmen für Ihr Layout. Das nachfolgende CSS kopieren Sie in die von Ihnen zu erstellende Datei 'skin/frontend/default/default/css/infoboxen.css'.

/*** Infobox Video ***/
.video-box {
    font-size: 0.8em;
    font-weight: normal;
    padding: 0 5px 0 5px;
}

Jetzt wird die Infobox angezeigt, sollte jedoch nichts zu sehen sein, liegt es am Cache. Im Backend über "System > Cache Verwaltung" wählen und leeren.