Theme Entwicklung: Hugo Boss Header zum Selbermachen

Theme Entwicklung: Hugo Boss Header zum Selbermachen

Alexander Wolf 14. September 2017 14

Wer unseren Shopware Livestream auf YouTube oder in unserem Shopware Forum verfolgt, der hat sich vielleicht schon selbst am Header von hugoboss.com versucht.

Für alle anderen möchten wir hier noch einmal strukturiert auflisten, welche Schritte nötig sind, um den Shopware Standard Header in einen wunderschönen, eleganten "Boss Header" zu verwandeln.

Das ist unser Endergebnis: Shopware Shop mit BOSS Header

Damit alles sauber und strukturiert bleibt, werden wir wie üblich erst einmal ein neues Theme anlegen.

1. Datei all.less erstellen

boss1

Solltest du noch keine all.less Datei erstellt haben, dann wird es höchste Zeit :-). Das gute Stück ist sehr wichtig für uns, da wir alle anderen LESS Dateien in die all.less einbinden.

Die Datei all.less legen wir in dem less Ordner an.

 themes/Frontend/EUERTHEME/frontend/_public/src/less/

Alle anderen neuen Less Dateien werden in später in diese all.less Datei importiert. 

2. Datei index.tpl erstellen

In die Datei

themes/Frontend/EUERTHEME/frontend/index/index.tpl

schreiben wir den Code:

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

{* Shop header *}
{block name='frontend_index_navigation'}
    {* Maincategories navigation top *}
    {block name='frontend_index_navigation_categories_top'}
        <nav class="navigation-main">
            <div class='emz-header-logo'>
                {* Logo container *} {block name='frontend_index_logo_container'}{include file="frontend/index/logo-container.tpl"}{/block}
            </div>
            <div class='emz-header-categories'>
                <div class="container" data-menu-scroller="true" data-listSelector=".navigation--list.container" data-viewPortSelector=".navigation--list-wrapper">
                    {block name="frontend_index_navigation_categories_top_include"}{include file='frontend/index/main-navigation.tpl'}{/block}
                </div>
            </div>
            <div class='emz-header-icons'>
                <ul>
                    {* Search form *} 
                    {block name='frontend_index_search'}
                        <li class="navigation--entry entry--search" role="menuitem" data-search="true" aria-haspopup="true" {if $theme.focusSearch && {controllerName|lower}=='index' } data-activeOnStart="true" {/if}>
                          <a class="btn entry--link entry--trigger" href="#show-hide--search" title="{" {s namespace='frontend/index/search' name="IndexTitleSearchToggle" }{/s} "|escape}">
                              <i class="icon--search"></i>
                          </a>
                        </li>
                    {/block} 

                    {* Cart entry *}
                    {block name='frontend_index_checkout_actions'}
                        {* Include of the cart *} 
                        {block name='frontend_index_checkout_actions_include'} 
                            {action module=widgets controller=checkout action=info} 
                        {/block} 
                    {/block}
                </ul>
            </div>
        </nav>
    {/block} 
    {block name='frontend_index_container_ajax_cart'}
        <div class="container--ajax-cart" data-colopse-cart="true" {if $theme.offcanvasCart} data-displayMode="offcanvas" {/if}></div>
    {/block}
{/block}
boss2

3. Datei main-navigation.less erstellen

Jetzt benötigen wir eine main-navigation.less Datei. Diese erstellen wir in dem Ordner _modules.

Der Pfad lautet

themes/Frontend/EUERTHEME/frontend/_public/src/less/_modules

In die Datei schreiben wir

.navigation-main{
  background: #111;
  border-bottom: 0;
  line-height: 56px;
  position: fixed;
  display: flex;
  width: 100%;
  z-index: 1010;
  top: 0;

  .emz-header-logo{
    padding-left: 35px;
    padding-top: 11px;
  }

  .emz-header-categories{
    margin: 0 auto;

    .navigation--list{
      background: #111;

      .navigation--entry.is--active{
        .navigation--link{
          background-color: transparent;
          background-image: none;
        }
      }

      .navigation--link{
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: 1px;
        text-decoration: none;

        span:after{
          content: '';
          display: block;
          .unitize(height, 2);
          width: 0;
          .unitize(top, -15);
          position: relative;
          background: #fff;
          margin: auto;
          transition: width .5s ease, background-color .5s ease;
        }

        &:hover{
          span:after{
            width: 100%;
            background-color: #fff;
          }
        }
      }
    }
  }

  .emz-header-icons{
    padding-right: 35px;

    .navigation--entry{
      .btn{
        background-color: #111;
        background-image: none;
        color: white;
        border: 0;

        [class^="icon--"]{
          .unitize(font-size, 15);
          .unitize(line-height, 72);
        }
      }

      .badge{
        background-color: #111;
        color: white;
        background-image: none;
        border: 1px white solid;
        position: absolute;
        top: 15px;
        right: -10px;
      }
    }

    .entry--search{
      position: static;
      width: auto;
      
      .entry--trigger{
        display: inline-block;
      }
    }
  }
}

