Theming: Topbar entfernen

Theming: Topbar entfernen

Ewald Gering 14. Dezember 2016 2

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 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}

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 E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

2 Kommentare

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

Das Shopware eBook für Einsteiger!

Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.Zum 8mylez Store

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 Shop erstellst und verwaltest

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstellst
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie du deine Shop Geschwindigkeit optimierst
Plugin: Einkaufswelt Element Kategorie-Teaser mit eleganten Mouseover Effekten
Social Media Icon mit Link im Footer
Shopware Logo aus dem Footer entfernen
Die Ups! Ein Fehler ist aufgetreten! Fehlermeldung

8mylez gehört zu

© 2016-2017