In Shopware 5 ist die Template Struktur ein wenig anders, als man es noch von Shopware 4 kennt. Jedoch ist das anpassen der entsprechenden Templates gleich geblieben.

Möchten wir also nun unser eigenes Responsive Template erstellen müssen wir dieses nun erst einmal im Shopware Backend erstellen. Dazu gehen wir in den Theme Manager und klicken auf Theme erstellen. Wichtig hierbei ist, dass Ihr als Abhängigkeit das Responsive Template auswählt, nicht das Bare Template.

Erklärung

Das Bare Template ist in Shopware das neue Master Template, zu vergleichen mit dem default Template aus Shopware 4. Das Bare Template enthält alle nötigen Template Dateien, allerdings kein CSS Styling. Es ist also ein komplettes Blanko Template.

Das Responsive Template dagegen hat alle nötigen CSS bzw. LESS als auch Javascript Dateien, welche nötig sind um das Template darzustellen, als auch die Responsive Fähigkeit zu gewährleisten. Das ist hier auch der Grund, warum das Responsive Template keinerlei Template Dateien hat. Es hat lediglich die nötigen CSS & Javascript Dateien um das Bare Template zu gestalten.

Möchten wir nun unser eigenes Responsive Template erstellen, müssen wir hier entsprechend auch vom Responsive Template ableiten und nicht vom Bare Template.

Wenn wir unser wirklich komplett eigenes Template erstellen ohne jegliche Vorgaben und Styling, dann können wir das Bare Template auswählen.

Die Template Anpassung

Haben wir unser neues Template im Shopware Backend erstellt, legt Shopware automatisch die nötige Template Struktur für uns an. Wichtig für uns ist hier erstmal der angelegte Ordner frontend.
Auf alle anderen Dateien werden wir in einem weiteren Artikel eingehen.

Hier sind wir nun in unserer gewohnten Template Struktur.

Um zu demonstrieren, wie wir nun das Template anpassen, möchten wir einmal im Kopf Bereich die Suche entfernen. Nicht gerade Sinnvoll für einen Onlineshop, aber sehr gut um das ganze zu verdeutlichen.

Suchfeld entfernen

Um das Suchfeld zu entfernen legen wir uns die Datei shop-navigation.tpl im Ordner /frontend/index an.
Die Master Datei liegt im Bare Template unter Bare/frontend/index/shop-navigation.tpl und halt folgenden Inhalt:

<nav class="shop--navigation block-group">{* Menu (Off canvas left) trigger *}
{block name='frontend_index_offcanvas_left_trigger'}</nav>
<ul class="navigation--list block-group">
<ul class="navigation--list block-group">
    <li class="navigation--entry entry--menu-left"><a class="entry--link entry--trigger btn is--icon-left" href="#offcanvas--left" data-offcanvas="true" data-offcanvasselector=".sidebar-main">
<i class="icon--menu"></i> {s namespace='frontend/index/menu_left' name="IndexLinkMenu"}{/s}
</a></li>
</ul>
</ul>
{/block}

{* Search form *}
{block name='frontend_index_search'}
<ul class="navigation--list block-group">
    <li class="navigation--entry entry--search" data-search-dropdown="true" data-activeonstart="true"><a class="btn entry--link entry--trigger" title="{" href="#show-hide--search" name="IndexTitleSearchToggle">
<i class="icon--search"></i></a></li>
</ul>
{block name='frontend_index_search_display'}
<span class="search--display">{s namespace='frontend/index/search' name="IndexSearchFieldSubmit"}{/s}</span>
{/block}

{* Include of the search form *}
{block name='frontend_index_search_include'}
{include file="frontend/index/search.tpl"}
{/block}

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

Hier haben wir nun den für uns interessanten Block frontend_index_search, welcher das Suchfeld einbindet. Diesen entfernen wir nun mitsamt seinem Inhalt und speichern das ganze ab. Wenn Ihr nun eure Seite aktualisiert, sollte die Suche verschwunden sein.

Das Template sieht nun wie folgt aus:

<nav class="shop--navigation block-group">{* Menu (Off canvas left) trigger *}
{block name='frontend_index_offcanvas_left_trigger'}
<ul class="navigation--list block-group">
<ul class="navigation--list block-group">
    <li class="navigation--entry entry--menu-left"><a class="entry--link entry--trigger btn is--icon-left" href="#offcanvas--left" data-offcanvas="true" data-offcanvasselector=".sidebar-main">
<i class="icon--menu"></i> {s namespace='frontend/index/menu_left' name="IndexLinkMenu"}{/s}
</a></li>
</ul>
</ul>
{/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}

</nav>
Shopware Onlinekurs Jetzt kostenlos anmelden.