Genauso, wie man eigentlich immer die Top-Navigation bearbeiten muss, muss man für seinen Webshop auch Links in der Footer-Navigation hinzufügen, verändern und entfernen. Ich meine damit Links, die in der Fuß-Leiste am Ende der Seite auftauchen. Genau darum wollen wir uns heute in einem Shop mit Magento 1.4.2.0 (Community Edition) kümmern. Ich will Ihnen aber nicht nur die Lösung aufzeigen, sondern auch, wie man dorthin kommt, damit Sie sich bei ähnlichen Problemen selbst helfen können.

Die Ausgangslage

Ich habe die Erweiterung mit der deutschen Übersetzung aktiviert, damit Sie die Links mit den von Ihnen gewohnten Bezeichnungen sehen. Wir haben hier “About Us”, “Customer Service”, “Site Map”, “Suchbegriffe”, “Erweiterte Suche” und “Kontaktieren Sie uns”.

Wenn wir die Pfadhinweise aktivieren, sehen wir, dass der Footer in der Datei page/html/footer.phtml des Templates abgelegt ist. Der Code in dieser Datei ist:

<div class="footer-container">
    <div class="footer">
    <?php echo $this->getChildHtml() ?>
    <p><?php echo $this->__('Help Us to Keep Magento Healthy') ?> - <a href="http://www.magentocommerce.com/bug-tracking" onclick="this.target='_blank'"><strong><?php echo $this->__('Report All Bugs') ?></strong></a> <?php echo $this->__('(ver. %s)', Mage::getVersion()) ?></p>
    <address><?php echo $this->getCopyright() ?></address>
    </div>
</div>

Damit sind für die Anpassung des Footers ein paar Dinge klar:

  1. Für die Links müssen wir uns wieder auf die Suche machen, da sie nicht hier direkt eingebunden werden.
  2. Die Meldung “Helfen Sie uns” können wir entfernen, indem wir die footer.phtml in unser eigenes Template-Verzeichnis kopieren und dort die Zeile entfernen.
  3. Wenn wir den Copyright-Hinweis komplett beseitigen wollen, können wir die Zeile ebenfalls in unserer kopierten Datei löschen. Wollen wir nur den Text ändern, dann können wir das im Backend unter “System” > “Konfiguration” > “Allgemein” > “Gestaltung” > “Fußzeile” > “Copyright” tun.Ein kleiner Tipp, wie man so etwas herausfindet:
    • Man öffnet die Datei mit der Klasse Mage_Page_Block_Html_Footer (diese Block-Klasse wird laut den Debug-Informationen verwendet) und
    • sucht nach der Methode getCopyright()(die in der .phtml-Datei verwendet wird).
    • Dort wird der Text mit Mage::getStoreConfig(‘design/footer/copyright’); geladen, was wiederum auf einen Backend-Eintrag in “System” > “Konfiguration” hindeutet.
    • Garantiert ist das zwar nicht, aber man kann davon ausgehen.
    • Zuletzt muss man sich auf der Konfigurationsseite ansehen, wo dieser Punkt nun stecken könnte. Oder man hat so viel Zeit damit verbracht, dass man einen sechsten Sinn dafür entwickelt. ;)

So, was wollten wir eigentlich? Genau, Footer-Links suchen. Der Aufruf echo $this->getChildHtml() weist daraufhin, dass der HTML-Code von untergeordneten Blöcken ausgegeben werden soll. Die Block-Hierarchie wird über Layout-XML-Dateien definiert. Daher sehen wir dort nach.

Das Layout-XML

