In diesen Tutorial erhalten Sie grundlegenden Informationen, die Sie zur Templateanpassung in Shopware 3.5 wissen müssen. Wir konzentrieren uns hier auf die wesentlichen Anpassungen, die Sie auch mit wenig Programmiererfahrungen durchführen können.

Bitte beachten Sie bei Ihren Anpassungen immer darauf, dass Sie das Standardtemplate "_default" von Shopware nicht bearbeiten, da Ihre Änderungen beim nächsten Update wieder überschrieben werden könnten.

Doch wie passen Sie jetzt Shopware an Ihre persönlichen Bedürfnisse an? Wir haben einen Weg gefunden, wie Sie stets die neuesten Funktionen von Shopware nutzen können ohne dass Ihre Anpassungen verloren gehen. Die Zauberwörter lauten hier "Vererbungen" und "Template-Blöcke", worauf wir im Laufe dieses Tutorials eingehen werden.

Bevor wir aber anfangen können, das Template an unsere Bedürfnisse anzupassen, müssen wir erst die Ordnerstruktur erstellen, die Shopware erwartet. Die Struktur basiert auf den Bereich, welcher angepasst werden soll (frontend oder backend). Der Ordner "frontend" unterteilt sich in Unterordner, die die verschiedenen Shopbereiche repräsentieren.

Diese Bereiche, auch Controller genannt, sind wie folgt definiert:

_resources			Enthält alle Bilder, CSS- und JS Dateien
account				Mein Kontobereich (Bestellübersicht, Login, ...)
blog				Templates für das Blogsystem
campaign			Aktionen (Banner, ...)
checkout			Der Bestellprozess (Warenkorb, Kassenseite, ...)
content				Feeds z.B "Aktuelles"
custom				Shopseiten
detail				Artikeldetailseite
error				Fehlerseiten  (404, Template nicht gefunden, ...)
forms				Templates für das Forumlarsystem
home				Startseite
index				Grundgerüst
listing				Kategorieansicht
newsletter			Newsletteranmeldung und -auflisting
note				Merkzettel
plugins				Templates für Plugins
register			Registierung
search				Suchergebnisse
sitemap				Template für die Sitemap
tellafriend			Formular zur Weiterempfehlung von Artikeln
ticket				Ticketsystem (Support beantragen, Supportverwaltung, ...)

Um Ihnen den Einstieg zu erleichtern, finden Sie im Downloadbereich dieses Tutorials die komplette Ordnerstruktur eines Templates. Diese Struktur können Sie einfach mit einem FTP-Client auf Ihren Server uploaden, um danach direkt mit Ihren Änderungen beginnen zu können.

Nachdem wir die Ordnerstruktur angelegt haben, erstellen wir im nächsten Schritt das Stylesheet des Templates. Das Stylesheet repräsentiert alle optischen Anpassungen, welche Sie durchführen.

Das Stylesheet erstellen Sie im Ordner _resources/styles Ihres Templates. In diesem Tutorial heißt unser Stylesheet "tutorial.css". Hier passen wir in späteren Schritten die Farben an, ändern das Logo und gestalten die Navigation des Shops neu. Sie können im Stylesheet auch Elemente des Templates um positionieren, darauf werden wir aber später noch eingehen.

Zunächst fangen wir damit an, dass wir in das _default-Template wechseln und die Datei "colors.css" im Ordner _resources/styles öffnen und kopieren. Jetzt wechseln wir wieder in unser Stylesheet "tutorial.css" und fügen den Inhalt ein, anschließend speichern wir die Datei!

