Bitte klicken Sie auf den unten stehenden Link, um das Thema zu erstellen.
Jetzt werden wir die benutzerdefinierte Themenkopfzeile in Shopware 5 bearbeiten. Um die benutzerdefinierte Themenkopfzeile zu bearbeiten, führen Sie die folgenden Schritte aus:
Ein benutzerdefiniertes Thema ist ein Themenname, den ich bereits erstellt habe.
Schritt 1: Gehen Sie in das Shopware-Themenverzeichnis Ihrer Website.
Schritt 2: Erstellen Sie eine neue Datei im Themenverzeichnis mit dem Namen „index. tpl“.
Dateistruktur:-
themes/Frontend/Custom/frontend/index/index.tpl
Schritt 3: In der Datei index.tpl wird dieser Code geschrieben.
{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/logocontainer.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-collapse-cart="true"{if $theme.offcanvasCart} data-displayMode="offcanvas"{/if}></div>
{/block}
{/block}Schritt 4: Speichern Sie den Code und gehen Sie zum Frontend, Ihre Kopfzeile sieht so aus.
Schritt 5: Erstellen Sie im Theme-Verzeichnis eine neue Datei namens „main-navigation.less“ im Verzeichnis _modules.
Dateistruktur:-
themes/Frontend/Custom/frontend/_public/src/less/_modules/main-navigation.less
Schritt 6: In „main-navigation.less“ schreiben Sie diesen Code.
.navigation-main{
background: #111;
border-bottom: 0;
line-height: 56px;
display: flex;
width: 100%;
z-index: 1010;
top: 0;
.emz-header-logo{
padding-left: 35px;
padding-top: 11px;
.logo--shop{
height: 60px;
margin-top: 9px;
}
}
.emz-header-categories{
margin: 0 auto;
padding-top: 10px;
padding-right: 220px;
.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;
padding-top: 10px;
.icon--basket:before{
position: absolute;
top: -24px;
}
.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;
}
}
}
}Schritt 8: Erstellen Sie eine Datei „all.less“ im Verzeichnis less.
Dateistruktur:-
themes/Frontend/Custom/frontend/_public/src/less/all.less
Schritt 9: Wir müssen diese neue Datei in unsere all.less importieren. Wir schreiben den Code in unsere all.less-Datei:
@import "_modules/main-navigation";Schritt 10: Löschen Sie den Cache und Ihr Frontend sieht wie folgt aus.
Schritt 11: Erstellen Sie info.tpl im Verzeichnis checkout. Um nur die Icons ohne Text zu haben.
Dateistruktur:-
themes/Frontend/Custom/widgets/checkout/info.tpl
Schritt 12: Schreiben Sie diesen Code in die Datei info.tpl.
{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">
<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 is--icon-left cart--link" href="{url controller='checkout' action='cart'}" title="{$snippetIndexLinkCart|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}
Speichern Sie die Dateien und löschen Sie den Cache.
Ergebnisse:
Bitte kontaktieren Sie uns unter manish@bay20.com oder rufen Sie uns unter +91-8800519180 an, wenn Sie Unterstützung für Shopware 5 benötigen. Sie können auch die Shopware 5 Entwicklungsseitt besuchen, um die von uns angebotenen Dienstleistungen zu überprüfen.
