Shopware Topbar entfernen im Header

Shopware Topbar entfernen im Header

Ewald Gering 14. Dezember 2016 20

Nachdem wir gezeigt haben, wie man andere Icons wie z.B. die von FontAwesome einbinden kann, wollen wir nochmal auf die Buttons in der Navigation eingehen.
Denn es wird die Topbar entfernt und wir fügen die Vergleich und Service Button in die Shop Navigation des Headers ein. Bei diesen wollen wir die Texte wie "Mein Konto" und den Preis im Warenkorb entfernen.

An dieser Stelle werden Smarty und Less Kenntnisse benötigt. Durch viele andere Tutorials sollte das allerdings kein Problem für treue 8mylez Blog Leser sein.

Bei dem Standard Theme von Shopware sieht die Shop Navigation mit der Topbar so aus.
icons_veraendern_standard

Wir haben die Topbar in die Shop Navigation eingebunden und die Texte von den Buttons entfernt.
icons_veraendern_angepasst

Smarty Anpassungen

Topbar entfernen

Zum Anfang wollen wir die Topbar raus haben. Man kann diese einfach über Less ausblenden oder den Block löschen.
Hier löschen wir den Block, da sonst in der Topbar immer die Vergleiche mit geladen werden, nur nicht angezeigt.

Dafür erstellen wir in unserem Theme die "topbar-navigation.tpl".

themes/Frontend/DEINTHEME/frontend/index/topbar-navigation.tpl

Dort leiten wir von der Originalen Template Datei ab und überschreiben den Block.

{extends file='parent:frontend/index/topbar-navigation.tpl'}

{block name="frontend_index_top_bar_main"}
    <div class="top-bar"></div>
{/block}

Warum lassen wir den Block nicht leer, sondern lassen noch eine div über?
Weil die Vergleichen Funktion uns nach oben zur Topbar scrollt wenn wir einen Artikel vergleichen.

Da uns nun die Funktionen der Topbar fehlen fügen wir diese in die Shop Navigation ein. Hierfür erstellen wir die Datei.

themes/Frontend/DEINTHEME/frontend/index/shop-navigation.tpl

Funktionen in der Shop Navigation einbinden

Jetzt brauchen wir die Blöcke aus der Topbar.

{extends file='parent:frontend/index/shop-navigation.tpl'}

{block name='frontend_index_checkout_actions'}
{$smarty.block.parent}
    {* Top bar navigation *}
    {block name="frontend_index_shop_navigation_nav"}
        <nav class="top-bar--navigation block" role="menubar">

        {action module=widgets controller=index action=shopMenu}
        {* Article Compare *}
        {block name='frontend_index_shop_navigation_inline'}
            {if {config name="compareShow"}}
                <div class="navigation--entry entry--compare is--hidden" role="menuitem" aria-haspopup="true" data-drop-down-menu="true">
                    {block name='frontend_index_shop_navigation_compare'}
                        {action module=widgets controller=compare}
                    {/block}
                </div>
            {/if}
        {/block}

        {* Service / Support drop down *}
        {block name="frontend_index_shop_navigation_checkout_actions_service_menu"}
            <div class="navigation--entry entry--help has--drop-down" role="menuitem" aria-haspopup="true" data-drop-down-menu="true">
                <i class="icon--service"></i>

                {* Include of the widget *}
                {block name="frontend_index_shop_navigation_checkout_actions_service_menu_include"}
                    {action module=widgets controller=index action=menu group=gLeft}
                {/block}
            </div>
        {/block}
    {/block}
{/block}

__

Update 5.5 :

Die Group Variante heißt nun left anstatt gLeft
___

Als erstes wird wieder die Original Datei abgeleitet und dann unser Code nach den bereits vorhandenen Buttons eingefügt.
Die Navigation class übernehmen wir von dem Original damit das Dropdown Menü vom Service funktioniert.
Ausserdem heißen die Blöcke nicht "frontend_index_topbar" ... wie in der Originalen Datei, sondern diese Blöcke sind jetzt in der Shop Navigation und werden dementsprechend umbenannt.

Wenn man das ganze so speichert und kompiliert merkt man, dass noch Vergleichen als Text steht. Das soll natürlich auch raus und dafür erstellen wir diese Datei hier:

themes/Frontend/DEINTHEME/frontend/compare/index.tpl

Wieder wird der Textbaustein entfernt:

{extends file='parent:frontend/compare/index.tpl'}

{block name='frontend_top_navigation_menu_entry'}
    <i class="icon--compare"></i> <span class="compare--quantity">({$sComparisons|@count})</span>
{/block}

Less Anpassungen

Da wir nur in der Shop navigation Anpassungen erstellt haben, erstellen wir in unserem Theme die "header.less".

themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules/header.less

Nicht vergessen: Die header.less in der all.less einzubinden.

.top-bar--navigation{
  display: none;
}

@media screen and (min-width: @tabletViewportWidth) {
  .container.header--navigation .shop--navigation.block-group .navigation--list.block-group{
    .entry--search{
      left:1%;
    }
    .entry--account .account--link {
      padding: 2px 8px 2px 8px;
      .icon--account {
        font-size: 21px;
        display: inline;
        position: relative;
        vertical-align: middle;
        top: 0;
        left: 0;
      }
      .account--display {
        display: none !important;
      }
    }
    .entry--cart{
      margin-right:5px;
      .cart--link {
        padding: 2px 10px 2px 6px;
        width: 42px;
        .cart--amount {
          display: none;
        }
      }
    }
    .top-bar--navigation{
      display: block;
      margin-left:5px;
      .entry--compare {
        display: block;
        padding:0px;
        margin-right: 5px;
        .icon--compare {
          top: 8px;
          position: relative;
          font-size: 25px;
        }
        .compare--quantity {
          font-size: 15px;
          vertical-align: middle;
          margin-left:0px;
        }
        .compare--list {
          top:45px;
          &:after{
            left: 85%;
          }
          .btn--compare.btn--compare-start {
            width: 100%;
          }
        }
      }
      .entry--help{
        padding:0px;
        .icon--service{
          font-size:30px;
          position: relative;
          top:5px;
        }
        .service--list::after{
          right:1%;
        }
        .service--list{
          top:45px;
        }
      }
    }
  }
}