Wenn wir jetzt unseren Browser aktualisieren (vorausgesetzt wir haben in der Templateauswahl unser eigenes Template gewählt) sehen wir, dass nichts passiert ;(. Das liegt daran, dass wir Shopware noch nicht mitgeteilt haben, dass es unsere "tutorial.css" laden soll. Doch wie machen wir dies?

Hier kommen wir jetzt zum Blocksystem, welches Shopware ab Version 3.5 von Haus aus mitbringt. Blöcke sind von Shopware vor definierte Bereiche im Template-Code, welche über einen Namen angesprochen werden können. Hiermit haben Sie die Möglichkeit bestehende Blöcke, welche im Standardtemplate definiert sind, zu überschreiben oder zu erweitern. Dies hat den Vorteil, dass Sie nicht bei einer kleinen Änderungen die komplette Datei duplizieren müssen. Um Ihnen das Blocksystem ein wenig näher zu bringen, werden wir nun gemeinsam den ersten Block erweitern.

Um dies zu bewerkstelligen müssen wir aber erstmal schauen welche Blöcke zur Verfügung stehen und welcher sich optimal für unsere Anpassung eignet. Hierzu wechseln wir in das Standardtemplate im Ordner "frontend/index/" und öffnen die Datei "header.tpl".

 
... 
 
{* Page title *}
<title>{block name='frontend_index_header_title'}{strip}
{if $sBreadcrumb}{foreach from=$sBreadcrumb|array_reverse item=breadcrumb}{$breadcrumb.name} | {/foreach}{/if}{$this->config('sShopname')}
{/strip}{/block}</title>
 
{* Stylesheets and Javascripts *}
{block name="frontend_index_header_css_screen"}
	<link type="text/css" media="all" rel="stylesheet" href="{link file='frontend/_resources/styles/framework.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/style.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/colors.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/plugins.css'}" />
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/enrichments.css'}" />
{/block}
 
...
 
 

Hier sehen wir dass es einen Block mit der Bezeichnung "frontend_index_header_css_screen" gibt, wo alle Stylesheets geladen werden. Diesen Block werden wir nun verwenden um die "tutorial.css"-Datei zu laden.

Um das umzusetzen wechseln wir in unser Template-Verzeichnis und erstellen, falls noch nicht vorhanden, den Ordner "index" und in diesem Ordner die (leere) Datei header.tpl. Wir benennen die Datei genauso, wie die Ursprungsdatei wo wir den passenden Block gefunden haben. Dies ist zwar nicht zwingend erforderlich, aber bei größeren Anpassungen behält man so den Überblick.

Öffnen Sie an dieser Stelle jetzt die gerade von Ihnen erstellte header.tpl-Datei und fügen Sie folgenden Code ein:

 
{extends file="../_default/frontend/index/header.tpl"}
 

Mit diesen Code-Schnipsel sagen wir Shopware, dass wir die Datei "header.tpl" aus den Standardtemplate erben möchten. Dies müssen wir machen, damit wir Blöcke bearbeiten können, die in der "header.tpl" im Standardtemplate definiert sind.

Jetzt fügen wir folgenden Code in unsere "header.tpl"-Datei ein:

 
{block name="frontend_index_header_css_screen"}
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/tutorial.css'}" />
{/block}
 

Wir speichern die Änderungen und aktualisieren den Browser und sehen nun, dass jetzt unsere "tutorial.css" geladen wird aber alle anderen CSS-Dateien, die in dem Block definiert waren, ausgeblendet werden. Das liegt daran, dass wir den Ursprungsblock komplett ersetzt haben. Was wir aber möchten ist, dass am Ende des Blockes unsere Änderung angefügt wird. Hierzu gibt es die Parameter "append" und "prepend", die Sie beim Block mit definieren können. "append" sorgt dafür dass am Ende des Blocks der Inhalt angefügt wird. "prepend" bewirkt genau das Gegenteil. Hier wird am Anfang des Blocks unser Inhalt geschrieben.

Fügen Sie jetzt im Blockaufruf den Parameter hinzu, so dass Ihre "header.tpl" jetzt wie folgt aussieht:

 
{extends file="../_default/frontend/index/header.tpl"}
 
{* Block erweitern *}
{block name="frontend_index_header_css_screen" append}
	<link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_resources/styles/tutorial.css'}" />
{/block}
 

Nachdem Sie die Änderungen gespeichert haben, sehen Sie, dass jetzt die Darstellung wieder korrekt ist und auch unsere "tutorial.css"-Datei nach allen anderen CSS-Dateien geladen wird. Jetzt können wir unsere Änderungen im Stylesheet durchführen.

Wir haben jetzt einen Ausgangspunkt geschafften, so dass wir nun zum Beispiel die Farben und das Logo anpassen können.

In diesen Schritt ändern wir die Farben. Das Standardtemplate besteht aus den beiden Hauptfarben "#dd4800" und "#efe9e2", welche wir jetzt einfach nur noch in unserer "tutorial.css" ändern müssen.

Hierzu nutzen wir die Funktion "Suchen und Ersetzen" unserer Entwicklungsumgebung. Als erstes suchen wir nach "#dd4800" und ersetzen diese Farbe mit "#613400" . Danach ersetzen wir die Farbe "#efe9e2" mit "#e6ded6".

Als nächstes laden wir ein Hintergrundbild in den Ordner "_resources/images/backgrounds" hoch. In Beispiel heißt das Bild "main_bg.jpg".

Wenn das Bild hochgeladen ist, folgen jetzt CSS-Anpassungen, welche wir am Ende der Datei "tutorial.css" einfügen.

 
html {background: transparent url('../images/backgrounds/main_bg.jpg') fixed top center;}
 

Hierzu fügen Sie einfach folgenden Code am Ende Ihres Stylesheets ein

 
/* Navigation anpassen */
#mainNavigation {
	background: #fff;
	margin: 5px 10px 0;
	width: 963px;
	padding-top: 0;
}
#mainNavigation a {
	color: #777;
}
#mainNavigation a, #mainNavigation a.active {
	border: 0 none;
	height: 30px;
	border-top: 1px solid #ccc;
}
#mainNavigation a.active {
	background: none;
	border-top: 2px solid #613400;
	margin-top: -1px;
}
#mainNavigation a:hover {
	border-top: 2px solid #613400;
	color: #111;
	text-decoration: none;
	margin-top: -1px;
}
#mainNavigation a.active:hover {
	color: #613400;
}
 

Das Ergebnis des Umstyling sieht dann wie folgt aus:

