E-Mail Adresse in der Topbar platzieren

Lesezeit 6 min

Es soll im Kopfbereich neben der Telefonnummer auch eine Email-Adresse platziert werden. Wie das genau geht, geht in diesem Artikel.

Alle Anpassungen führen wir standardmäßig nur im Child-Template. Damit diese auch nach einem Template-Update erhalten bleiben.

Die Topbar-Vorlage in das Child-Template kopieren

Die Vorlage für die Topbar lautet <header_top_bar.tpl> und liegt unter /templates/Flex/layout/.

  1. Kopiere die Vorlage in das <FlexChild> in das Verzeichnis /layout/.
  2. Öffne die Vorlage mit einem HTML-Editor deiner Wahl.
  3. Suche nach dem Bereich unten und löschen alles andere.
{block name="top-bar-cms-greeting"}
<li class="greeting">
    <a href="tel:{$Einstellungen.template.header.hotline}">{lang key='hotline' section='custom'} {$Einstellungen.template.header.hotline}</a>
</li>
{/block}

Oberhalb der Anweisung füge dies hier ein:

{extends file="../../Flex/layout/header_top_bar.tpl"}

Mit der Anweisung {extends} vererbe ich alle Elemente des Vater-Templates (Flex) und überschreibe lediglich den Block mit der Telefonnummer.

Die Topbar-Vorlage um Email-Adresse erweitern

Mein Ziel ist die Vorlage um die Email-Adresse zu erweitern, die über die Template-Einstellungen zu pflegen, als auch direkt im Frontend anklickbar ist.

Ergänze den oben aufgeführten Block um folgenden Code:

{block name="top-bar-cms-greeting"}
<li class="greeting">
    <a href="tel:{$Einstellungen.template.header.hotline}">{lang key='hotline' section='custom'} {$Einstellungen.template.header.hotline}</a>
</li>
<li class="mail">
    <a href="mailto:{$Einstellungen.template.header.mail}">{lang key='mail' section='custom'} {$Einstellungen.template.header.mail}</a>
</li>
{/block}

Vor der Email habe ich noch einen Platzhalter/Sprachvariable platziert, um vor der Email entweder einen eigenen Text z.B. „Email:“ oder auch ein Font Awesome Icon zu platzieren.

Speichere die Vorlage jetzt ab und lass uns zu dem Template-Einstellungen-Part übergehen.

Template-Einstellungen um Email-Adresse erweitern

  1. Öffne die Konfigurationsdatei des Child-Templates /FlexChild/template.xml.
  2. Suche dort nach <Settings> und füge in der nächsten Zeile dies hier ein:
<Section Name="Kopfbereich-Einstellungen" Key="header">
    <Setting Description="Email-Adresse" Key="mail" Type="text" Value="" />
</Section>

Speichere die Konfigurationsdatei ab und wechsle in das Shopbackend. Gehe auf <Template> <FlexChild> und gebe bei „Email-Adresse“ die Email-Adresse ein.


Leere Eingaben abfangen

Die obere Lösung funktioniert super, allerdings berücksichtigt diese keine lerre Eingaben. Sollte der Benutzer weder Telefon noch Email im Kopfbereich brauchen, erzeugt das Template leere Links. Genau dieses Verhalten wollen wir jetzt abfangen.

Ergänze den Code wie folgt:

{block name="top-bar-cms-greeting"}
{if !empty($Einstellungen.template.header.hotline)}
<li class="greeting">
    <a href="tel:{$Einstellungen.template.header.hotline}">{lang key='hotline' section='custom'} {$Einstellungen.template.header.hotline}</a>
</li>
{/if}
{if !empty($Einstellungen.template.header.mail)}
<li class="mail">
    <a href="mailto:{$Einstellungen.template.header.mail}">{lang key='mail' section='custom'} {$Einstellungen.template.header.mail}</a>
</li>
{/if}
{/block}

Sprachvariable für Email einfügen

Die Sprachvariable kann man relativ einfach im Shopbackend in der Sprachverwaltung <System> <Sprachverwaltung> einfügen. Klicke dort auf den Button <Variable hinzufügen>.

Sprachsektion: custom
Variable: mail
Deutsch: Email: