Topbar in der mobilen-Version anzeigen lassen

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.
  1. {extends file="../../TEMPLATENAME/layout/header.tpl"}
  2. {block name='layout-header-branding-top-bar'}
  3.     {if $Einstellungen.template.topbar.show === 'Y'}
  4.             <div id="header-top-bar" class="d-none topbar-wrapper
  5.                 {if $Einstellungen.template.megamenu.header_full_width === 'Y'}is-fullwidth{/if} {if $nSeitenTyp !== $smarty.const.PAGE_BESTELLVORGANG}d-lg-flex{/if}">
  6.                 <div class="container-fluid {if $Einstellungen.template.megamenu.header_full_width === 'N'}container-fluid-xl{/if}
                        {if $nSeitenTyp !== $smarty.const.PAGE_BESTELLVORGANG}d-lg-flex flex-row-reverse{/if}">
  7.                         {include file='layout/header_top_bar.tpl'}
  8.                 </div>
  9.             </div>
  10.     {/if}
  11. {/block}
Ersetze den Plarzhalter „ TEMPLATENAME“ durch den Namen deines Templates.

Die bestehende Topbar-Vorlage kopieren

Im nächsten Schritt sollte die Topbar-Vorlage etwas angepasst werden, da diese einige Elemente beinhaltet, die bereits in der mobilen Navigation angezeigt werden.
  1. Kopiere die Datei "header_top_bar.tpl" aus dem Vater-Template in dein Child-Template, in das Verzeichnis "layout".
  2. Füge vor jedem Element eine Anweisung, wie im Beispiel gezeigt.
Je nach Umfang des Templates können bestimmte Elemente nicht vorhanden sein.

Bereich mit Google Translator

  1. {if (!$isMobile || $isTablet) && (isset($Einstellungen.template.topbar.gtranslator) && $Einstellungen.template.topbar.gtranslator == 'Y')}
Vor dieser Zeile:
  1. {nav tag='ul' class='topbar-main nav-right ml-auto order-lg-last nav-dividers'}
die Abfrage einfügen:
  1. {if !$isMobile || $isTablet}
Nach der Zeile:
  1. {/nav}
die Abfrage schliessen:
  1. {/if}

    • Related Articles

    • 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 ...

    • 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 ...

    • 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, ...

    • Der Schrift in der mobilen Version ist viel zu klein

      Wir haben in Templates eine responsive Schriftgröße eingeführt, d.h. man kann die Schriftgröße individuell je nach Geräteklasse einstellen. Dabei wird zwischen drei Geräteklassen unterschieden: XS - Smartphones SM - Tablets LG - Desktop So kannst du ...

    • 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; ...