@media screen and (min-width: @desktopViewportWidth) {
  .container.header--navigation .shop--navigation.block-group .navigation--list.block-group{
    .entry--search{
      left:3%;
    }
    .top-bar--navigation{
      .entry--compare {
        margin-right:10px;
        .compare--list {
          &:after {
            left: 80%;
          }
        }
      }
      .entry--help {
        .service--list::after {
          right: 8%;
        }
      }
    }
  }
}

Wie man sieht, muss sehr viel Design angepasst werden damit die Boxen richtig auf den verschiedenen Viewports angepasst werden.
Das ganze kann man auch in der Detailansicht der Artikel machen und wo ihr noch Lust drauf habt.

Hol dir unseren kostenlosen Shopware E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

20 Kommentare

  • nach dem Update funktioniert es auch bei mir nicht mehr... Man kann das Fragezeichen nicht mehr anklicken bzw. dieser ist ohne Funktion...
  • Hey Kader,

    die Group Variante heißt nun left anstatt gLeft.

    Viele Grüße
    Ewald
  • Also diesen Teil

    {action module=widgets controller=index action=menu group=gLeft}
    gegen diesen Teil ersetzen
    {action module=widgets controller=index action=menu group=Left}

    geht leider immer noch nicht, Update 5.5.2
  • das Topbar meinte ich....
  • Also diesen Teil

    {action module=widgets controller=index action=menu group=gLeft}
    gegen diesen Teil ersetzen
    {action module=widgets controller=index action=menu group=Left}

    geht leider immer noch nicht, Update 5.5.2
  • Hallo,

    die Toolbar funktioniert nach dem neuesten Update bei Shopware nicht mehr.

    BG
  • Hey Baden,

    die Group Variante heißt nun left anstatt gLeft.

    Viele Grüße
    Ewald
  • Hallo,

    ich wollte Google Übersetzer in Shopware einbinden, da allerdings jetzt der Topbar fehlt, wird dieser nicht mehr angezeigt. Wie kann ich das PlugIn trotzdem einbinden?
  • Hey Adeb,

    da musst du mal schauen welchen Block das Plugin verwendet und ggf. in deinem Theme anders laden lassen.

    Viele Grüße
    Ewald
  • Hallo Ewald,

    vielen Dank für das Tutorial. Ich habe die soweit alles umgesetzt und ein wenig angepasst. Leider erscheint das Service/Hilfe-Icon fast überall, aber leider nicht auf den Kategorieseiten. Das soll es aber in meinem Fall. Hast Du einen Tipp?

    Danke und beste Grüße,
    Christian
  • Hey Christian,

    eventuell hat sich da ein Block mit den neuen Updates verändert. Welche Shopware Version nutzt du?

    Viele Grüße
    Ewald
  • Hallo,

    kann man den "Merkzettel" auch entfernen? (für den gesamten Shop)

    Grüße Pascal
  • Hey Pascal,

    das kannst du auch machen.

    Am besten einfach mal in HTML Code von Shopware die Klasse von dem Merkzettel Icon suchen und in dem Bare Theme danach suchen. Diese Datei dann in deinem Theme ableiten und den Block ersetzen.

    Viele Grüße
    Ewald
  • Guten Tag,

    Danke der Artikel war sehr hilfreich. Das Dropdown ist ausgeblendet. Leider ist das Fragezeichen Icon erhalten geblieben, ohne Funktion. Wie kann ich auch noch dieses Icon ausblenden?
  • Hey Niclas,

    du kannst den Smarty Block suchen und leer überschreiben oder über less einfach für die Klasse 'display:none;' setzen. Wobei ich lieber den Smarty Block überschreiben würde.

    Viele Grüße
    Ewald
  • Hallo Ewald,

    nach welchem Smarty Block in welcher Datei ist zu suchen?`

    Grüße Niclas
  • Hallo Ewald,

    nach welchem Smarty Block in welcher Datei ist zu suchen?`

    Grüße Niclas
  • Hey Niclas,

    wenn du das Service Dropdown meinst, sollte das der Block mit dem Inhalt sein: "frontend_index_shop_navigation_checkout_actions_service_menu" in der "frontend/index/shop-navigation.tpl"

    Viele Grüße
    Ewald
  • Hallo,
    sehr interessant, jedoch würde ich gerne den Text "Warenkorb" und "Mein Konto" weiterhin sichtbar haben...?
    Wie sollte der Block denn in der shop-navigation dann aussehen?

    Tom
  • Hallo Tom,

    der Block dient nur zum einfügen des Support Dropdown Button.
    Die Texte werden über Less ausgeblendet.
    Es sollte reichen, wenn du die Anpassungen für die Klassen 'entry--account' und 'entry--cart' entfernst.

    Viele Grüße
    Ewald

Was denkst du?

Shopware SEO
Guide 2018

shopware seo guide

Genug von schlechten Rankings?

mehr erfahren

Tools, die wir

verwenden

seobility

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Theme: Eigenes Listing Layout erstellen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe anpassen mit Less für Shopware 5
Staging Umgebung – Was ist das und warum brauchst du eine?
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Plugin Theme anpassen
Wie du jedes Icon in Shopware 5 anpassen kannst
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
© 2017 by 8mylez. Powered by Goltfisch GmbH.