Theme Entwicklung: Hugo Boss Header zum Selbermachen

Theme Entwicklung: Hugo Boss Header zum Selbermachen

Alexander Wolf 14. September 2017 0

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.

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

Noch keine Kommentare, sei jetzt der erste! ;)

Was denkst du?

8mylez Community

SHOPWARE

FORUM

shopware tutorial ebook mockup

Werde Teil einer einzigartigen Wissensdatenbank!

Zum 8mylez Shopware Forum

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
Logo Größe anpassen mit Less für Shopware 5
Plugin Theme anpassen
Theme Entwicklung: Hugo Boss Header zum Selbermachen
Theme: Eigenes Listing Layout erstellen
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Wie du jedes Icon in Shopware 5 anpassen kannst
Shopware Logo aus dem Footer entfernen
Staging Umgebung – Was ist das und warum brauchst du eine?
© 2017 by 8mylez. Powered by Goltfisch GmbH.