Templatedokumentation fr Shopware 4.

0
Das aktuelle Shopware 4.0 Standardtemplate
INHALTSVERZEICHNIS
1 Vorwort
2 Technische Informationen zur Templatebasis
3 Ordnerstruktur
4 "_default" - Das Mastertemplate
4.1 Ordner: "frontend"
4.1.1 Auflistung der einzelnen Bereiche der Storefront
4.2 Ordner: "_resources"
5 "_emotion" - Das zweite Mastertemplate (Shopware 4)
5.1 Meta-Daten
5.2 Benennung eines "_emotion"-Templates
6 Dateistruktur der Ordner
7 Einfhrung in das Block-System
7.1 Vererbungen
7.2 Blcke bearbeiten
7.2.1 Blcke berschreiben und erweitern
[Link] prepend - Inhalt vor Block einfgen
[Link] append - Inhalt nach Block einfgen
7.3 Ausnahmen
7.4 Zusammenfassung
8 Anpassungen durchfhren
9 Smarty-Plugins
9.1 currency - Plugin
9.2 config - Plugin
9.3 link - Plugin
9.4 URL - Plugin
9.5 date - Plugin
9.6 rewrite - Plugin
9.7 action - Plugin
10 FAQ
10.1 Welche Neuerung im Template gibt es seit Shopware 4?
10.2 Woher wei ich, ob ein Template sich von "_emotion" oder von "_default" ableitet?
10.3 Kann ich meine Templates auch fr den Shopware Community Store anbieten?
10.4 Ich besitze noch ein angepasstes Template von der Shopware Version 3.5.x. Kann ich hier die neuen Einkaufswelten nutzen?
10.5 Bieten Sie auch einen Schnelleinstieg, damit man sich einen berblick ber das Templating in Shopware verschaffen kann?
10.6 Kann ich in meinem Template unterscheiden, welches Template verwendet wird?
10.7 Gibt es eine bersicht ber alle Template-Funktionen?
11 Scaffolding fr das Shopware 4 Template
Vorwort
Begriffserklrung - Shopware Template
Im Grunde genommen ist ein Shopware Template das "Gewand", in dem Ihr Shop erscheint. Es ist dennoch mehr als nur
ein "Gewand". Es dient dazu, Ihrem Shop ein ansprechendes Design zu geben, aber gibt Ihnen zudem die Kontrolle ber das
Aussehen und die Prsentation der Artikel und Informationen Ihres Shops.
In der folgenden Dokumentation finden Sie alle wesentlichen Bestandteile des aktuellen Shopware Templates. Wir gehen
hier auf die allgemeine Gliederung, den Aufbau des Templates sowie etwaige Besonderheiten ein.
Bitte beachten Sie, dass wir fr diese Dokumentation ein Basiswissen von HTML, CSS und der Template-Engine Smarty
voraussetzen. Was HTML ist und wie Sie HTML Code richtig bearbeiten, erfahren Sie auf den Seiten von SelfHTML.
Die Dokumentation von Smarty finden Sie auf der Seite des Projektes, wo Ihnen die Grundlagen der Templatesyntax
vermittelt werden.
Technische Informationen zur Templatebasis
Die aktuelle Templatebasis von Shopware basiert auf Smarty 3 RC4 als Template-Engine, jQuery 1.7.2 als Javascript
Bibliothek und einer angepassten Version des 960 Gridsystem als CSS Layout-Framework.
Dazu wurden mehrere Smarty Plugins von uns entwickelt, welche Ihnen bei der Formatierung von Whrungen, Daten
(Zeitangaben) sowie von Dateipfaden untersttzend zur Seite stehen. Diese Plugins werden Ihnen im spteren Verlauf der
Dokumentation vorgestellt.
Ordnerstruktur
Bitte achten Sie bei allen Template-Anpassungen darauf, dass Sie niemals das "_default" oder das "_emotion" (fr das ab
Shopware 4 mitgelieferte Mastertemplate) und die mitgelieferten Farbtemplates berschreiben oder Ihre &Aumlnderungen
hier vornehmen. Diese werden bei einem Update auf eine neuere Version von Shopware berschrieben. Erstellen Sie fr
Ihre Anpassungen stets ein neues Template-Verzeichnis oder nutzen Sie den Ordner "_local" bzw. "_emotion_local".
Der "template"-Ordner
Im Stammverzeichnis Ihres Shops finden Sie einen Ordner namens "templates", welcher alle verfgbaren Shopware
Templates beinhaltet. Sie knnen in diesem Ordner alle angepassten Templates sowie Templates vorheriger Shopware
Versionen hinterlegen.
Der Ordner "_default" beinhaltet das sogenannte "Mastertemplate" von Shopware. Dieses Template dient als
Ausgangspunkt bzw. Gerst fr alle weiteren Templates, auch genannt "Subtemplates", die Sie im Ordner "templates"
vorfinden.
Aber ab Shopware 4 hat sich die Templatestruktur durch das neue Master-Template "_emotion" gendert. Das neue
Template "_emotion" ist ein eigenstndiges von "_default" abhngiges Template. Es fungiert wie ein eigenes Template,
kann jedoch auch als Ausgangspunkt bzw. Gerst fr weitere Templates eingesetzt werden. Das Prinzip der neuen Struktur,
sehen Sie im Abschnitt "Einfhrung in das Blocksystem".
Die Subtemplates beinhalten selbst meist keine eigenen Templatedateien oder nur ausgewhlte Templatedateien, um
punktuelle &Aumlnderungen am HTML-Quellcode vorzunehmen. So knnen Sie beispielsweise weitere Dateien
(Stylesheets oder Javascriptdateien) laden oder Elemente wie die Suche umpositionieren. Alle weiteren Template-Dateien,
die im Subtemplate nicht angelegt sind, werden ber die Templatevererbung aus dem Mastertemplate bezogen.
Tipp: Sie haben natrlich auch die Mglichkeit, Templates von vorherigen
Shopware Version weiterhin zu nutzen. Bitte beachten Sie aber, dass hierzu
die Template-Engine im Kompatibilittsmodus luft und Sie keine Plugins
oder Features der aktuellen Templatebasis nutzen knnen.
"_default" - Das Mastertemplate
Hinweis: Bitte beachten Sie, dass &Aumlnderungen im "Mastertemplate" die Updatefhigkeit Ihres Shops
beeintrchtigen. Nutzen Sie deshalb das neue Blocksystem von Shopware, auf welches wir Abschnitt Einfhrung in das
Blocksystem im Detail eingehen.
Im Ordner "_default" befinden sich die Unterordner fr die jeweiligen Bereiche von Shopware. "backend" beinhaltet alle
Templates, welche fr die Administrationsoberflche verwendet werden.
Die Templates, welche unter "documents" abgelegt sind, werden fr die PDF-Belegerstellung bentigt werden. Hier
knnen Sie zum Beispiel den Kopf der Rechnung ndern oder den Fu der Rechnung um weitere Angaben erweitern.
Der Ordner "frontend" beinhaltet alle Templates der Storefront wie das Artikellisting, Detailseiten fr Artikel, Blog,
Kontobereich, usw.
"newsletter" beinhaltet alle relevanten Templates, welche fr die Gestaltung eines persnlichen Newsletters bentigt
werden.
Ordner: "frontend"
Im Ordner "frontend" finden Sie alle Templatedateien der Storefront. Die Ordner, die sich unter "frontend" befinden, sind
jeweils nach einem Bereich der Storefront benannt.
Beispiel
Gehen wir mal davon aus, dass Sie sich gerade in Ihrer Storefront befinden und Sie die Detailseite eines Artikels besuchen.
Um die Artikeldetailseite darzustellen, ldt Shopware alle Templatedateien aus dem Ordner "detail" (siehe Screenshot links)
und zeigt diese dann in Ihrem Web-Browser an.
Nach diesem Verhalten ldt Shopware alle weiteren Bereiche Ihres Shops.
Ein weiteres Beispiel ist der Kontobereich. Wenn Sie in Ihrer Storefront auf den Punkt "Mein Konto" klicken, dann ldt
Shopware alle Templatedateien aus dem Ordner "account". Im Folgenden finden Sie alle Bereiche der Storefront von
Shopware und deren Aufgabenbereiche.
Auflistung der einzelnen Bereiche der Storefront
_resources - Enthlt alle Bilder, CSS- und
JS Dateien
account - Mein Kontobereich
(Bestellbersicht, Login, ...)
blog - Templates fr das Blogsystem
campaign - Aktionen und Landingpages
checkout - Der Bestellprozess (Warenkorb,
Kassenseite, ...)
content - Feeds z.B "Aktuelles"
custom - Shopseiten
detail - Artikeldetailseite
error - Fehlerseiten (404, Template nicht
gefunden, ...)
forms - Templates fr das Formularsystem
home - Startseite
index - Grundgerst
listing - Kategorieansicht
newsletter - Newsletteranmeldung und
-auflistung
note - Merkzettel
plugins - Templates fr Plugins
ticket - Registrierung
search - Suchergebnisse
sitemap - Template fr die Sitemap
tellafriend - Formular zur
Weiterempfehlung von Artikeln an Freunde
und Bekannte
ticket - Ticketsystem (Support beantragen,
Supportverwaltung, ...)
Ordner: "_resources"
Der "_resources"-Ordner beinhaltet alle Bilder, Stylesheets und Javascriptdateien. Im Ordner finden Sie folgende Struktur
wieder, welche Sie auch bei der Erstellung von eigenen Templates beinhalten sollten.
Die Datei "[Link]" ist ein 16x16 Pixel groes Icon, welches meistens links neben der Adresszeile Ihres Browsers
eingeblendet wird. Sie knnen dieses Icon beliebig ersetzen, um auch das kleinste Detail an Ihr Design anzupassen.

