Sie sind auf Seite 1von 24
Templatedokumentation für Shopware 4.0 Das aktuelle Shopware 4.0 Standardtemplate INHALTSVERZEICHNIS 1 Vorwort 2

Templatedokumentation für Shopware 4.0

Templatedokumentation für Shopware 4.0 Das aktuelle Shopware 4.0 Standardtemplate INHALTSVERZEICHNIS 1 Vorwort 2

Das aktuelle Shopware 4.0 Standardtemplate

INHALTSVERZEICHNIS

1 Vorwort
1
Vorwort

2 Technische Informationen zur Templatebasis

3 Ordnerstruktur

4.1

4.1.1

Auflistung der einzelnen Bereiche der Storefront

Auflistung der einzelnen Bereiche der Storefront

4.2

6 Dateistruktur der Ordner

7 Einführung in das Block-System

7.1 Vererbungen

emotion"-Templates 6 Dateistruktur der Ordner 7 Einführung in das Block-System 7.1 Vererbungen 7.2 Blöcke bearbeiten

7.2 Blöcke bearbeiten

7.2.1

Blöcke überschreiben und erweitern

7.2.1 Blöcke überschreiben und erweitern 7.2.1.1 prepend - Inhalt vor Block einfügen 7.2.1.2 append - Inhalt
7.2.1.1 prepend - Inhalt vor Block einfügen 7.2.1.2 append - Inhalt nach Block einfügen 7.3
7.2.1.1
prepend - Inhalt vor Block einfügen
7.2.1.2
append - Inhalt nach Block einfügen
7.3
Ausnahmen
7.4
Zusammenfassung
8
Anpassungen durchführen
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 für 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 für das Shopware 4 Template

Vorwort

Begriffserklärung - 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 Präsentation 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 für 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 Währungen, Daten (Zeitangaben) sowie von Dateipfaden unterstützend zur Seite stehen. Diese Plugins werden Ihnen im späteren Verlauf der Dokumentation vorgestellt.

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 für Ihre Anpassungen stets ein neues Template-Verzeichnis oder nutzen Sie den Ordner "_local" bzw. "_emotion_local".

Ordner "_local" bzw. "_emotion_local" . Der "template"-Ordner Im Stammverzeichnis Ihres

Der "template"-Ordner

Im Stammverzeichnis Ihres Shops finden Sie einen Ordner namens "templates", welcher alle verfügbaren Shopware Templates beinhaltet. Sie können 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. Gerüst für 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" geändert. Das neue Template "_emotion" ist ein eigenständiges von "_default" abhängiges Template. Es fungiert wie ein eigenes Template, kann jedoch auch als Ausgangspunkt bzw. Gerüst für weitere Templates eingesetzt werden. Das Prinzip der neuen Struktur, sehen Sie im Abschnitt "Einführung in das Blocksystem".

Die Subtemplates beinhalten selbst meist keine eigenen Templatedateien oder nur ausgewählte Templatedateien, um punktuelle &Aumlnderungen am HTML-Quellcode vorzunehmen. So können 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 natürlich auch die Möglichkeit, Templates von vorherigen Shopware Version weiterhin zu nutzen. Bitte beachten Sie aber, dass hierzu die Template-Engine im Kompatibilitätsmodus läuft und Sie keine Plugins oder Features der aktuellen Templatebasis nutzen können.

Hinweis: Bitte beachten Sie, dass &Aumlnderungen im "Mastertemplate" die Updatefähigkeit Ihres Shops beeinträchtigen. Nutzen Sie deshalb das neue Blocksystem von Shopware, auf welches wir Abschnitt Einführung in das Blocksystem im Detail eingehen.

Einführung in das Blocksystem im Detail eingehen. Im Ordner "_default" befinden sich die Unterordner

Im Ordner "_default" befinden sich die Unterordner für die jeweiligen Bereiche von Shopware. "backend" beinhaltet alle Templates, welche für die Administrationsoberfläche verwendet werden.

