Templatedokumentation für 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 Einführung in das Block-System 7.1 Vererbungen 7.2 Blöcke bearbeiten

7.2.1 Blöcke überschreiben und erweitern 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 nurein "Gewand". Es dient dazu, Ihrem Shop ein ansprechendes Design zu geben, aber gibt Ihnen zudem die Kontrolle über dasAussehen und die Präsentation der Artikel und Informationen Ihres Shops.

In der folgenden Dokumentation finden Sie alle wesentlichen Bestandteile des aktuellen Shopware Templates. Wir gehenhier 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 Smartyvoraussetzen. 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 Templatesyntaxvermittelt werden.

Technische Informationen zur Templatebasis

Die aktuelle Templatebasis von Shopware basiert auf Smarty 3 RC4 als Template-Engine, jQuery 1.7.2 als JavascriptBibliothek 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 derDokumentation vorgestellt.

Ordnerstruktur

Bitte achten Sie bei allen Template-Anpassungen darauf, dass Sie niemals das "_default" oder das "_emotion" (für das ab

Shopware 4 mitgelieferte Mastertemplate) und die mitgelieferten Farbtemplates überschreiben oder Ihre &Aumlnderungenhier vornehmen. Diese werden bei einem Update auf eine neuere Version von Shopware überschrieben. Erstellen Sie fürIhre 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 verfügbaren ShopwareTemplates beinhaltet. Sie können in diesem Ordner alle angepassten Templates sowie Templates vorheriger ShopwareVersionen hinterlegen.

Der Ordner "_default" beinhaltet das sogenannte "Mastertemplate" von Shopware. Dieses Template dient alsAusgangspunkt 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 neueTemplate "_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, umpunktuelle &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 vorherigenShopware Version weiterhin zu nutzen. Bitte beachten Sie aber, dass hierzudie Template-Engine im Kompatibilitätsmodus läuft und Sie keine Pluginsoder Features der aktuellen Templatebasis nutzen können.

"_default" - Das Mastertemplate

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

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

Die Templates, welche unter "documents" abgelegt sind, werden für die PDF-Belegerstellung benötigt werden. Hierkö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ötigtwerden.

Ordner: "frontend"

Im Ordner "frontend" finden Sie alle Templatedateien der Storefront. Die Ordner, die sich unter "frontend" befinden, sindjeweils nach einem Bereich der Storefront benannt.

BeispielGehen 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ädtShopware alle Templatedateien aus dem Ordner "account". Im Folgenden finden Sie alle Bereiche der Storefront vonShopware und deren Aufgabenbereiche.

Auflistung der einzelnen Bereiche der Storefront

_resources - Enthält alle Bilder, CSS- undJS 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 nichtgefunden, ...) 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 zurWeiterempfehlung 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 Strukturwieder, welche Sie auch bei der Erstellung von eigenen Templates beinhalten sollten.

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

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 wirdempfohlen 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 imDetail 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 CSS3Implementierung im Internet Explorer 6-8 bereitstellt. Dies ermöglicht Ihnen die Nutzung der CSS3-Eigenschaftenborder-radius, box-shadow, border-image sowie die Verwendung von linearen Verläufen als Hintergrund fürElemente. Bitte beachten Sie, dass diese Implementierung gewisse Voraussetzungen hat, welche Sie in Ihren Stylesheetserfü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 angewiesensind, 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. Hierfinden Sie die Dateien "colors.css", welche alle Farbwerte enthält, "enrichments.css", welche alle CSS3-Eigenschaftensetzt, "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 vonCSS-Eigenschaften für spätere Shopware- und jQuery-Plugins dient, "print.css", welche eine korrekte Druckdarstellunggarantiert 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 Shopwareunterstü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 imDetail eingehen.

Der "_emotion"-Ordner

Das zweite Master-Template "_emotion" ist ein auf dem "_default" basierendes Template, welches dennoch alseigenstä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 Autoroder 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 dasTemplate-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 desVerzeichnisses 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 jedemBereich der Storefront eine "index.tpl", die als Steuerungsdatei im Template für den jeweiligen Bereich fungiert. Sie wirdals erstes aufgerufen und inkludiert weitere Dateien.

Eine besondere Rolle spielt hier der Ordner "index", welcher das komplette Grundgerüst von der Storefront beinhaltet undinitialisiert. Hier werden der "head"-Bereich definiert sowie die grundlegenden Elemente wie die Suche, der Breadcrumboder der Sprachwechsel eingebunden.

Die Grundstruktur der Storefront

Grundstruktur der Storefront:

Im Screenshot rechts sehen Sie die gerenderte Version der "index/index.tpl". Hier werden die folgenden Dateien mitfolgenden 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 undJavascriptdateien zu laden.

