Wie Du die Shopware Topbar im Header entfernst

Wie Du die Shopware Topbar im Header entfernst

Ewald Gering 14. Dezember 2016 27

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

Du möchtest zusätzlich die Navigation zentrieren? Schau doch mal hier vorbei: Shopware Navigation zentrieren

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 Shopnavigation mit der Topbar so aus.
icons_veraendern_standard

Wir haben die Topbar in die Shopnavigation 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 Shopnavigation 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 Originaldatei 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.
Außerdem 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.

Du hast Interesse an einem komplett neuen Design für deine Navigation? Dann schau dir das einmal an: Shopware Navigation anpassen

27 Kommentare

  • Leider habe ich die Kommentare erst später gelesen. Geht leider nicht...
    Antworten

  • Hey Mika,

    welches Problem hast du genau? Bitte beachte das Update der Variable ab SW 5.5

    Gruß
    Ewald

  • Hat da jemand schon eine Lösung? Würde mich auch mal interessieren.
    Antworten

  • Im Prinzip funktioniert alles, außer das Fragezeichen. Das Fragezeichen lässt sich nicht mehr anklicken bzw. die Unterkategorien werden nicht mehr eingeblendet.
    Antworten

  • Hallo, leider funktioniert es immer noch nicht, auch nicht mit den angegeben Änderungen. Funktioniert auch nicht unter dem neuesten Update 5.5.7 von Shopware. Unter dem var. Ordner ist keine Fehlermeldung vorhanden. Config Tweaks ist aktiv und auch hier werden keine Fehlermeldung ausgegebene.
    Antworten

  • Hey Kader,

    wir haben es nochmal anhand des Beitrags nachgestellt und es ging Fehlerfrei. Was ich mir hier vorstellen könnte wäre ein falscher Variablenname bei der Gruppe.

    Gruß
    Ewald

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

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

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

  • 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?
    Antworten

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

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

  • 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?
    Antworten

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

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

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

E-Mail: support@8mylez.com

Telefon: +49 (0) 5251 284 710

Shopware Dienstleistungen

Shopware Code AuditShopware PerformanceShopware Leasing

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2023 by 8mylez GmbH //  Impressum + Datenschutz