Bevor wir die Änderungen sehen, müssen wir diese neue Datei in unsere all.less importieren. Wir schreiben in unsere all.less Datei den Code:

@import "_modules/main-navigation";

boss3

4. Datei info.tpl erstellen

Um nur die Icons ohne Text zu haben, erstellen wir eine info.tpl in dem Ordner checkout.

Der Pfad ist

themes/Frontend/EUERTHEME/widgets/checkout

In die Datei schreiben wir den Code:

{extends file='parent:widgets/checkout/info.tpl'}

{* My account entry *}

{block name="frontend_index_checkout_actions_my_options"}

<li class="navigation--entry entry--account" role="menuitem">

{block name="frontend_index_checkout_actions_account"}

<a href="{url controller='account'}" title="{"{s namespace='frontend/index/checkout_actions' name='IndexLinkAccount'}{/s}"|escape}" class="btn entry--link account--link">

<i class="icon--account"></i>

</a>

{/block}

</li>

{/block}

{* Cart entry *}

{block name="frontend_index_checkout_actions_cart"}

<li class="navigation--entry entry--cart" role="menuitem">

<a class="btn cart--link" href="{url controller='checkout' action='cart'}" title="{"{s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}"|escape}">

<span class="badge is--primary is--minimal cart--quantity{if $sBasketQuantity < 1} is--hidden{/if}">{$sBasketQuantity}</span>

<i class="icon--basket"></i>

</a>

<div class="ajax-loader">&nbsp;</div>

</li>

{/block}

boss4

5. Erweitertes Menü Plugin überschreiben und anpassen

Falls das erweiterte Menü bei euch nicht aktiviert ist, könnt ihr das Ganze einfach im Plugin Manager machen. Installieren, aktivieren, Cache leeren und fertig!

Wir legen einfach in dem Ordner

/themes/Frontend/EUERTHEME/frontend

den Ordner advanced_menu mit der index.tpl Datei an.

In die Datei schreiben wir den Code

{extends file='parent:frontend/advanced_menu/index.tpl'} {block name="frontend_plugins_advanced_menu_main_container"} {if $hasCategories || $hasTeaser} <div class="content--wrapper{if $hasCategories} has--content{/if}{if $hasTeaser} has--teaser{/if}"> {if $hasCategories} {block name="frontend_plugins_advanced_menu_sub_categories"} {call name="categories_top" categories=$mainCategory.sub} {/block} {/if} {if $hasTeaser} {block name="frontend_plugins_advanced_menu_teaser"} {if $hasCategories} <div class="menu--delimiter" style="right: {$columnAmount * 25}%;"></div> {/if} <div class="menu--teaser"{if $hasCategories} style="width: {$columnAmount * 25}%;"{else} style="width: 100%;"{/if}> {if !empty($mainCategory.media)} <a href="{$link|escapeHtml}" title="{s name="toCategoryBtn" namespace="frontend/plugins/advanced_menu/advanced_menu"}{/s}{$mainCategory.name|escape:'html'}" class="teaser--image" style="background-image: url({link file={$mainCategory.media.path}});"{if $mainCategory.external} target="{$mainCategory.externalTarget}"{/if}></a> {/if} {if !empty($mainCategory.cmsHeadline)} <div class="teaser--headline">{$mainCategory.cmsHeadline}</div> {/if} {if !empty($mainCategory.cmsText)} <div class="teaser--text"> {$mainCategory.cmsText|strip_tags|truncate:250:"..."} <a class="teaser--text-link" href="{$link|escapeHtml}" title="{s name="learnMoreLink" namespace="frontend/plugins/advanced_menu/advanced_menu"}mehr erfahren{/s}"> {s name="learnMoreLink" namespace="frontend/plugins/advanced_menu/advanced_menu"}mehr erfahren{/s} </a> </div> {/if} </div> {/block} {/if} </div> {/if} {/block}