Einführung in das Block-System

Bitte achten Sie bei Ihren Anpassungen immer darauf, dass Sie das Standardtemplate "_default" von Shopware nichtbearbeiten, da Ihre &Aumlnderungen beim nächsten Update wieder überschrieben werden können. Nutzen Sie hierzu dasBlock-System, auf welchem die aktuelle Version von Shopware aufbaut, um Ihr Template updatefähig zu gestalten. Diesbringt 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 sindvon Shopware vordefinierte Bereiche, wie zum Beispiel die Suche, der Sprachwechsel, der Breadcrumb, die Navigationrechts sowie links, etc. im Template-Code, welche über einen Namen angesprochen werden können. Hiermit haben Sie dieMöglichkeit, bestehende Bereiche (Blöcke), welche im Standardtemplate definiert sind, zu überschreiben oder zuerweitern. Dies hat den Vorteil, dass Sie nicht schon bei einer kleinen &Aumlnderung die komplette Datei duplizierenmü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 gibtjetzt 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-Templatefungiert. 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 undmü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, eingefärbt in zwei Bereiche. Der orange Teil ist unserGrundgerü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. Hierzuverwenden Sie den extends-Befehl und geben im Attribut file nur noch den relativen Pfad der Templatedatei, von der Sieerben 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 aktuellgewä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 Schrittdie 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" bearbeitenkö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 einerTemplatedatei erben (meist das Grundgerüst des Shops).

Die drei Hauptblöcke der Storefront

Auf dem oberen Screenshot sehen Sie die drei Hauptblöcke von Shopware. Die Vergabe der Blocknamen richtet sich nachdem 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 Blockentweder ü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"} {* Mittlere Spalte bearbeiten *} {block name="frontend_index_content"} ... neuer Inhalt der mittlerenSpalte ... {/block}

Code-Schnipsel - Vererbung und Blöcke überschreiben

Bitte beachten Sie beim oberen Code-Snippet die Verwendung von parent:, was automatisch das zu erbendeMaster-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 Storefrontbegrenzt, 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 auchInhalt 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öglichkeithaben 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 desBlocks in unserem abgeleiteten Template leer. Gehen wir mal davon aus, dass Sie auf der Detailseite gerne die linke Spalteausblenden wollen.

Um dies zu bewerkstelligen, müssen wir erst einen Ordner mit dem Namen "detail" erstellen und fügen hier eine Datei mitdem Namen "index.tpl" hinzu, wo wir die Templatedatei der Detailseite erben ("detail/index.tpl"). Die linke Spalte ist imBlock "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 desBlocks einzufügen.

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 mitdem Namen "index.tpl" hinzu, wo wir die Templatedatei der Detailseite erben ('"detail/index.tpl"). Dann erweitern wirden Block "frontend_detail_index_name" mit angehängtem Parameter "prepend", so dass der Inhalt vor demeigentlichen 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)

Ergebnis - Block erweitern (prepend)

Wie diese Anpassung jetzt in der Storefront bzw. auf der Detailseite eines Artikels aussieht, können Sie dem rechtenScreenshot entnehmen. Sie sehen, dass unser Inhalt ("Jetzt sparen!!!") vor dem eigentlichen Inhalt des Blocks (derArtikelname) ausgegeben wird. Folgendes haben wir hierzu getan:

Erben des Templates, wo Sie die Blöcke bearbeiten möchtenAufruf des Blocks mit einen Parameter um den Block zu erweitern

Zusammenfassung: Durch die Verwendung von Parameternbeim Aufruf eines Blocks haben Sie an jeder Stelle imTemplate, wo Blöcke definiert sind, die Möglichkeit, einenBlock 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-Buttoneinbauen möchten. Das Menü wird im Block "frontend_detail_index_actions" ausgegeben, welchen wir im weiterenSchritt erweitern werden.

Artikeldetailseite - Block"frontend_detail_index_actions"

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

Den verwendeten Code für den Twitter-Button finden Sie auf den "Resources"-Seiten von Twitter unter dem Punkt "TweetButton".

Dieser Button ist ein ganz normaler Link mit bestimmten Parametern sowie ein Javascript, was zusätzlich eingefügt werdenmuss.

{* 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)

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ü) ausgegebenwird. Folgendes haben wir hierzu getan:

Erben des Templates, wo Sie die Blöcke bearbeiten möchtenAufruf 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. DiesesProblem tritt auf, wenn bestimmte Plugins einen Block komplett überschreiben, da diese in einer höheren Instanz laufen alsIhr 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 Ihremabgeleiteten Template ersetzen. Hierzu dient der Ordner "plugins", wo Sie alle abgeleiteten Plugin-Templates ablegenkönnen.