Die XML-Dateien liegen im Verzeichnis “layout” des jeweiligen Themes. Der Footer ist ein elementarer Bestandteil des Seitengerüsts und lässt sich nicht alleinig einem Bereich wie dem Produktkatalog, Kunden, Bezahlvorgang o.ä. zuordnen. In einem solchen Fall findet man die Block-Definition dann oft in der Datei page.xml. Siehe da, wir finden dort eine Definition für den Footer unterhalb des Handles <default>:

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">
    <block type="page/html_wrapper" name="bottom.container" as="bottomContainer" translate="label">
        <label>Page Footer</label>
        <action method="setElementClass"><value>bottom-container</value></action>
    </block>
    <block type="page/switch" name="store_switcher" as="store_switcher" template="page/switch/stores.phtml"/>
    <block type="page/template_links" name="footer_links" as="footer_links" template="page/template/links.phtml"/>
</block>

Der Footer hat in der Block-Hierarchie den Namen “footer” (einleuchtend) und drei untergeordnete Blöcke, die mit $this->getChildHtml() eingebunden werden:

  • bottomContainer
  • store_switcher
  • footer_links

Die ersten beiden können können wir heute außen vor lassen, doch “footer_links” klingt vielversprechend.

Wenn wir uns den Screenshot und den Code ansehen, fällt uns auf: die unteren Links werden in einer links.phtml eingebunden, dieselbe Datei wird für “footer_links” definiert. Da haben wir einen Anhaltspunkt, an dem wir gleich ansetzen können. Doch was ist mit den oberen beiden Links “About Us” und “Customer Service“?
Es müssen noch mehr Blöcke unterhalb von “footer” eingebunden werden. Wir suchen also im Verzeichnis mit den XML-Dateien (app/design/frontend/base/default/layout) nach Referenzen auf “footer” und sehen, was wir finden.

<default>
    <reference name="footer">
        <block type="cms/block" name="cms_footer_links" before="footer_links">
            <!--
            The content of this block is taken from the database by its block_id.
            You can manage it in admin CMS -> Static Blocks
            -->
            <action method="setBlockId"><block_id>footer_links</block_id></action>
        </block>
    </reference>
</default>

Na bitte, in der Datei cms.xml haben wir einen Treffer. Es wird ein statischer CMS-Block mit der Block-Id “footer_links” eingebunden. Gehen wir in das Backend und überprüfen wir, ob es den Block gibt.


Gewonnen! Hier ist der CMS-Block mit den Seitenbezeichner bzw. Identifier “footer_links”. Mit einem Klick auf die Zeile können wir den Eintrag bearbeiten und die Links verändern oder den Block komplett deaktivieren.

Ich habe den Block deaktiviert, da ich nicht zwei Zeilen im Footer haben möchte. Nach dem Neuladen der Seite sieht der Footer so aus:

Teil 1 ist geschafft.

Für die anderen Links (“Site Map”, “Suchbegriffe” usw.) sehen wir uns noch einmal die Pfadhinweise an und öffnen die dort angegebene Datei page/template/links.phtml. Wenn wir schon die Top-Links bearbeitet haben, kommt uns das sehr bekannt vor: dort herrscht nämlich dasselbe Prinzip. Wie wir dort nachlesen können, finden wir den Ursprung der Links, indem wir im Verzeichnis mit den XML-Dateien nach dem Block-Namen für diesen Block suchen. Laut der obigen XML-Datei hat der Block mit der links.phtml den Namen “footer_links“. Daher halten wir Ausschau nach XML-Code mit dem Bestandteil <reference name=”footer_links”>. Wir finden Treffer in vier Dateien. Wie im Artikel mit den Header-Links habe ich auch hier eine Tabelle gebastelt:

LinkXML-Datei und HandleCode
Site Map (Site Map)catalog.xml (default)<action method="addLink" translate="label title" module="catalog" ifconfig="catalog/seo/site_map">
  <label>Site Map</label>
  <url helper="catalog/map/getCategoryUrl" />
  <title>Site Map</title>
</action>
Suchbegriffe (Search Terms)catalogsearch.xml (default)<action method="addLink" translate="label title" module="catalogsearch" ifconfig="catalog/seo/search_terms">
  <label>Search Terms</label>
  <url helper="catalogsearch/getSearchTermUrl" />
  <title>Search Terms</title>