boss5

Jetzt passen wir das erweiterte Menü nach unserem Vorbild mit LESS an.

Wir legen in dem Ordner

/themes/Frontend/EUERTHEME/frontend/_public/src/less/

den Ordner _plugins mit der Datei advanced-menu.less an.

In die Datei schreiben wir den Code

.emz-header-categories{

.advanced-menu{

max-width: none; left: 0; opacity: .98; background-color: #111; color: #fff; position: fixed;

.menu--container{

.unitize-max-width(1260, 16);

margin: 0 auto; }

.menu--list-item-link{

color: #fff; &:hover{ color: #fff; padding-left: 0; } }

.content--wrapper{

.unitize(margin-top, 20);

}

.item--level-0{

.unitize(padding-left, 25);

.unitize(padding-right, 25);

& > .menu--list-item-link{

.unitize(font-size, 24);

font-weight: 500; border-bottom: 1px solid #333; } }

.menu--level-1{

margin-left: 0;

.unitize(margin-top, 20);

.item--level-1{

.unitize(line-height, 24);

} } } }

Auch diese Datei müssen wir in unsere all.less importieren. Genauso wie schon weiter oben:

@import "_plugins/advanced-menu";

boss6

6. Ladesymbol verschieben

Damit das Ladesymbol sich nicht halb im Header befindet, passen wir das Ladesymbol mit LESS an.

Dafür erstellen wir in dem Ordner

/themes/Frontend/ EUERTHEME/frontend/_public/src/less/_components

die Datei emotions.less.

In die Datei schreiben wir den Code

.emotion--overlay{

.unitize-height(122);

}

Nicht vergessen die Dateien in die all.less einzubinden, sodass der gesamte Code verfügbar ist.

7. Cache leeren und Theme kompilieren

Zu guter Letzt den Cache leeren und anschließend das Theme kompilieren.

Et voila - viel Spaß dabei! Die Videos dazu findest Du auf unserem YouTube Kanal, bzw. in folgender Playlist: https://www.youtube.com/watch?v=oxNfqRNBRrA&list=PLUYcCWcktLY5efiQRnBMaILtdjVj9vg9B


PS: Wer das Ganze auch noch mobil optimieren und noch mehr spannende Tutorials möchte, der schaut am besten einmal in unserem 8mylez Shopware Forum vorbei - dort entwickeln wir im Livestream das komplette Hugo Boss Theme.

14 Kommentare

  • Leider wird mir das Navigationssystem auch fürs Handy so angeizeigt und das nimmt fast die den gestamten Bildschirm ein und man kann die eigentlich Inhalte nur noch so halb unter dem Menü erahnen. Ich würde gerne das standard mobile theme von Shopware für die mobile devices weiterhin nutzen. Wie würde man das denn einstellen ?

    lg
  • Hey manu,

    Anpassungen für mobile Endgeräte haben wir da noch nicht drin. Die kannst du dir aber in unserem Livestream anschauen.

    Im Prinzip musst du nur mit den CSS Media Queries den Code erst ab dem Viewport für Tablet oder Desktop aktivieren. Dann hast du den Standard im Mobile beibehalten.

    Gruß
    Alexander
  • Hallo 8mylez,
    vielen Dank für das tolle Tutorial.
    Ich habe das soweit umgesetzt und auch den aktuellen Stand aus Github hochgeladen. Beim Theme kompilieren bekomme ich jetzt folgende Fehlermeldung:

    ist ein Fehler aufgetreten: variable @emz-navigation-line-height is undefined in file /var/www/clients/client4810/web9655/web/themes/Frontend/MEINTHEME/frontend/_public/src/less/_modules/main-navigation.less in main-navigation.less on line 107, column 27 105| @media screen and(min-width: @tabletLandscapeViewportWidth) { 106| .navigation-main{ 107| .unitize(line-height, @emz-navigation-line-height - 18); 108| 109| .emz-header-logo{ 110| .unitize(padding-left, 35);

    mit dem "alten" Stand der main-navigation hat alles geklappt. Jetzt habe ich den Stand von Github drin und nichts geht mehr. Was kann da los sein?

    Vielen Dank für die Mühe
  • Die System-Log schreibt:
    Less_Exception_Compiler: variable @emz-navigation-line-height is undefined in file /var/www/clients/client4810/web9655/web/themes/Frontend/MEINTHEME/frontend/_public/src/less/_modules/main-navigation.less in main-navigation.less on line 107, column 27 105| @media screen and(min-width: @tabletLandscapeViewportWidth)

    Vermutlich gibt es die Unitize Variable also gar nicht. Oder ist das der Holzweg?
  • Hey Jan,

    sieht für mich danach aus als würde die Variable fehlen. Möglicherweise hilft es wenn du das Plugin neuinstalliert und das Theme im Theme Manager konfigurierst und in die Variablenfelder mit Inhalt befüllst.

    Gruß
    Alexander
  • Info: Der Link zu euren eigenen header funktioniert nicht mehr.
  • Hey Michele,

    danke für den Hinweis!

    Wir korrigieren das :)

    Gruß
    Alexander
  • Hallo Alexander,
    vielen Dank für die Antwort.
    Falls das Plugin Erweitertes Menü gemeint ist, das ist installiert.
    Ich war mit meinem Latein am Ende und habe erstmal alles rückgängig gemacht. So sehr mir der Header gefallen hat und es echt schade drum ist.

    Viele Grüße
  • Hallo,
    ich sauge mir förmlich sämtliche Tutorials rein. Das jetzig einzige Problem bei der Erstellung nach Anleitung ist, dass mein Logo (SVG Datei) alles "überschattet*. Der Header ist sichtbar, ansonsten ist alles schwarz. Erst wenn ich die Website auf 175% ranzoome wird die Seite korrekt angezeigt, außer dass mein Logo verschwunden ist und statt dessen das DEMO-Logo angezeigt wird...Leider kann ich den Fehler nicht nachvollziehen :-(
  • Hey Marcel,

    vielen Dank für dein Feedback :)

    Ich vermute das es damit zu tun hat, dass du für die darunter liegenden Viewports (iPad Landscape usw.) kein Logo im Theme Manager hinterlegt hast.

    Beim Zoomen verändert sich entsprechend der Viewport bzw. die Breite, sodass der Code für die mobilen Endgeräte verwendet wird. Dies könnte unter Umständen dafür sorgen, dass dein Code dann das Demo Logo anzeigt.

    Ansonsten kannst du dir den aktuellen Code aus dem LiveStream anschauen und versuchen diesen mit deinem zu vergleichen, falls sich ein Fehler eingeschlichen hat:

    https://github.com/8mylez/EmzBiancoTheme/blob/master/Resources/Themes/Frontend/BiancoTheme/frontend/_public/src/less/_modules/main-navigation.less

    Gruß
    Alexander
  • Hallo,
    ich wollte fragen, wie man die Suche denn jetzt quasi aktiviert. Diese funktioniert ja dort noch nicht. Beim Anschauen der Livestreams wurde das Suchthema nicht behandelt. Könnte ich eine Anleitung erhalten, wie ich diese Suche nutzen kann, sonst ist diese schöne Navigation nämlich nicht nutzbar. Denn das Livestream Projekt scheint ja beendet zu sein. Ich freue mich auf eine Antwort und hoffe auf eine Rückmeldung. Noch ein Schönes Wochenende :)
  • Hey E.Mitropoulos,

    das Livestream-Projekt ist ganz und gar nicht beendet :-)

    Wir streamen nach wie vor jede Woche 2x, Dienstags und Donnerstags - aktuell um 16 Uhr. Alle Aufzeichnungen findest Du in unserem Forum.

    Herzliche Grüße
    Marc
  • Sieht klasse aus, vielen Dank!
    Allerdings habe ich ein paar Fragen:
    - Das Suchfeld wird nicht angezeigt, somit kann die Suche auch nicht benutzt werden
    - Auf den weiterführenden Seiten verdeckt die Leiste den Content zum Teil

Was denkst du?

SEO für Shopware!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen für gute Rankings in den Suchmaschinen.
Zum Store

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Freitextfelder im Shopware Frontend ausgeben
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes
Logo Größe mit Less für Shopware 5 anpassen
Shopware Theme: Eigenes Listing Layout erstellen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Wie du schnell und einfach Google Shopping für Shopware einrichtest
Social Media Icon mit Link im Footer
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Plugin Themes überschreiben und anpassen
© 2017 by 8mylez. Powered by Goltfisch GmbH.