Header ändern und anpassen

 — 4 Kommentare zu diesem Tutorial

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:

Teil 2 von 2:

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.

4 Kommentare zu “Header ändern und anpassen

  • 7. Oktober 2014 um 21:09
    Permalink

    Super Tutorial! Absolout klasse, klappt Alles!

    Antwort
  • 14. Mai 2015 um 13:45
    Permalink

    Danke für den tollen Tip.
    Innerhalb von Magento funktioniert es einwandfrei. Wie schaut es aber bei Verlinkungen externer Seiten, die außerhalb von Magento liegen aus?

    Ich habe alles versucht, komme aber leider nicht weiter..

    Antwort
    • 19. Mai 2015 um 09:27
      Permalink

      Hallo Hansjörg,

      dafür kannst du in der customer.xml einfach folgenden Block verwenden:

      
      <reference name="top.links">
          <action method="addLink" translate="label title">
              <label>Go to google.com</label>
              <url>http://www.google.com</url>
              <title>Visit google.com</title>
              <prepare/>
              <urlParams/>
              <position>200</position>
              <liParams/>
              <aParams/>
              <beforeText/>
              <afterText/>
          </action>
      </reference>
      

      Ich hoffe das hilft dir weiter.
      Beste Grüße
      Sebastian

      Antwort
  • 26. Mai 2016 um 20:22
    Permalink

    Danke für den Beitrag. Ich war echt in Not, bevor ich darauf gestoßen bin.
    Liebe Grüße, Helena

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*