Mein erster onlineshop
mit shopware 5
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.
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.
In die Datei
themes/Frontend/EUERTHEME/frontend/index/index.tplschreiben 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}
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";
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"> </div>
</li>
{/block}
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}
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";
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.
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
Wenn du deine Navigation zentrieren möchtest, haben wir hier ein Tutorial für dich: Shopware Navigation zentrieren
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.
Du kannst auch ohne Probleme eigene Font Awesome Icons in Deinen Shop einbauen. Wie das geht, zeigen wir Dir hier: Shopware Font Awesome
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
Ü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
lg
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
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
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?
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
danke für den Hinweis!
Wir korrigieren das :)
Gruß
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
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 :-(
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
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 :)
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
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
Ja, da gibt es noch das ein oder andere an Feintuning, was wir im dazugehörigen Livestream aber ebenfalls Stück für Stück zeigen :-)
Herzliche Grüße
Marc
Was denkst du?