Header ändern und anpassen

Der Header ist der obere Abschnitt der Seite, der sich in seinem Grundgerüst meist nur wenig ändert. Dennoch kann es nötig sein, das man wegen einem neuen Design oder wegen der Usability den Header ändern und bearbeiten möchte. Was alles im Header steht und welche Möglichkeiten man hat, möchten wir hier zeigen.

Header Quelltext Erläuterung

Zunächst möchten wir den Quelltext des Headers etwas näher beleuchten. Dazu nehmen wir erstmal den original Quelltext:

</pre>
<div class="header-container">
<div class="header"><!--?php if ($this->getIsHomePage()):?-->
<h1 class="logo"><!--?php echo $this->getLogoAlt() ?--><a class="logo" title="<?php echo $this->getLogoAlt() ?>" href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
<!--?php else:?--> <a class="logo" title="<?php echo $this->getLogoAlt() ?>" href="<?php echo $this->getUrl('') ?>"><!--?php echo $this->getLogoAlt() ?--><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a> <!--?php endif?-->
<div class="quick-access"></div>
<!--?php echo $this->getChildHtml('topContainer'); ?--></div>
</div>
<pre>
<!--?php echo $this->getChildHtml('topMenu') ?-->

Im oberen Abschnitt des Quellcodes wird zunächst nur das Logo geladen, was sie hochgeladen und im Backend unter System -> Konfiguration -> Kopfzeile verlinkt haben. Ebenso der an gleicher Stelle angelegte Alternativtext für das Logo.

Der Quick-Access beinhaltet die Funktionen Suche, Willkommmenstext, Top-Links und Sprachauswahl. Im Quick-Access läd der Header die Suchfunktion nach (das Header Suchfeld wird in / app / design / frontend / base / default / template / catalogsearch / form.mini.phtml konfiguriert). Ebenso wird auf den Willkommenstext verwiesen, der im Backend an der gleichen Stelle wie das Logo konfiguriert wird. Die Top-Links werden aus den jeweiligen XML-Dateien geladen. So ist zum Beispiel der Kassen- und Warenkorb-Link in checkout.xml unter app / design / frontend / base / default / layout zu finden. Dort sind folgende Zeilen für die Ausgabe in den Top Links zuständig:

Die Sprachauswahl kann genutzt werden, wenn im Backend für jede Sprache eine StoreView eingerichtet wurde (System -> Stores verwalten -> StoreView anlegen). Beim Template muss darauf geachtet werden, das dann unter template / page / switch / die Datei languages.phtml existiert.

Toplinks ändern und erweitern

Die Toplinks in Magento kann man nicht so einfach ändern bzw. erweitern. Wie man das aber dennoch machen kann erklären Ihnen diese Videos:

Teil 1 von 2:

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Teil 2 von 2:

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

Autor

Sebastian

Ich interessiere mich für eCommerce-Themen, vor allem im Zusammenhang mit dem Shopsystem Magento Commerce sowie alles rund um Web-Entwicklung und den damit verbundenen Möglichkeiten.