Wie Du die Shopware Topbar im Header entfernst

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.

Wir haben die Topbar in die Shopnavigation eingebunden und die Texte von den Buttons entfernt.

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