Folgende Shopware-Plugins überschreiben einen kompletten Block:

AdvancedMenu - ersetzt die Kategorieauflistung über der Suche durch ein Drop Down Menü und überschreibt dazu denBlock "frontend_index_navigation_categories_top".

Zusammenfassung

Das Blocksystem, welches in der aktuellen Shopware Version verwendet wird, bietet Ihnen die Vorteile, dass Sie jetztpunktuelle Veränderungen am HTML-Quellcode vornehmen können ohne die Updatefähigkeit Ihres Templates zugefährden.

Hierzu bietet Ihnen Smarty 3 die Möglichkeiten, Blöcke zu definieren, Templatedateien zu vererben sowie bestehendeBlö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'} ... Inhalt ...{/block} append und prepend - Parameter um einen Block zu erweitern z.B. {block name='frontend_index_content'append} ... Inhalt ...{/block}

Anpassungen durchführen

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

Smarty-Plugins

In der aktuellen Shopware-Version stellen wir Ihnen mehrere Smarty-Plugins zur Verfügung, welche Ihnen den Umgang mitWährungen, Daten (Zeitangaben), Konfigurationen, Links sowie Pfadangaben im Template erleichtert. Im Folgenden findenSie 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 Siedie Möglichkeit, verschiedene vordefinierte Standardformatierungen anzuwenden und zu bestimmen, wo z.B. dasWä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 dieFormatierung ändern.

config - Plugin

Das "config"-Plugin dient dazu, die Konfiguration des Shops auszulesen. So haben Sie die Möglichkeit, auf dieverschiedensten 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. Gehenwir 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" einStylesheet 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/_resources/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 nurvom ausgewählten Template aus.

<link rel="stylesheet" media="screen, projection" href="{linkfile='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 Controllerund Action weiter, die Sie angegeben haben. Gehen wir jetzt mal davon aus, dass Sie einen Link haben, der auf denMerkzettel leiten soll, dann würde der Aufruf wie folgt aussehen:

{* Ein Link der auf den Merkzettel leitet *} <a href="{urlcontroller='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 imKontobereich aufrufen möchten, dann müsste dementsprechend die Action mit übergeben werden, welche aufgerufenwerden soll.

{* Ein Link der auf die Sofortdownloads leitet *} <a href="{urlcontroller='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 denAufruf der Sofortdownloads um den Parameter "sParam" mit den Wert "test".

{* Ein Link der auf die Sofortdownloads leitet *} <a href="{urlcontroller='account' action='downloads' sParam='test'}" title="Sofortdownloads mit Parameter öffnen"> Sofortdownloads mit Parameteraufrufen </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, dieverschiedensten 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:52Europe/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 bekanntsind. Ein Beispiel hierfür wäre die URL für die Kategorieauflistung der Kategorie "Beispiele". In diesem Fall läuft der Shopauf 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 zuwerden.

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:

http://meinshop.de/beispiele

Code-Schnipsel - Beispiel für 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 URLausgegeben wird.

{* 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 Templateeinzubinden. 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]]} {* Beispielaufruf -Topseller *} {action module=widgets controller=listing action=top_sellersCategory=$sCategoryContent.id}

Hierbei wird intern im System ein HTTP-Request ausgelöst, was dazu führt, dass Widgets komplett dynamische Elementesind, 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 Templateeinzuhängen. Mehr Informationen zum Thema finden Sie in dieser Dokumentation unter den Punkt Widgets undden Punkt "action" - Plugin. das neue Master-Template "_emotion", wodurch die Template-Vererbungshierarchie leicht verändert hat. Mehrzum 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 dieKonvertierung Ihres Templates verwenden können.

Ich besitze noch ein angepasstes Template von der Shopware Version 3.5.x. Kann ichhier die neuen Einkaufswelten nutzen?

Ja, das ist möglich. Durch die Verwendung der Widgets wurden die Einkaufswelten als unabhängiges Element erstellt, sodass sich diese auch im 3.5er Template einsetzen lassen. Mehr dazu lesen Sie im Tutorial "Die neuen Einkaufswelten imShopware 3.5 nutzen".

Bieten Sie auch einen Schnelleinstieg, damit man sich einen Überblick über dasTemplating in Shopware verschaffen kann?

Wir bieten auch ein Tutorial "Schnelleinstieg Template Tutorial 4.0.0" an, welches Ihnen in wenigen Schritten aufzeigt, wieSie 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" abgeleitetwurde 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ürShopware 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 Siehier:

Scaffolding in Shopware 4 Template