</action>
Erweiterte Suche (Advanced Search)catalogsearch.xml (default)<action method="addLink" translate="label title" module="catalogsearch">
  <label>Advanced Search</label>
  <url helper="catalogsearch/getAdvancedSearchUrl" />
  <title>Advanced Search</title>
</action>
Kontaktieren Sie uns (Contact Us)contacts.xml (default)<action method="addLink" translate="label title" module="contacts" ifconfig="contacts/contacts/enabled">
  <label>Contact Us</label>
  <url>contacts</url>
  <title>Contact Us</title>
  <prepare>true</prepare>
</action>
RSS (RSS)rss.xml (default)<action method="addLink" translate="label title" module="rss" ifconfig="rss/config/active">
  <label>RSS</label>
  <url>rss</url>
  <title>RSS</title>
  <prepare>true</prepare>
  <urlParams/>
  <position/>
  <li/>
  <a>class="link-rss"</a>
</action>

Der RSS-Link wird nur angezeigt, wenn man im Backend unter “System” > “Konfiguration” > “Katalog” > “RSS-Feeds” > “RSS Konfiguration” den Eintrag “RSS einschalten” auf “Aktivieren” setzt. Somit steht jetzt nichts mehr im Weg, die Links zu bearbeiten.

Nachdem ich mir bereits bei den Header-Links einen Wolf geschrieben habe, verweise ich hier einfach auf den Artikel. ;) Doch halt! Eine Änderung gibt es: wir können uns nämlich ersparen, eine eigene Layout-XML-Datei einzubinden. Magento bietet uns von Haus aus die Möglichkeit, eine Datei “local.xml” im XML-Ordner unseres Themes unterzubringen. Sie wird nach allen anderen XML-Dateien ausgeführt, womit wir sicher auf die vorher definierten Elemente zugreifen können.
Wir gehen daher so vor:

Eigenes Theme verwenden

Wir teilen Magento wie im anderen Posting mit, dass wir ein eigenes Theme verwenden. Dazu tragen wir im Backend unter “System” > “Konfiguration” > “Allgemein” > “Gestaltung” > “Layout” den Verzeichnisnamen für unser Theme ein:

Dann erstellen wir uns das entsprechende Theme-Verzeichnis mit dem Ordner für die XML-Dateien (app/design/frontend/default/emzee/layout) und legen darin die Datei local.xml an.

Das ist das Grundgerüst:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
    </default>
</layout>

Nun können wir die bestehenden Links verschwinden lassen, indem wir auf dieselbe Weise wie bei der Top-Navigation vorgehen und die Links mittels der URL-Helper wieder löschen:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="footer_links">
            <action method="removeLinkByUrl"><url helper="catalog/map/getCategoryUrl" /></action>
            <action method="removeLinkByUrl"><url helper="catalogsearch/getSearchTermUrl" /></action>
            <action method="removeLinkByUrl"><url helper="catalogsearch/getAdvancedSearchUrl" /></action>
            <action method="removeLinkByUrl" ifconfig="contacts/contacts/enabled"><url>http://www.shop.url/contacts/</url></action>
            <action method="removeLinkByUrl" ifconfig="rss/config/active"><url>http://www.shop.url/rss/</url></action>
        </reference>
    </default>
</layout>