Die Templates, welche unter "documents" abgelegt sind, werden für die PDF-Belegerstellung benötigt werden. Hier können 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 für Artikel, Blog, Kontobereich, usw.

"newsletter" beinhaltet alle relevanten Templates, welche für die Gestaltung eines persönlichen Newsletters benötigt 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

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, lädt Shopware alle Templatedateien aus dem Ordner "detail" (siehe Screenshot links) und zeigt diese dann in Ihrem Web-Browser an.

Nach diesem Verhalten lädt Shopware alle weiteren Bereiche Ihres Shops.

Ein weiteres Beispiel ist der Kontobereich. Wenn Sie in Ihrer Storefront auf den Punkt "Mein Konto" klicken, dann lädt 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

Auflistung der einzelnen Bereiche der Storefront _resources - Enthält alle Bilder, CSS- und JS Dateien account

_resources - Enthält alle Bilder, CSS- und JS Dateien account - Mein Kontobereich

(Bestellübersicht, Login,

blog - Templates für 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 für das Formularsystem home - Startseite index - Grundgerüst listing - Kategorieansicht newsletter - Newsletteranmeldung und -auflistung note - Merkzettel plugins - Templates für Plugins ticket - Registrierung search - Suchergebnisse sitemap - Template für 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.

bei der Erstellung von eigenen Templates beinhalten sollten. Die Datei "favicon.ico" ist ein 16x16 Pixel

Die Datei "favicon.ico" ist ein 16x16 Pixel großes Icon, welches meistens links neben der Adresszeile Ihres Browsers eingeblendet wird. Sie können dieses Icon beliebig ersetzen, um auch das kleinste Detail an Ihr Design anzupassen.

um auch das kleinste Detail an Ihr Design anzupassen. Beispiel für ein Favicon images : Der

Beispiel für ein Favicon

images:

Der Ordner "images" beinhaltet alle Bilder, die Shopware für die Storefront verwendet.

Dieser Ordner ist nochmals unterteilt in "arrows", "backgrounds", "buttons", "captcha", "icons" und "liveshopping". Bei der Erstellung eines eigenen Templates für 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 gehört zum einen "jquery-1.7.2.js", welche das Javascript Framework jQuery in Version 1.7.2 repräsentiert und zum anderen die "jquery.shopware.js", welches alle Javascript-Komponenten von Shopware beinhaltet. Im weiteren Verlauf der Dokumentation gehen wir im Detail auf diese Datei ein und erläutern die Konfigurations-Möglichkeiten der Komponenten.

PIE.htc:

Die Datei "PIE.htc" ist eine Besonderheit in diesem Ordner. Sie basiert auf dem Projekt CSS3Pie, welches eine CSS3 Implementierung im Internet Explorer 6-8 bereitstellt. Dies ermöglicht Ihnen die Nutzung der CSS3-Eigenschaften border-radius, box-shadow, border-image sowie die Verwendung von linearen Verläufen als Hintergrund für Elemente. Bitte beachten Sie, dass diese Implementierung gewisse Voraussetzungen hat, welche Sie in Ihren Stylesheets erfüllen müssen. Eine Auflistung der unterstützten 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 Möglichkeit, die Bibliothek wieder einzubinden.

styles:

Im Ordner "styles" finden Sie alle Stylesheets, welche Shopware für das Standardtemplate "_default" benötigt. Hier finden Sie die Dateien "colors.css", welche alle Farbwerte enthält, "enrichments.css", welche alle CSS3-Eigenschaften setzt, "framework.css", die das 960 Gridsystems, einen CSS-Reset und weitere allgemeingültige Klassen enthält, "ie6.css", welche die Darstellung im Internet Explorer 6 korrigiert, "plugins.css", welche als Sammelpool von CSS-Eigenschaften für spätere Shopware- und jQuery-Plugins dient, "print.css", welche eine korrekte Druckdarstellung garantiert und die "style.css", welche alle Layout- und Formatierungen des Standardtemplates enthält. Die Datei "style.css" ist die wichtigste Datei in diesem Ordner, da Sie alle benötigten Formatierungen in Shopware vornimmt.

Das "ie6.css"-Stylesheet steht nur im "_default"-Template zur Verfügung. Das neue Master-Template von Shopware unterstützt den Internet Explorer erst ab Version 7.

Hier folgt eine kurze Zusammenfassung der Stylesheets und deren Aufgabenbereiche

colors.css - enthält alle Farbwerte enrichments.css - setzt alle CSS3-Eigenschaften framework.css - 960 Gridsystem, CSS-Reset und allgemeingültige Klassen plugins.css - Sammelpool für CSS-Eigenschaften von Plugins (Shopware, jQuery) ie6.css - korrigiert die Darstellung im Internet Explorer 6 print.css - stellt eine Druckversion zur Verfügung style.css - setzt alle Formatierungen im gesamten Shop

"_emotion" - Das zweite Mastertemplate (Shopware 4)

Hinweis: Bitte beachten Sie, dass &Aumlnderungen im "Mastertemplate" die Updatefähigkeit Ihres Shops beeinträchtigt. Nutzen Sie deshalb das neue Blocksystem von Shopware, auf welches wir Abschnitt Einführung in das Blocksystem im Detail eingehen.

Der "_emotion"-Ordner

Das zweite Master-Template "_emotion" ist ein auf dem "_default" basierendes Template, welches dennoch als eigenständiges Master-Template fungiert. Man kann, wie bei dem "_default"-Template auch, dieses als Gerüst bzw. Ausgangspunkt für eigene Templates verwenden.

Aus Kompatibilitätsgründen haben wir uns dazu entschlossen ein weiteres Master-Template für Shopware 4 zu definieren. Falls Sie jetzt mit dem Bau eines neuen Template für Shopware 4 starten möchten, 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 für Ihr nächstes Template zu verwenden ist es erforderlich, dass Ihr Template eine Datei namens "info.json" beinhaltet. Diese Datei enthält alle Rahmeninformationen zum Template. Darunter zählt zum Beispiel der Autor oder die Lizenz des Templates. Ein Beispiel für eine Meta-Datei finden Sie im Folgenden:

{ "name": "Example Template", "author": "shopware AG", "license": "AGPL", "esi": true, "emotion": true }

info.json 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 gewünschten Namen.

Syntax:

emotion_[TEMPLATE-NAME]

Beispiel:

emotion_orange

Dateistruktur der Ordner

Die Dateistruktur der Templates hat sich im Vergleich zur vorherigen Version stark verändert. Sie finden jetzt in jedem Bereich der Storefront eine "index.tpl", die als Steuerungsdatei im Template für den jeweiligen Bereich fungiert. Sie wird als erstes aufgerufen und inkludiert weitere Dateien.

Eine besondere Rolle spielt hier der Ordner "index", welcher das komplette Grundgerüst 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

Die Grundstruktur der Storefront

Grundstruktur der Storefront:

Im Screenshot rechts sehen Sie die gerenderte Version der "index/index.tpl". Hier werden die folgenden Dateien mit folgenden Verwendungszwecken eingebunden:

header.tpl - HTML-Header des jeweiligen Bereiches index.tpl - Grundgerüst des jeweiligen Bereiches info.tpl - Sprach - und Währungswechsel + Warenkorbklapper categories_top.tpl - Listet alle Hauptkategorien component_banner_slider.tpl - Banner-Slider für Einkaufswelten component_banner.tpl - Grafik-Element für Einkaufswelten component_category_teaser.tpl - Kategorie-Teaser für Einkaufswelten component_manufacturer _slider.tpl - Hersteller-Slider für Einkaufswelten component_blog.tpl - Blog-Teaser für Einkaufswelten component_article_slider.tpl - Artikel-Slider für Einkaufswelten footer.tpl - Footer-Bereich des Shops footer_menu.tpl - Menü für statische Seiten

Tipp: Die "index/index.tpl" dient immer als Grundgerüst für alle Bereiche der Storefront. Wenn Sie grundlegende &Aumlnderungen am Grundgerüst des Shops durchführen möchten, dann müssen Sie diese Datei bearbeiten.

Um den Quellcode im HTML "head"-Bereich der Seite zu bearbeiten, steht Ihnen die Datei "index/header.tpl" zur

Verfügung. So haben Sie die Möglichkeit, weitere Meta-Angaben anzugeben sowie weitere Stylesheets und Javascriptdateien zu laden.

Einführung 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 nächsten Update wieder überschrieben werden können. Nutzen Sie hierzu das Block-System, auf welchem die aktuelle Version von Shopware aufbaut, um Ihr Template updatefähig zu gestalten. Dies bringt Ihnen den Vorteil, dass Sie die neuen Features von Shopware direkt nach der Freigabe des Updates nutzen können, 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. Blöcke 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 können. Hiermit haben Sie die Möglichkeit, bestehende Bereiche (Blöcke), 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 müssen, sondern punktuelle Veränderungen oder Erweiterungen an beliebigen Stellen des Templates durchführen können.

Vererbungen

In Shopware 4 hat sich das Vererbungssystem durch das neue Master-Template "_emotion" ein wenig geändert. 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

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 können, müssen Sie aber vorher wissen, dass jetzt die Möglichkeit besteht, Templates zu vererben. So können Sie zum Beispiel immer das Grundgerüst des Shops ("index/index.tpl") nutzen und müssen nicht in jeden Bereich das komplette Grundgerüst einbauen.

Ein Beispiel - Merkzettel:

Der Merkzettel in der Storefront (Vererbung) Im oberen Screenshot sehen Sie den Merkzettelbereich der Storefront,

Der Merkzettel in der Storefront (Vererbung)

Im oberen Screenshot sehen Sie den Merkzettelbereich der Storefront, eingefärbt in zwei Bereiche. Der orange Teil ist unser Grundgerüst, welches in der "index/index.tpl" liegt und der blaue Teil ist der eigentliche Merkzettel.

Um dieses Ergebnis zu erreichen, müssen wir der Template-Engine mitteilen, dass wir das Grundgerüst nutzen möchten.

Um dies zu bewerkstelligen, stellt uns Smarty 3 jetzt die Möglichkeit zu Verfügung, 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/index.tpl"}

Code-Schnipsel - Templatevererbung

Tipp: Sie haben auch die Möglichkeit, den Pfad absolut anzugeben. Hier wird dann der Pfad nicht ausgehend vom aktuell gewählten Template angegeben, sondern vom Root-Verzeichnis Ihres Shops.

Damit erreichen Sie, dass Sie das Grundgerüst mit all seinen Blöcken zur Verfügung haben und können im weiteren Schritt die Blöcke überschreiben oder erweitern.

Blöcke bearbeiten

In der nachfolgenden Beschreibung erklären wir Ihnen, wie Sie Blöcke für das Master-Template "_default" bearbeiten können. Das gleiche Prinzip gilt aber auch für das zweite Master-Template "_emotion".

Hinweis: Um Blöcke in einem Template überschreiben zu können, ist es zwingend notwendig, dass Sie von einer Templatedatei erben (meist das Grundgerüst des Shops).

Templatedatei erben (meist das Grundgerüst des Shops). Die drei Hauptblöcke der Storefront Auf dem oberen

Die drei Hauptblöcke der Storefront

Auf dem oberen Screenshot sehen Sie die drei Hauptblöcke von Shopware. Die Vergabe der Blocknamen richtet sich nach dem Bereich, wofür und an welcher Stelle (Datei) der Block im Template definiert ist. So tragen beispielsweise alle Blöcke, welche in der "index/index.tpl" definiert sind, den Namen frontend_index_NAME DES BEREICHES.

Um jetzt einen der folgenden Blöcke zu bearbeiten, müssen wir vom Grundgerüst der Storefront erben und den Block entweder überschreiben oder erweitern.

Beispiel:

Gehen wir mal davon aus, dass Sie gerade dabei sind die Startseite ("home/index.tpl") in Ihrem Template zu bearbeiten, möchten das Grundgerüst der Storefront ("index/index.tpl") erben und die mittlere Spalte (Block:

"frontend_index_content") ändern, dann würde der Quellcode wie folgt aussehen

{* Erben des Grundgeruests *} {extends file=

"parent:frontend/index/index.tpl"}

block name="frontend_index_content"}