Beispiel fr ein Favicon
images:
Der Ordner "images" beinhaltet alle Bilder, die Shopware fr die Storefront verwendet.
Dieser Ordner ist nochmals unterteilt in "arrows", "backgrounds", "buttons", "captcha", "icons" und "liveshopping".
Bei der Erstellung eines eigenen Templates fr Shopware sind Sie nicht an diese Ordnerstruktur gebunden, doch es wird
empfohlen den Standard beizubehalten.
javascript:
Im Ordner "javascript" befinden sich alle Javascript Dateien von Shopware. Hierzu gehrt zum einen "[Link]",
welche das Javascript Framework jQuery in Version 1.7.2 reprsentiert und zum anderen die "[Link]",
welches alle Javascript-Komponenten von Shopware beinhaltet. Im weiteren Verlauf der Dokumentation gehen wir im
Detail auf diese Datei ein und erlutern die Konfigurations-Mglichkeiten der Komponenten.
[Link]:
Die Datei "[Link]" ist eine Besonderheit in diesem Ordner. Sie basiert auf dem Projekt CSS3Pie, welches eine CSS3
Implementierung im Internet Explorer 6-8 bereitstellt. Dies ermglicht Ihnen die Nutzung der CSS3-Eigenschaften
border-radius, box-shadow, border-image sowie die Verwendung von linearen Verlufen als Hintergrund fr
Elemente. Bitte beachten Sie, dass diese Implementierung gewisse Voraussetzungen hat, welche Sie in Ihren Stylesheets
erfllen mssen. Eine Auflistung der untersttzten Eigenschaften finden Sie in der Dokumentation von CSS3Pie.
Bitte beachten Sie, dass im Emotion-Template CSS3Pie nicht verwendet wurde. Falls Sie auf die Funktionen angewiesen
sind, haben Sie aber jederzeit die Mglichkeit, die Bibliothek wieder einzubinden.
styles:
Im Ordner "styles" finden Sie alle Stylesheets, welche Shopware fr das Standardtemplate "_default" bentigt. Hier
finden Sie die Dateien "[Link]", welche alle Farbwerte enthlt, "[Link]", welche alle CSS3-Eigenschaften
setzt, "[Link]", die das 960 Gridsystems, einen CSS-Reset und weitere allgemeingltige Klassen enthlt,
"[Link]", welche die Darstellung im Internet Explorer 6 korrigiert, "[Link]", welche als Sammelpool von
CSS-Eigenschaften fr sptere Shopware- und jQuery-Plugins dient, "[Link]", welche eine korrekte Druckdarstellung
garantiert und die "[Link]", welche alle Layout- und Formatierungen des Standardtemplates enthlt. Die Datei
"[Link]" ist die wichtigste Datei in diesem Ordner, da Sie alle bentigten Formatierungen in Shopware vornimmt.
Das "[Link]"-Stylesheet steht nur im "_default"-Template zur Verfgung. Das neue Master-Template von Shopware
untersttzt den Internet Explorer erst ab Version 7.
Hier folgt eine kurze Zusammenfassung der Stylesheets und deren Aufgabenbereiche
[Link] - enthlt alle Farbwerte
[Link] - setzt alle CSS3-Eigenschaften
[Link] - 960 Gridsystem, CSS-Reset und allgemeingltige Klassen
[Link] - Sammelpool fr CSS-Eigenschaften von Plugins (Shopware, jQuery)
[Link] - korrigiert die Darstellung im Internet Explorer 6
[Link] - stellt eine Druckversion zur Verfgung
[Link] - setzt alle Formatierungen im gesamten Shop
"_emotion" - Das zweite Mastertemplate (Shopware 4)
Hinweis: Bitte beachten Sie, dass &Aumlnderungen im "Mastertemplate" die Updatefhigkeit Ihres Shops beeintrchtigt.
Nutzen Sie deshalb das neue Blocksystem von Shopware, auf welches wir Abschnitt Einfhrung in das Blocksystem im
Detail eingehen.
Der "_emotion"-Ordner
Das zweite Master-Template "_emotion" ist ein auf dem "_default" basierendes Template, welches dennoch als
eigenstndiges Master-Template fungiert. Man kann, wie bei dem "_default"-Template auch, dieses als Gerst bzw.
Ausgangspunkt fr eigene Templates verwenden.
Aus Kompatibilittsgrnden haben wir uns dazu entschlossen ein weiteres Master-Template fr Shopware 4 zu definieren.
Falls Sie jetzt mit dem Bau eines neuen Template fr Shopware 4 starten mchten, empfehlen wir Ihnen das "_emotion"
-Template als Basis zu nutzen, um direkt alle neuen Features von Shopware 4 ohne weitere Anpassungen zu nutzen.
Meta-Daten
Um "_emotion" als Basis fr Ihr nchstes Template zu verwenden ist es erforderlich, dass Ihr Template eine Datei namens
"[Link]" beinhaltet. Diese Datei enthlt alle Rahmeninformationen zum Template. Darunter zhlt zum Beispiel der Autor
oder die Lizenz des Templates. Ein Beispiel fr eine Meta-Datei finden Sie im Folgenden:
{ "name": "Example Template", "author": "shopware AG", "license": "AGPL",
"esi": true, "emotion": true }
[Link] eines Templates
Benennung eines "_emotion"-Templates
Shopware 4 erkennt anhand des Template-Prefix, was das angestrebte Master-Template ist. Wenn Sie einen Blick in das
Template-Verzeichnis von Shopware werfen, dann sehen Sie, dass eine Vielzahl von Templates mit dem Namen "emotion_"
startet. Um Ihr Template jetzt von "_emotion" erben zu lassen, legen Sie ein neues Verzeichnis an. Der Name des
Verzeichnisses hat als Prefix "emotion_" und dann den von Ihnen gewnschten Namen.
Syntax:
emotion_[TEMPLATE-NAME]
Beispiel:
emotion_orange
Dateistruktur der Ordner
Die Dateistruktur der Templates hat sich im Vergleich zur vorherigen Version stark verndert. Sie finden jetzt in jedem
Bereich der Storefront eine "[Link]", die als Steuerungsdatei im Template fr den jeweiligen Bereich fungiert. Sie wird
als erstes aufgerufen und inkludiert weitere Dateien.
Eine besondere Rolle spielt hier der Ordner "index", welcher das komplette Grundgerst von der Storefront beinhaltet und
initialisiert. Hier werden der "head"-Bereich definiert sowie die grundlegenden Elemente wie die Suche, der Breadcrumb
oder der Sprachwechsel eingebunden.
Die Grundstruktur der Storefront
Grundstruktur der Storefront:
Im Screenshot rechts sehen Sie die gerenderte Version der "index/[Link]". Hier werden die folgenden Dateien mit
folgenden Verwendungszwecken eingebunden:
[Link] - HTML-Header des jeweiligen Bereiches
[Link] - Grundgerst des jeweiligen Bereiches
[Link] - Sprach - und Whrungswechsel + Warenkorbklapper
categories_top.tpl - Listet alle Hauptkategorien
component_banner_slider.tpl - Banner-Slider fr Einkaufswelten
component_banner.tpl - Grafik-Element fr Einkaufswelten
component_category_teaser.tpl - Kategorie-Teaser fr Einkaufswelten
component_manufacturer _slider.tpl - Hersteller-Slider fr Einkaufswelten
component_blog.tpl - Blog-Teaser fr Einkaufswelten
component_article_slider.tpl - Artikel-Slider fr Einkaufswelten
[Link] - Footer-Bereich des Shops
footer_menu.tpl - Men fr statische Seiten
Tipp: Die "index/[Link]" dient immer als Grundgerst fr alle Bereiche der Storefront. Wenn Sie grundlegende
&Aumlnderungen am Grundgerst des Shops durchfhren mchten, dann mssen Sie diese Datei bearbeiten.
Um den Quellcode im HTML "head"-Bereich der Seite zu bearbeiten, steht Ihnen die Datei "index/[Link]" zur
Verfgung. So haben Sie die Mglichkeit, weitere Meta-Angaben anzugeben sowie weitere Stylesheets und
Javascriptdateien zu laden.
Einfhrung in das Block-System
Bitte achten Sie bei Ihren Anpassungen immer darauf, dass Sie das Standardtemplate "_default" von Shopware nicht
bearbeiten, da Ihre &Aumlnderungen beim nchsten Update wieder berschrieben werden knnen. Nutzen Sie hierzu das
Block-System, auf welchem die aktuelle Version von Shopware aufbaut, um Ihr Template updatefhig zu gestalten. Dies
bringt Ihnen den Vorteil, dass Sie die neuen Features von Shopware direkt nach der Freigabe des Updates nutzen knnen,
ohne dass Ihre Templateanpassungen verloren gehen.
Das Block-System ist eine Neuerung von Smarty 3, welche wir von Haus aus in Shopware 4.0 intensiv nutzen. Blcke sind
von Shopware vordefinierte Bereiche, wie zum Beispiel die Suche, der Sprachwechsel, der Breadcrumb, die Navigation
rechts sowie links, etc. im Template-Code, welche ber einen Namen angesprochen werden knnen. Hiermit haben Sie die
Mglichkeit, bestehende Bereiche (Blcke), welche im Standardtemplate definiert sind, zu berschreiben oder zu
erweitern. Dies hat den Vorteil, dass Sie nicht schon bei einer kleinen &Aumlnderung die komplette Datei duplizieren
mssen, sondern punktuelle Vernderungen oder Erweiterungen an beliebigen Stellen des Templates durchfhren knnen.
Vererbungen
In Shopware 4 hat sich das Vererbungssystem durch das neue Master-Template "_emotion" ein wenig gendert. Es gibt
jetzt zwei Wege der Vererbung von Templates.
Infografik - Template-Vererbung
Auf der linken Seite sehen Sie den neuen Weg der Template-Vererbung, wo das "_emotion"-Template als Master-Template
fungiert. Auf der rechten Seite sehen Sie das Verhalten der Template-Vererbung, wenn Ihr Template auf dem "_default"
-Template basiert.
Um das Blocksystem von Shopware nutzen zu knnen, mssen Sie aber vorher wissen, dass jetzt die Mglichkeit besteht,
Templates zu vererben. So knnen Sie zum Beispiel immer das Grundgerst des Shops ("index/[Link]") nutzen und
mssen nicht in jeden Bereich das komplette Grundgerst einbauen.
Ein Beispiel - Merkzettel:
Der Merkzettel in der Storefront (Vererbung)
Im oberen Screenshot sehen Sie den Merkzettelbereich der Storefront, eingefrbt in zwei Bereiche. Der orange Teil ist unser
Grundgerst, welches in der "index/[Link]" liegt und der blaue Teil ist der eigentliche Merkzettel.
Um dieses Ergebnis zu erreichen, mssen wir der Template-Engine mitteilen, dass wir das Grundgerst nutzen mchten.
Um dies zu bewerkstelligen, stellt uns Smarty 3 jetzt die Mglichkeit zu Verfgung, Templatedateien zu erben. Hierzu
verwenden Sie den extends-Befehl und geben im Attribut file nur noch den relativen Pfad der Templatedatei, von der Sie
erben wollen, an.
{extends file="frontend/index/[Link]"}
Code-Schnipsel - Templatevererbung
Tipp: Sie haben auch die Mglichkeit, den Pfad absolut anzugeben. Hier wird dann der Pfad nicht ausgehend vom aktuell
gewhlten Template angegeben, sondern vom Root-Verzeichnis Ihres Shops.
Damit erreichen Sie, dass Sie das Grundgerst mit all seinen Blcken zur Verfgung haben und knnen im weiteren Schritt
die Blcke berschreiben oder erweitern.
Blcke bearbeiten
In der nachfolgenden Beschreibung erklren wir Ihnen, wie Sie Blcke fr das Master-Template "_default" bearbeiten
knnen. Das gleiche Prinzip gilt aber auch fr das zweite Master-Template "_emotion".
Hinweis: Um Blcke in einem Template berschreiben zu knnen, ist es zwingend notwendig, dass Sie von einer
Templatedatei erben (meist das Grundgerst des Shops).
Die drei Hauptblcke der Storefront
Auf dem oberen Screenshot sehen Sie die drei Hauptblcke von Shopware. Die Vergabe der Blocknamen richtet sich nach
dem Bereich, wofr und an welcher Stelle (Datei) der Block im Template definiert ist. So tragen beispielsweise alle Blcke,
welche in der "index/[Link]" definiert sind, den Namen frontend_index_NAME DES BEREICHES.
Um jetzt einen der folgenden Blcke zu bearbeiten, mssen wir vom Grundgerst der Storefront erben und den Block
entweder berschreiben oder erweitern.
Beispiel:
Gehen wir mal davon aus, dass Sie gerade dabei sind die Startseite ("home/[Link]") in Ihrem Template zu bearbeiten,
mchten das Grundgerst der Storefront ("index/[Link]") erben und die mittlere Spalte (Block:
"frontend_index_content") ndern, dann wrde der Quellcode wie folgt aussehen
{* Erben des Grundgeruests *} {extends file=
"parent:frontend/index/[Link]"} {* Mittlere Spalte bearbeiten *} {
block name="frontend_index_content"} ... neuer Inhalt der mittleren
Spalte ... {/block}
Code-Schnipsel - Vererbung und Blcke berschreiben
Bitte beachten Sie beim oberen Code-Snippet die Verwendung von parent:, was automatisch das zu erbende
Master-Template auswhlt - je nachdem ob sich das erstellte Template von "_default" oder "_emotion" ableiten soll.
In diesem Beispiel erben wir das Grundgerst der Storefront und berschreiben den Block der mittleren Spalte -
frontend_index_content. Sie sind beim Vererben von Templatedateien natrlich nicht auf das Grundgerst der Storefront
begrenzt, sondern knnen auch jede andere Templatedatei vererben und den Inhalt der definierten Blcke bearbeiten.
Blcke berschreiben und erweitern
Sie haben in der neuen Templatebasis nicht nur die Mglichkeit, gesamte Blcke zu berschreiben, sondern knnen auch
Inhalt am Anfang oder am Ende eines Blockes einfgen, um beispielsweise weitere Artikelinformationen auszugeben.
Hierzu bietet Ihnen Smarty 3 die Mglichkeit, einen Parameter an den Blockaufruf anzufhren. Als Auswahlmglichkeit
haben Sie hier append (fgt den Inhalt am Ende des Blocks ein) sowie prepend (fgt den Inhalt am Anfang des Blocks ein)
zur Verfgung.
Beispiel - Block berschreiben:
Um einen Block ber das Blocksystem zu berschreiben, rufen wir einfach nur den Block auf und lassen den Inhalt des
Blocks in unserem abgeleiteten Template leer. Gehen wir mal davon aus, dass Sie auf der Detailseite gerne die linke Spalte
ausblenden wollen.
Um dies zu bewerkstelligen, mssen wir erst einen Ordner mit dem Namen "detail" erstellen und fgen hier eine Datei mit
dem Namen "[Link]" hinzu, wo wir die Templatedatei der Detailseite erben ("detail/[Link]"). Die linke Spalte ist im
Block "frontend_index_content_left" definiert, welchen wir jetzt berschreiben.
Hierzu rufen wir den Block ohne Parameter auf und lassen den Inhalt einfach leer.
{* Detailseite vom Mastertemplate erben *} {extends file=
"parent:frontend/detail/[Link]"} {* Linke Spalte ausblenden *} {
block name="frontend_index_content_left"}{/block}
Code-Schnipsel - Ausblenden der linken Spalte auf der Detailseite
prepend - Inhalt vor Block einfgen
Beispiel - prepend:
Gehen wir mal davon aus, dass Sie auf der Detailseite ber dem Artikelnamen einen weiteren Text ausgeben mchten.
Hierzu gibt es den Block frontend_detail_index_name, den Sie nutzen knnen, um jetzt eine Erweiterung innerhalb des
Blocks einzufgen.
Artikeldetailseite - Block "frontend_detail_index_name"
Um dies zu bewerkstelligen, mssen wir erst einen Ordner mit dem Namen "detail" erstellen und fgen hier eine Datei mit
dem Namen "[Link]" hinzu, wo wir die Templatedatei der Detailseite erben ('"detail/[Link]"). Dann erweitern wir
den Block "frontend_detail_index_name" mit angehngtem Parameter "prepend", so dass der Inhalt vor dem
eigentlichen Inhalt des Blocks, hier der Artikelname, erscheint.
{* Erben der Detailseite *} {extends file="frontend/detail/[Link]"}
{* Erweitern des Blocks *} {block name="frontend_detail_index_name"
prepend} <strong>Jetzt sparen!!!</strong> {/block}
Code-Schnipsel - Blcke erweitern (prepend)
Ergebnis - Block erweitern (prepend)
Wie diese Anpassung jetzt in der Storefront bzw. auf der Detailseite eines Artikels aussieht, knnen Sie dem rechten
Screenshot entnehmen. Sie sehen, dass unser Inhalt ("Jetzt sparen!!!") vor dem eigentlichen Inhalt des Blocks (der
Artikelname) ausgegeben wird. Folgendes haben wir hierzu getan:
Erben des Templates, wo Sie die Blcke bearbeiten mchten
Aufruf des Blocks mit einen Parameter um den Block zu erweitern
Zusammenfassung: Durch die Verwendung von Parametern
beim Aufruf eines Blocks haben Sie an jeder Stelle im
Template, wo Blcke definiert sind, die Mglichkeit, einen
Block zu erweitern oder zu berschreiben.
append - Inhalt nach Block einfgen
Beispiel - append:
Gehen wir mal davon aus, dass Sie auf der Detailseite rechts nach dem Men unter dem Warenkorb einen Twitter-Button
einbauen mchten. Das Men wird im Block "frontend_detail_index_actions" ausgegeben, welchen wir im weiteren
Schritt erweitern werden.
Artikeldetailseite - Block
"frontend_detail_index_actions"
Um dies zu bewerkstelligen, mssen wir erst einen Ordner mit dem Namen "detail" erstellen, und fgen hier eine Datei mit
dem Namen "[Link]" hinzu, wo wir die Templatedatei der Detailseite erben ('"detail/[Link]"). Dann erweitern wir
den Block "frontend_detail_index_actions" , diesmal mit dem angehngten Parameter "append", so dass der Inhalt nach
dem eigentlichen Inhalt des Blocks erscheint.
Den verwendeten Code fr den Twitter-Button finden Sie auf den "Resources"-Seiten von Twitter unter dem Punkt "Tweet
Button".
Dieser Button ist ein ganz normaler Link mit bestimmten Parametern sowie ein Javascript, was zustzlich eingefgt werden
muss.
{* Erben der Detailseite *} {extends file="frontend/detail/[Link]"}
{* Erweitern des Blocks *} {block name="frontend_detail_index_actions"
append} <a href="[Link] class="twitter-share-button"
data-count="horizontal" data-lang="de">Tweet</a> <script type=
"text/javascript" src="[Link]
{/block}
Code-Schnipsel - Blcke erweitern (append)
Ergebnis - Block erweitern (append)
Wie diese Anpassung jetzt in der Storefront Ihres Shops aussieht, knnen Sie dem rechten Screenshot entnehmen.
Sie sehen, dass unser Inhalt (der Twitter-Button) nach dem eigentlichen Inhalt des Blocks (das Artikelmen) ausgegeben
wird. Folgendes haben wir hierzu getan:
Erben des Templates, wo Sie die Blcke bearbeiten mchten
Aufruf des Blocks mit einen Parameter um den Block zu erweitern
Ausnahmen
In bestimmten Konstellationen kann es vorkommen, dass Sie templateseitig manche Blcke nicht berschreiben. Dieses
Problem tritt auf, wenn bestimmte Plugins einen Block komplett berschreiben, da diese in einer hheren Instanz laufen als
Ihr Template.
Die Reihenfolge von den Vererbungen in der Template-Engine sieht wie folgt aus:
1. plugins - Installierte Shopware-Plugins
2. _default - Standardtemplate bzw. Mastertemplate
3. _local - Abgeleitetes Template, welches lokale Anpassungen in allen Subtemplates vornimmt
4. Ihr Template - Abgeleitetes Template bzw. Subtemplate
Bei dem "_emotion"-Template sieht die Vererbung so aus:
1. plugins - Installierte Shopware-Plugins
2. _emotion - Standardtemplate bzw. Mastertemplate
3. _emotion_local - Abgeleitetes Template, welches lokale Anpassungen in allen Subtemplates vornimmt
4. Ihr Template - Abgeleitetes Template bzw. Subtemplate
Tipp: Sie haben die Mglichkeit, dieses Verhalten zu umgehen, indem Sie die Templatedatei des Plugins in Ihrem
abgeleiteten Template ersetzen. Hierzu dient der Ordner "plugins", wo Sie alle abgeleiteten Plugin-Templates ablegen
knnen.
Folgende Shopware-Plugins berschreiben einen kompletten Block:
AdvancedMenu - ersetzt die Kategorieauflistung ber der Suche durch ein Drop Down Men und berschreibt dazu den
Block "frontend_index_navigation_categories_top".
Zusammenfassung
Das Blocksystem, welches in der aktuellen Shopware Version verwendet wird, bietet Ihnen die Vorteile, dass Sie jetzt
punktuelle Vernderungen am HTML-Quellcode vornehmen knnen ohne die Updatefhigkeit Ihres Templates zu
gefhrden.
Hierzu bietet Ihnen Smarty 3 die Mglichkeiten, Blcke zu definieren, Templatedateien zu vererben sowie bestehende
Blcke zu bearbeiten.
Eine Auflistung der Befehle bzw. Parameter finden Sie hier:
extends - erbt von dem angegeben Template z.B. {extends file="frontend/index/[Link]"}
block - erstellt bzw. berschreibt einen Block z.B {block name='frontend_index_content'} ... Inhalt ...{/block}
append und prepend - Parameter um einen Block zu erweitern z.B. {block name='frontend_index_content'
append} ... Inhalt ...{/block}
Anpassungen durchfhren
Um Ihnen einen praxisnahen und schnellen Einstieg in das Templating unter Shopware 4 zu geben, haben wir einen Artikel
fr Sie erstellt, der Ihnen die wesentlichen Schritte kurz und knapp erlutert. Zudem finden Sie im Artikel das erstellte
Template als Download, damit Sie direkt eine Basis haben, auf die Sie aufsetzen knnen. Hier geht es zum Schnelleinstieg
Template Tutorial 4.0.0
Smarty-Plugins
In der aktuellen Shopware-Version stellen wir Ihnen mehrere Smarty-Plugins zur Verfgung, welche Ihnen den Umgang mit
Whrungen, Daten (Zeitangaben), Konfigurationen, Links sowie Pfadangaben im Template erleichtert. Im Folgenden finden
Sie alle bentigten Informationen, um diese Smarty-Plugins in Ihrem Template zu nutzen.
currency - Plugin
Das "currency"-Plugin kmmert sich global um die Darstellung der Preise und deren Formatierung im Shop. So haben Sie
die Mglichkeit, verschiedene vordefinierte Standardformatierungen anzuwenden und zu bestimmen, wo z.B. das
Whrungssymbol auftauchen soll.
Um das Plugin aufzurufen, nutzen Sie bitte folgende Syntax:
{* Syntax *} {[PREIS]|currency:[FORMATIERUNG]:[POSITION DER WAEHRUNG]}
{* Beispielaufruf - Ausgabe: 49,95 EUR *} {$[Link]|currency:
use_shortname:right}
Code-Schnipsel - "currency"-Syntax
Folgende Formatierungen stehen Ihnen hier zur Verfgung:
no_symbol - Preis ohne Whrungsangabe z.B. 49,95. Hier wird die Position nicht beachtet.
use_symbol - Preis mit Whrungssymbol z.B. 49,95
use_shortname - Preis mit Whrungsangabe als Kurzform z.B. 49,95 EUR
use_name - Preis mit Whrungsangabe als Langform z.B. 49,95 Euro
Folgende Positionen stehen Ihnen hier zur Verfgung:
left - Zeigt das Whrungssymbol links vom Preis an z.B. EUR 49,95
right - Zeigt das Whrungssymbol rechts vom Preis an z.B. 49,95 EUR
standard - Zeigt das Whrungssymbol an der Standardposition an, welche rechts ist z.B 49,95 EUR
Hinweis: Standardmig formatiert Shopware die Preise in der Storefront wie folgt:
{$[Link]|currency:use_symbol:right}.
Falls Sie an manchen Stellen im Shop eine andere Formatierung wnschen, knnen Sie durch dieses Plugin punktuell die
Formatierung ndern.
config - Plugin
Das "config"-Plugin dient dazu, die Konfiguration des Shops auszulesen. So haben Sie die Mglichkeit, auf die
verschiedensten Eigenschaften im Backend zu zugreifen und diese auszulesen.
Hierzu nutzen Sie bitte folgende Syntax:
{* Syntax *} {config name=[NAME DER EIGENSCHAFT]} {* Beispielaufruf
"Bewertung deaktiveren" *} {config name=VoteDisable}
Code-Schnipsel - "config"-Syntax
link - Plugin
Das "link"-Plugin hilft Ihnen bei der Angabe von Dateipfaden, um beispielsweise Bilder oder Stylesheets zu laden. Gehen
wir mal davon aus, dass Sie Ihren Shop in dem Unterverzeichnis "shopware" auf Ihrem Server (Domain -
"[Link] installiert haben und mchten jetzt gerne in Ihrem Template namens "my_template" ein
Stylesheet namens "my_styles.css" aus dem Ordner "frontend/_resources/styles" laden.
Ohne dieses Plugin wrde der Aufruf wie folgt aussehen:
<link rel="stylesheet" media="screen, projection" href=
"[Link]
s/styles/my_styles.css" />
Code-Schnipsel - normaler Aufruf eines Stylesheets
Durch die Verwendung des "link"-Plugins brauchen Sie den Pfad nicht mehr absolut anzugeben, sondern gehen einfach nur
vom ausgewhlten Template aus.
<link rel="stylesheet" media="screen, projection" href="{link
file='frontend/_resources/styles/my_styles.css'}" />
Code-Schnipsel - Aufruf eines Stylesheets per "link"-Plugin
Die Syntax des Plugins sieht wie folgt aus:
{* Syntax *} {link file="[PFAD ZUR DATEI]"}
Code-Schnipsel - "link"-Syntax
URL - Plugin
Das "URL"-Plugin baut in der gesamten Storefront die URLs zusammen und leitet auf den dementsprechenden Controller
und Action weiter, die Sie angegeben haben. Gehen wir jetzt mal davon aus, dass Sie einen Link haben, der auf den
Merkzettel leiten soll, dann wrde der Aufruf wie folgt aussehen:
{* Ein Link der auf den Merkzettel leitet *} <a href="{url
controller='note'}" title="Merkzettel aufrufen"> Merkzettel aufrufen </a>

Code-Schnipsel - Beispielaufruf des Merkzettels
Standardmig wird immer die "index"-Action aufgerufen. Wenn Sie jetzt aber beispielsweise die Sofortdownloads im
Kontobereich aufrufen mchten, dann msste dementsprechend die Action mit bergeben werden, welche aufgerufen
werden soll.
{* Ein Link der auf die Sofortdownloads leitet *} <a href="{url
controller='account' action='downloads'}" title="Sofortdownloads ffnen">
Sofortdownloads aufrufen </a>
Code-Schnipsel - Beispielaufruf der Sofortdownloads
Dazu haben Sie auch die Mglichkeit, an den Controller Parameter zu bergeben. Hierzu erweitern wir beispielsweise den
Aufruf der Sofortdownloads um den Parameter "sParam" mit den Wert "test".
{* Ein Link der auf die Sofortdownloads leitet *} <a href="{url
controller='account' action='downloads' sParam='test'}" title=
"Sofortdownloads mit Parameter ffnen"> Sofortdownloads mit Parameter
aufrufen </a>
Code-Schnipsel - Beispielaufruf der Sofortdownloads mit Parameter
Die Syntax des "url"-Plugins ist wie folgt:
{* Syntax *} {url controller='[CONTROLLERNAME]' action='[ACTIONNAME]' [
WEITERE PARAMETER='PARAMETERWERT']}
Code-Schnipsel - Syntax "url"-Plugin
Das Plugin baut auch automatisch die SEO-Links zusammen, wenn das dementsprechende Plugin installiert ist.
date - Plugin
Das "date"-Plugin dient dazu, Zeit- und Datumsangaben zu formatieren. Hierzu haben Sie die Mglichkeit, die
verschiedensten Formatierungen zu verwenden. Die Syntax des "date"-Plugins ist wie folgt:
{* Syntax *} {[WERT]|date:[FORMAT]:[TYP]}
Code-Schnipsel - Syntax "date"-Plugin
Das Plugin bietet folgende Formatierungstypen, welche auf dem Zend Framework basieren:
Date:
DATE_FULL - Vollstndiges Datum z.B. "Donnerstag, 4. November 2010"
DATE_LONG - Langes Datum z.B. "4. November 2010"
DATE_MEDIUM - Normales Datum z.B. "04.11.2010"
DATE_SHORT - Abgekrztes Datum z.B. "04.11.10"
Time:
TIME_FULL - Vollstndige Zeit z.B. "[Link] Europe/Berlin"
TIME_LONG - Lange Zeit z.B. "[Link] CET"
TIME_MEDIUM - Normale Zeit z.B. "[Link]"
TIME_SHORT - Abgekrzte Zeit z.B. "13:55"
Datetime:
DATETIME_FULL - Vollstndiges Datum mit Zeit z.B. "Donnerstag, 4. November 2010 [Link]
Europe/Berlin"
DATETIME_LONG - Langes Datum mit Zeit z.B. "4. November 2010 [Link] CET"
DATETIME_MEDIUM - Normales Datum mit Zeit z.B. "04.11.2010 [Link]"
DATETIME_SHORT - Abgekrztes Datum mit Zeit z.B. "04.11.10 13:55"
Sonstiges:
ISO_8601 - Datum laut ISO 8601 z.B. "2010-11-04T[Link]+01:00"
RFC_2822 - Datum laut RFC 2822 z.B. "Thu, 04 Nov 2010 [Link] +0100"
TIMESTAMP - UNIX Zeit z.B. "1288875352"
ATOM - Datum laut ATOM z.B. "2010-11-04T[Link]+01:00"
RSS - Datum fr RSS Feeds z.B. "Thu, 04 Nov 2010 [Link] +0100"
COOKIE - Datum fr Cookies z.B. "Thursday, 04-Nov-10 [Link] Europe/Berlin"
W3C - Datum fr HTML oder HTTP laut W3C z.B. "2010-11-04T[Link]+01:00"
Folgende Typen knnen fr das Plugin bestimmt werden:
ISO - verwendet das ISO Format zur Datumsformatierung
PHP - verwendet PHP's date()-Funktion zur Datumsformatierung
rewrite - Plugin
Das "rewrite"-Plugin dient zum Umschreiben von alten URLs, welche aus den vorherigen Shopware-Versionen bekannt
sind. Ein Beispiel hierfr wre die URL fr die Kategorieauflistung der Kategorie "Beispiele". In diesem Fall luft der Shop
auf der Domain "[Link] und die Kategorie "Beispiele" hat die ID "32":
Hinweis: Dieses Plugin dient nur dazu, Links umzubiegen, welche noch das alte URL-Format von Shopware aufweisen.
Alle weiteren URLs werden durch das "url"-Plugin umgebogen und brauchen nicht mehr per "rewrite"-Plugin bearbeitet zu
werden.
[Link]
Code-Schnipsel - Beispiel fr einen Aufruf einer Kategorieauflistung ohne Plugin
Durch die Verwendung dieses Smarty-Plugin wrde die URL der Kategorieauflistung wie folgt umgebogen:
[Link]
Code-Schnipsel - Beispiel fr einen Aufruf einer Kategorieauflistung mit Plugin
Als weiteren Parameter kann dem Smarty-Plugin ein Titel angegeben werden, der dann bei den alten SEO-Links in der URL
ausgegeben wird.
{* Syntax *} {"[Link]?sViewport=cat&sCategory=32"|rewrite:
"beispiele"} {* Ausgabe *} [Link]
Code-Schnipsel - Plugin Aufruf mit bergabe eines Parameters
action - Plugin
Das "action"-Plugin ist eine Neuheit in Shopware 4. Das Plugin wird dazu verwendet, sogenannte Widgets ins Template
einzubinden. Widgets sind eigenstndige Bestandteile der Storefront, wie zum Beispiel die neuen Einkaufswelten.
{* Syntax *} {action module=widgets controller=[CONTROLLER-NAME] action
=[CONTROLLER-ACTION] [[WEITERE PARAMETER]]} {* Beispielaufruf -
Topseller *} {action module=widgets controller=listing action=top_seller
sCategory=$[Link]}
Hierbei wird intern im System ein HTTP-Request ausgelst, was dazu fhrt, dass Widgets komplett dynamische Elemente
sind, die auch nicht gecacht werden.
FAQ
Welche Neuerung im Template gibt es seit Shopware 4?
In Sachen Template hat sich im Vergleich zu Shopware 3.5x einiges gendert. Im Folgenden die wichtigsten Punkte:
Widgets mit dem neuen Smarty-Plugin "action", was es ermglicht komplett unabhngige Elemente ins Template
einzuhngen. Mehr Informationen zum Thema finden Sie in dieser Dokumentation unter den Punkt Widgets und
den Punkt "action" - Plugin.
das neue Master-Template "_emotion", wodurch die Template-Vererbungshierarchie leicht verndert hat. Mehr
zum Thema Template-Vererbung.
Tablet-Optimierung der Call-To-Action Elemente und Slider
Woher wei ich, ob ein Template sich von "_emotion" oder von "_default" ableitet?
Das erkennen Sie am Namen des Templates. Alle Templates, die sich von "_emotion" ableiten haben als Prefix "emotion_".
Kann ich meine Templates auch fr den Shopware Community Store anbieten?
Ja, diese Mglichkeit ist gegeben. Wir haben zu diesem Zweck ein eigenes Tutorial geschrieben, welches Sie fr die
Konvertierung Ihres Templates verwenden knnen.
Ich besitze noch ein angepasstes Template von der Shopware Version 3.5.x. Kann ich
hier die neuen Einkaufswelten nutzen?
Ja, das ist mglich. Durch die Verwendung der Widgets wurden die Einkaufswelten als unabhngiges Element erstellt, so
dass sich diese auch im 3.5er Template einsetzen lassen. Mehr dazu lesen Sie im Tutorial "Die neuen Einkaufswelten im
Shopware 3.5 nutzen".
Bieten Sie auch einen Schnelleinstieg, damit man sich einen berblick ber das
Templating in Shopware verschaffen kann?
Wir bieten auch ein Tutorial "Schnelleinstieg Template Tutorial 4.0.0" an, welches Ihnen in wenigen Schritten aufzeigt, wie
Sie Ihr Template anpassen knnen.
Kann ich in meinem Template unterscheiden, welches Template verwendet wird?
Wir haben natrlich auch an diesen Fall gedacht. Sie knnen die Version des Templates fr den aktuellen Shop abfragen.
Dazu verwenden Sie folgendes Code-Snippet:
Shopware()->Shop()->getTemplate()->getVersion();
getVersion gibt Ihnen entweder 1 zurck, was bedeutet dass das aktuell gewhlte Template von "_default" abgeleitet
wurde oder 2 zurck, was bedeutet dass es sich um ein Template handelt, welches sich von "_emotion" ableitet.
Gibt es eine bersicht ber alle Template-Funktionen?
Ja, wir haben hierfr ein Shopware Template-Cheatsheet, welches Sie unter folgenden Link finden: Template Cheatsheet fr
Shopware 4
Scaffolding fr das Shopware 4 Template
Wir bieten fr das Shopware 4 Template die Mglichkeit an, die komplette Template-Struktur ber [Link] zu erstellen.
Zustzlich knnen Sie Ihr Javascript und Ihre Styles konkatinieren und komprimieren. Weitere Informationen finden Sie
hier:
Scaffolding in Shopware 4 Template