Die Links “Kontaktieren Sie uns” und “RSS” machen hier leider Probleme. Da gibt es meines Wissens keine passenden Helper. Wie Sie sehen, muss man der Methode removeLinkByUrl() dieselbe URL übergeben, die intern abgespeichert wird – und das ist eine absolute URL. Ich habe das nur zur Erklärung direkt ins XML geschrieben – bei der tatsächlichen Programmierung sollte man das vermeiden.
Bessere Lösungsansätze:

  1. Konfiguration ändern: wenn die Funktionen gar nicht verwendet werden, dann deaktiviert sie in der Konfiguration. Sie werden dann automatisch ausgeblendet (wird durch “ifconfig” bewirkt).
  2. Eigenen Helper schreiben: wenn nur die Links im Header ausgeblendet werden sollen, dann schreibt einen Helper, welcher die URLs generiert. Der Helper kann dann aufgerufen werden, so wie es bei den anderen Links der Fall ist.
  3. Layout-Datei überschreiben: Sie können die Dateien contacts.xml bzw. rss.xml in Ihr Theme kopieren und dort die Code-Teile auskommentieren, welche die Links hinzufügen. Methode 2 ist aber sauberer.

Jetzt fügen wir noch einen eigenen Link hinzu. Es können die gleichen Parameter wie in der Top-Navigation verwendet werden:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="footer_links">
            <action method="addLink" translate="label title">
                <label>matthias-zeis.com</label>
                <url>http://www.matthias-zeis.com/ </url>
                <title>Matthias Zeis von LimeSoda</title>
                <prepare />
                <urlParams />
                <position>100</position>
                <liParams>id="matthias-zeis-link"</liParams>
                <aParams>
                    <class>a-css-klasse-1 a-css-klasse-2</class>
                    <id>a-id-klasse</id>
                    <target>_blank</target>
                </aParams>
                <beforeText>Besuche </beforeText>
                <afterText> (externer Link)</afterText>
            </action>
        </reference>
    </default>
</layout>

Wenn man den Code für das Entfernen und Hinzufügen kombiniert, sieht das so aus:

Mit den entsprechenden CSS-Anweisungen sieht das Ganze dann auch ansprechend aus.

Wenn man einen bestehenden Link ändern will, entfernt man ihn zuerst und fügt ihn mit eigenen Werten wieder hinzu.

Kurzzusammenfassung

Hier noch einmal im Überblick für die Änderungen im Footer:

  • “About Us” und “Customer Service”: steht im statischen Content-Block “footer_links” und kann im Backend unter “CMS” > “Statische Blöcke” gewartet werden. Entweder verändert man den Inhalt oder deaktiviert den Block.
  • Andere Links entfernen/hinzufügen:
    • Der Block, dem die Links hinzugefügt werden, hat im XML den Namen “footer_links”.
    • Die Links werden von Magento in den Dateien catalog.xml, catalogsearch.xml, contacts.xml und rss.xml hinzugefügt.
    • Änderungen können im eigenen Theme in der Datei layout/local.xml vorgenommen werden. Sie muss nicht explizit eingebunden werden, da Magento automatisch nach ihr sucht.
    • Mit der Methode removeLinkByUrl() können Links entfernt werden.
    • Für “Kontaktieren Sie uns” und “RSS” erstellt man am besten einen Helper, welcher die benötigten URLs erzeugt.
    • Eigene Links können mit der Methode addLink() hinzugefügt werden. Hier kann man dieselben Parameter wie bei der Top-Navigation verwenden.
  • “Helfen Sie uns”: page/html/footer.phtml in das eigene Theme kopieren die Zeile entfernen.
  • Copyright-Hinweis: Anpassung des Textes in “System” > “Konfiguration” > “Allgemein” > “Gestaltung” > “Fußzeile” > “Copyright”. Wenn der Code komplett entfernt werden soll, löscht man ebenfalls die Zeile in der footer.phtml.

Fazit

Wenn man Magento-Einsteiger ist, dauert es eine Weile, bis man herausfindet, wie man den Footer von Magento verändert. Wenn man weiß, wie es geht, ist man schon um Einiges schneller. Ich habe Ihnen hoffentlich mit dieser Anleitung weiterhelfen können. Falls ich an einer Stelle zu sehr abgekürzt habe, dann fragen Sie in den Kommentaren und ich versuche zu helfen. ;)