Hierzu laden wir unser Logo unter "_resources/images" hoch. In unseren Fall heißt die Datei "logo.png", welches eine Höhe von 72px sowie eine Breite von 152px hat.

Um das Logo zu ändern, fügen Sie bitte folgenden Code am Ende Ihrer CSS-Datei ein:

 
/* Logo anpassen */
#header #logo a {
	background: url('../images/logo.png') no-repeat;
	height: 72px;
	width: 158px;
}
 

Wir setzen hierzu wieder folgenden Code-Snipsel ans Ende unseres Stylesheets:

 
/* Optionen umpositionieren */
.my_options {
	left: 775px;
	top: 127px;
}
 

Hier kommen wir wieder zum Blocksystem, welches Shopware verwendet. Um uns die passenden Blöcke für die Suche und für den Breadcrumb zu suchen öffnen wir die Datei "frontend/index/index.tpl" und suchen nach den Blöcken, welche die Suche und Breadcrumb enthalten.

 
...
 
{* Maincategories navigation top *}
{block name='frontend_index_navigation_categories_top'}
	{include file='frontend/index/categories_top.tpl'}
{/block}
 
{* Search *}
{block name='frontend_index_search'}
	{include file="frontend/index/search.tpl"}
{/block}
 
{* Breadcrumb *}
{block name='frontend_index_breadcrumb'}
	{include file='frontend/index/breadcrumb.tpl'}
{/block}
 
...
 

Wie wir sehen, haben wir hier zwei Blöcke zur Verfügung. Zum einen den Block "frontend_index_search", der die Suche beinhaltet und "frontend_index_breadcrumb", der den Breadcrumb beinhaltet.

Um diese Blöcke jetzt zu überschreiben erstellen wir in unserem Template im Ordner "index" eine Datei mit dem Namen "index.tpl". Um die Blöcke überhaupt bearbeiten zu können, müssen wir wieder von der Datei erben, welche die Blöcke beinhaltet. In diesen Fall ist es die Datei "_default/frontend/index/index.tpl".

Kopieren Sie für die Vererbung der Datei folgenden Code in Ihre "index/index.tpl"

 
{extends file="../_default/frontend/index/index.tpl"}
 

Wir möchten jetzt im folgenden Schritt diese Suche und den Breadcrumb ausbauen. Dafür müssen wir einfach nur die beiden leeren Blöcke in unsere "index/index.tpl" schreiben.

 
{* Suche ausbauen *}
{block name='frontend_index_search'}{/block}
 
{* Breadcrumb *}
{block name='frontend_index_breadcrumb'}{/block}
 

Wenn Sie jetzt die Seite aktualisieren, dann sehen Sie dass der komplette Content umbricht. Dies liegt daran, dass die Breadcrumb ein Hauptbestandteil der Seite ist und dafür sorgt, dass der Content nicht gefloatet wird.

Um dieses Problem zu beheben setzen wir eine Div-Box mit der Klasse "space" in den Block des Breadcrumbs. Unsere "index.tpl" sieht jetzt wie folgt aus:

 
{extends file="../_default/frontend/index/index.tpl"}
{* Suche ausbauen *}
{block name='frontend_index_search'}{/block}
 
{* Breadcrumb *}
{block name='frontend_index_breadcrumb'}<div class="space"></div>{/block}
 

Das war schon unsere kleine Einführung in die Grundlagen der Templategestaltung. Sie finden das Endresultat im Downloadbereich dieses Artikels als ZIP-Archiv.

Sie können die erwähnte Software unter folgenden Links finden:

• http://www.mozilla-europe.org/de/firefox/
• http://addons.mozilla.org/de/firefox/addon/1843

Mit dem Firebug haben Sie die Möglichkeit alle Elemente einer Homepage zu untersuchen und On-The-Fly zu bearbeiten (d.h. die Inhalte werden nur im Browser-Cache bearbeitet und nicht auf dem Server gespeichert.)

Wenn Sie das Addon heruntergeladen bzw. installiert haben, so müssen Sie es noch aktivieren.

Gehen Sie hierzu bitte im Mozilla Firefox auf Extras und wählen den Punkt Add-ons.

Nun wählen Sie das Add-on Firebug aus und aktivieren Sie über die entsprechende Schaltfläche.

Aktivieren Sie die Firebug-Console durch drücken von [F12] oder durch den Menüpunkt Element untersuchen im Rechtsklick-Menü.

Sie haben nun die Möglichkeit ein Element Ihrer Wahl auf der Homepage zu untersuchen. Wenn Sie ein Element untersuchen erscheint die Firebug Konsole bzw. aktualisiert den Inhalt.

Sie haben nun die genaue Position des Elements im Quellcode und in der CSS-Datei:

Die Konsole gibt viele Nützliche Informationen zum untersuchten Element aus:

Dieses Add-on ist eine absolute Empfehlung, denn mit diesen Informationen lassen sich die zu bearbeitenden Elemente leicht im Editor auffinden und vieles mehr. Dies beschleunigt Ihre Arbeit im Web um ein Vielfaches.