E-Mail Adresse in der Topbar platzieren

E-Mail Adresse in der Topbar platzieren

Diese Funktion steht lediglich bei folgenden Templates zur Verfügung: Flex
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.
  1. {block name="top-bar-cms-greeting"}
  2. <li class="greeting">
  3.     <a href="tel:{$Einstellungen.template.header.hotline}">{lang key='hotline' section='custom'} {$Einstellungen.template.header.hotline}</a>
  4. </li>
  5. {/block}
Oberhalb der Anweisung füge dies hier ein:
  1. {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:

  1. {block name="top-bar-cms-greeting"}
  2. <li class="greeting">
  3.     <a href="tel:{$Einstellungen.template.header.hotline}">{lang key='hotline' section='custom'} {$Einstellungen.template.header.hotline}</a>
  4. </li>
  5. <li class="mail">
  6.     <a href="mailto:{$Einstellungen.template.header.mail}">{lang key='mail' section='custom'} {$Einstellungen.template.header.mail}</a>
  7. </li>
  8. {/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:
  1. <Section Name="Kopfbereich-Einstellungen" Key="header">
  2.     <Setting Description="Email-Adresse" Key="mail" Type="text" Value="" />
  3. </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 leeren 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:

  1. {block name="top-bar-cms-greeting"}
  2. {if !empty($Einstellungen.template.header.hotline)}
  3. <li class="greeting">
  4.     <a href="tel:{$Einstellungen.template.header.hotline}">{lang key='hotline' section='custom'} {$Einstellungen.template.header.hotline}</a>
  5. </li>
  6. {/if}
  7. {if !empty($Einstellungen.template.header.mail)}
  8. <li class="mail">
  9.     <a href="mailto:{$Einstellungen.template.header.mail}">{lang key='mail' section='custom'} {$Einstellungen.template.header.mail}</a>
  10. </li>
  11. {/if}
  12. {/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:



    • Related Articles

    • Topbar in der mobilen-Version anzeigen lassen

      Nachfolgend eine Anleitung, wie man im Template in der mobilen Version die Topbar bzw. den Topbar-Hinweis anzeigen lassen kann.  Eine neue Header-Vorlage anlegen Erstelle im Child-Template eine neue Vorlage namens "header.tpl" mit folgendem Inhalt. ...

    • Hinweis in der Topbar einfügen oder bearbeiten

      In der Topbar ist es möglich zwischen dem Google Translator und den Links einen individuellen Hinweis anzuzeigen. Hinweis einfügen / bearbeiten Der Hinweis im JTL-Shop 5 ist standardmäßig nicht belegt und kann über die Sprachverwaltung eingefügt ...

    • Wie kann ich die Topbar im Template deaktivieren?

      Die Topbar lässt sich im Template unter den Template-Einstellungen deaktivieren. Suche dort nach dem Bereich " Header " und setze die Einstellung " Topbar anzeigen " auf " Nein ". Topbar im Nova-Template ausblenden Um diese Änderungen vorzunehmen, ...

    • Logo zentrieren in der mobilen Ansicht

      Um dein Shoplogo im Header in der mobilen Ansicht mittig zu platzieren, füge diesen CSS-Code in deine < bootstrap.css> unter /templates/FlatChild/themes/DEIN-THEME/ ein: @media (max-width: 480px) { #logo a img { display: block; margin-left: auto; ...

    • Hinweis "Versandkostenfrei ab x Bestellwert" bearbeiten

      Die Textpassage im Kopfbereich des Templates findest du in der Sprachverwaltung.  Zuerst wählst du die gewünschte Sprache aus, anschliessend klickst du auf den Reiter Suche und gibst deinen zu suchenden Text ein. In der Auflistung erscheinen alle ...