Spalte

{/block}

{* Mittlere Spalte bearbeiten *} { neuer Inhalt der mittleren

Code-Schnipsel - Vererbung und Blöcke überschreiben

Bitte beachten Sie beim oberen Code-Snippet die Verwendung von parent:, was automatisch das zu erbende Master-Template auswählt - je nachdem ob sich das erstellte Template von "_default" oder "_emotion" ableiten soll.

In diesem Beispiel erben wir das Grundgerüst der Storefront und überschreiben den Block der mittleren Spalte - frontend_index_content. Sie sind beim Vererben von Templatedateien natürlich nicht auf das Grundgerüst der Storefront begrenzt, sondern können auch jede andere Templatedatei vererben und den Inhalt der definierten Blöcke bearbeiten.

Blöcke überschreiben und erweitern

Sie haben in der neuen Templatebasis nicht nur die Möglichkeit, gesamte Blöcke zu überschreiben, sondern können auch Inhalt am Anfang oder am Ende eines Blockes einfügen, um beispielsweise weitere Artikelinformationen auszugeben.

Hierzu bietet Ihnen Smarty 3 die Möglichkeit, einen Parameter an den Blockaufruf anzuführen. Als Auswahlmöglichkeit haben Sie hier append (fügt den Inhalt am Ende des Blocks ein) sowie prepend (fügt den Inhalt am Anfang des Blocks ein) zur Verfügung.

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, müssen wir erst einen Ordner mit dem Namen "detail" erstellen und fügen hier eine Datei mit dem Namen "index.tpl" hinzu, wo wir die Templatedatei der Detailseite erben ("detail/index.tpl"). 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/index.tpl"}

{* Linke Spalte ausblenden *} {

block name="frontend_index_content_left"}{/block}

Code-Schnipsel - Ausblenden der linken Spalte auf der Detailseite

prepend - Inhalt vor Block einfügen

Beispiel - prepend:

Gehen wir mal davon aus, dass Sie auf der Detailseite über dem Artikelnamen einen weiteren Text ausgeben möchten. Hierzu gibt es den Block frontend_detail_index_name, den Sie nutzen können, um jetzt eine Erweiterung innerhalb des Blocks einzufügen.

um jetzt eine Erweiterung innerhalb des Blocks einzufügen. Artikeldetailseite - Block

Artikeldetailseite - Block "frontend_detail_index_name"

Um dies zu bewerkstelligen, müssen wir erst einen Ordner mit dem Namen "detail" erstellen und fügen hier eine Datei mit dem Namen "index.tpl" hinzu, wo wir die Templatedatei der Detailseite erben ('"detail/index.tpl"). Dann erweitern wir den Block "frontend_detail_index_name" mit angehängtem Parameter "prepend", so dass der Inhalt vor dem eigentlichen Inhalt des Blocks, hier der Artikelname, erscheint.

{* Erben der Detailseite *} {extends file="frontend/detail/index.tpl"} {* Erweitern des Blocks *} {block name="frontend_detail_index_name" prepend} <strong>Jetzt sparen!!!</strong> {/block}

Code-Schnipsel - Blöcke erweitern (prepend)

{ / block } Code-Schnipsel - Blöcke erweitern (prepend) Ergebnis - Block erweitern (prepend) Wie diese

Ergebnis - Block erweitern (prepend)

Wie diese Anpassung jetzt in der Storefront bzw. auf der Detailseite eines Artikels aussieht, können 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 Blöcke bearbeiten möchten 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 Blöcke definiert sind, die Möglichkeit, einen Block zu erweitern oder zu überschreiben.

append - Inhalt nach Block einfügen

Beispiel - append:

Gehen wir mal davon aus, dass Sie auf der Detailseite rechts nach dem Menü unter dem Warenkorb einen Twitter-Button einbauen möchten. Das Menü wird im Block "frontend_detail_index_actions" ausgegeben, welchen wir im weiteren Schritt erweitern werden.

"frontend_detail_index_actions" Artikeldetailseite - Block Um dies zu bewerkstelligen, müssen wir erst einen

"frontend_detail_index_actions"

Artikeldetailseite - Block

Um dies zu bewerkstelligen, müssen wir erst einen Ordner mit dem Namen "detail" erstellen, und fügen hier eine Datei mit dem Namen "index.tpl" hinzu, wo wir die Templatedatei der Detailseite erben ('"detail/index.tpl"). Dann erweitern wir den Block "frontend_detail_index_actions" , diesmal mit dem angehängten Parameter "append", so dass der Inhalt nach dem eigentlichen Inhalt des Blocks erscheint.

Den verwendeten Code für 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 zusätzlich eingefügt werden muss.

{* Erben der Detailseite *} {extends file="frontend/detail/index.tpl"} {* Erweitern des Blocks *} {block name="frontend_detail_index_actions" append} <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="de">Tweet</a> <script type= "text/javascript" src="http://platform.twitter.com/widgets.js"></script> {/block}

Code-Schnipsel - Blöcke erweitern (append)

></ script > { / block } Code-Schnipsel - Blöcke erweitern (append)

Ergebnis - Block erweitern (append)

Wie diese Anpassung jetzt in der Storefront Ihres Shops aussieht, können 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 Blöcke bearbeiten möchten Aufruf des Blocks mit einen Parameter um den Block zu erweitern

Ausnahmen

In bestimmten Konstellationen kann es vorkommen, dass Sie templateseitig manche Blöcke nicht überschreiben. Dieses Problem tritt auf, wenn bestimmte Plugins einen Block komplett überschreiben, da diese in einer höheren 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 Möglichkeit, 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 können.

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 Veränderungen am HTML-Quellcode vornehmen können ohne die Updatefähigkeit Ihres Templates zu gefährden.

Hierzu bietet Ihnen Smarty 3 die Möglichkeiten, Blöcke zu definieren, Templatedateien zu vererben sowie bestehende Blöcke zu bearbeiten.

Eine Auflistung der Befehle bzw. Parameter finden Sie hier:

extends - erbt von dem angegeben Template z.B. {extends file="frontend/index/index.tpl"}

block - erstellt bzw. überschreibt einen Block z.B {block name='frontend_index_content'}

append und prepend - Parameter um einen Block zu erweitern z.B. {block name='frontend_index_content'

append}

Inhalt

{/block}

Inhalt

{/block}

Anpassungen durchführen

Um Ihnen einen praxisnahen und schnellen Einstieg in das Templating unter Shopware 4 zu geben, haben wir einen Artikel für Sie erstellt, der Ihnen die wesentlichen Schritte kurz und knapp erläutert. Zudem finden Sie im Artikel das erstellte Template als Download, damit Sie direkt eine Basis haben, auf die Sie aufsetzen können. Hier geht es zum Schnelleinstieg Template Tutorial 4.0.0

Smarty-Plugins

In der aktuellen Shopware-Version stellen wir Ihnen mehrere Smarty-Plugins zur Verfügung, welche Ihnen den Umgang mit Währungen, Daten (Zeitangaben), Konfigurationen, Links sowie Pfadangaben im Template erleichtert. Im Folgenden finden Sie alle benötigten Informationen, um diese Smarty-Plugins in Ihrem Template zu nutzen.

currency - Plugin

Das "currency"-Plugin kümmert sich global um die Darstellung der Preise und deren Formatierung im Shop. So haben Sie die Möglichkeit, verschiedene vordefinierte Standardformatierungen anzuwenden und zu bestimmen, wo z.B. das Währungssymbol auftauchen soll.

Um das Plugin aufzurufen, nutzen Sie bitte folgende Syntax:

{* Syntax *} {[PREIS]|currency:[FORMATIERUNG]:[POSITION DER WAEHRUNG]} {* Beispielaufruf - Ausgabe: 49,95 EUR *} {$sArticle.price|currency:

use_shortname:right}

Code-Schnipsel - "currency"-Syntax

Folgende Formatierungen stehen Ihnen hier zur Verfügung:

no_symbol - Preis ohne Währungsangabe z.B. 49,95. Hier wird die Position nicht beachtet. use_symbol - Preis mit Währungssymbol z.B. 49,95 € use_shortname - Preis mit Währungsangabe als Kurzform z.B. 49,95 EUR use_name - Preis mit Währungsangabe als Langform z.B. 49,95 Euro

Folgende Positionen stehen Ihnen hier zur Verfügung:

left - Zeigt das Währungssymbol links vom Preis an z.B. EUR 49,95 right - Zeigt das Währungssymbol rechts vom Preis an z.B. 49,95 EUR standard - Zeigt das Währungssymbol an der Standardposition an, welche rechts ist z.B 49,95 EUR

Hinweis: Standardmäßig formatiert Shopware die Preise in der Storefront wie folgt:

{$sArticle.price|currency:use_symbol:right}.

Falls Sie an manchen Stellen im Shop eine andere Formatierung wünschen, können Sie durch dieses Plugin punktuell die Formatierung ändern.

config - Plugin

Das "config"-Plugin dient dazu, die Konfiguration des Shops auszulesen. So haben Sie die Möglichkeit, auf die verschiedensten Eigenschaften im Backend zu zugreifen und diese auszulesen.

Hierzu nutzen Sie bitte folgende Syntax:

{* Syntax *} {config name=[NAME DER EIGENSCHAFT]} "Bewertung deaktiveren" *} {config name=VoteDisable}

{* Beispielaufruf

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 - "http://www.meinshop.de") installiert haben und möchten jetzt gerne in Ihrem Template namens "my_template" ein Stylesheet namens "my_styles.css" aus dem Ordner "frontend/_resources/styles" laden.

Ohne dieses Plugin würde der Aufruf wie folgt aussehen:

<link rel="stylesheet" media="screen, projection" href= "http://www.meinshop.de/shopware/templates/my_template/frontend/_resource 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 ausgewählten 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 würde 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

Standardmäßig wird immer die "index"-Action aufgerufen. Wenn Sie jetzt aber beispielsweise die Sofortdownloads im Kontobereich aufrufen möchten, dann müsste 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 Möglichkeit, 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 Möglichkeit, 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 - Vollständiges 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 - Abgekürztes Datum z.B. "04.11.10"

Time:

TIME_FULL - Vollständige Zeit z.B. "13:55:52 Europe/Berlin" TIME_LONG - Lange Zeit z.B. "13:55:52 CET" TIME_MEDIUM - Normale Zeit z.B. "13:55:52" TIME_SHORT - Abgekürzte Zeit z.B. "13:55"

Datetime:

DATETIME_FULL - Vollständiges Datum mit Zeit z.B. "Donnerstag, 4. November 2010 13:55:52 Europe/Berlin" DATETIME_LONG - Langes Datum mit Zeit z.B. "4. November 2010 13:55:52 CET" DATETIME_MEDIUM - Normales Datum mit Zeit z.B. "04.11.2010 13:55:52" DATETIME_SHORT - Abgekürztes Datum mit Zeit z.B. "04.11.10 13:55"

Sonstiges:

ISO_8601 - Datum laut ISO 8601 z.B. "2010-11-04T13:55:52+01:00" RFC_2822 - Datum laut RFC 2822 z.B. "Thu, 04 Nov 2010 13:55:52 +0100" TIMESTAMP - UNIX Zeit z.B. "1288875352" ATOM - Datum laut ATOM z.B. "2010-11-04T13:55:52+01:00" RSS - Datum für RSS Feeds z.B. "Thu, 04 Nov 2010 13:55:52 +0100" COOKIE - Datum für Cookies z.B. "Thursday, 04-Nov-10 13:55:52 Europe/Berlin" W3C - Datum für HTML oder HTTP laut W3C z.B. "2010-11-04T13:55:52+01:00"

Folgende Typen können für 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 hierfür wäre die URL für die Kategorieauflistung der Kategorie "Beispiele". In diesem Fall läuft der Shop auf der Domain "http://meinshop.de" 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.

http://meinshop.de/shopware.php?sViewport=cat&sCategory=32

Code-Schnipsel - Beispiel für einen Aufruf einer Kategorieauflistung ohne Plugin

Durch die Verwendung dieses Smarty-Plugin würde die URL der Kategorieauflistung wie folgt umgebogen:

{* Syntax *} {"shopware.php?sViewport=cat&sCategory=32"|rewrite:

"beispiele"}

{* Ausgabe *} http://meinshop.de/beispiele_cat_32.html

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 eigenständige Bestandteile der Storefront, wie zum Beispiel die neuen Einkaufswelten.

{* Syntax *} {action module=widgets controller=[CONTROLLER-NAME] action

=[CONTROLLER-ACTION] [[WEITERE PARAMETER]]}

Topseller *} {action module=widgets controller=listing action=top_seller sCategory=$sCategoryContent.id}

{* Beispielaufruf -

Hierbei wird intern im System ein HTTP-Request ausgelöst, was dazu führt, 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 geändert. Im Folgenden die wichtigsten Punkte:

Widgets mit dem neuen Smarty-Plugin "action", was es ermöglicht komplett unabhängige Elemente ins Template einzuhängen. 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 verändert 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 für den Shopware Community Store anbieten?

Ja, diese Möglichkeit ist gegeben. Wir haben zu diesem Zweck ein eigenes Tutorial geschrieben, welches Sie für die Konvertierung Ihres Templates verwenden können.

Ja, das ist möglich. Durch die Verwendung der Widgets wurden die Einkaufswelten als unabhängiges 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 können.

Kann ich in meinem Template unterscheiden, welches Template verwendet wird?

Wir haben natürlich auch an diesen Fall gedacht. Sie können die Version des Templates für den aktuellen Shop abfragen. Dazu verwenden Sie folgendes Code-Snippet:

Shopware()->Shop()->getTemplate()->getVersion();

getVersion gibt Ihnen entweder 1 zurück, was bedeutet dass das aktuell gewählte Template von "_default" abgeleitet wurde oder 2 zurück, 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 hierfür ein Shopware Template-Cheatsheet, welches Sie unter folgenden Link finden: Template Cheatsheet für Shopware 4

Scaffolding für das Shopware 4 Template

Wir bieten für das Shopware 4 Template die Möglichkeit an, die komplette Template-Struktur über grunt.js zu erstellen. Zusätzlich können Sie Ihr Javascript und Ihre Styles konkatinieren und komprimieren. Weitere Informationen finden Sie hier: