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 Dokumenation von Smarty finden Sie auf der Seite des Projektes, wo Ihnen die Grundlagen der Templatesyntax vermittelt wird.

Die aktuelle Templatebasis von Shopware basiert auf Smarty 3 RC4 als Template-Engine, jQuery 1.4.2 als Javascript Bibiothek und einer angepassten Version des 960 Gridsystem als CSS Layout-Framework.

Dazu wurden mehrere Smarty Plugins von uns entwickelt, welches 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 Dokumenation vorgestellt.

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

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 einhalten sollten.

Die Datei "favicon.ico" ist ein 16x16 Pixel großes Icon, welches meistens links neben der Adresszeile Ihres Browser eingeblendet 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 wird empfohlen den Standard beizubehalten.

javascript:
Im Ordner "javascript" befinden sich alle Javascript Dateien von Shopware. Hierzu gehört zum einen "jquery-1.4.2.js", welche das Javascript Framework jQuery in Version 1.4.2 repräsentiert und zum anderen die "jquery.shopware.js", welche 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 diesen 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.

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 Gridsystem, einen CSS-Reset und weitere allgemein gültigen 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 "styles.css", welche alle Layout- und Formatierungen des Standardtemplates enthält. Die Datei "style.css" ist die wichtigste Datei in diesen Ordner, da Sie alle benötigten Formatierung in Shopware vornimmt.

Hier folgt eine kurze Zusammenfassung der Stylesheets und deren Aufgabenbereich

• colors.css - enthält alle Farbwerte
• enrichments.css - setzt alle CSS3-Eigenschaften
• framework.css - 960 Gridsystem, CSS-Reset und allgemein gü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

Die Dateistrukur der Templates hat sich 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 besonderte 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.

Das Block-System ist eine Neuerung von Smarty 3, welche wir von Haus aus in Shopware 3.5 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 bei einer kleinen Änderungen die komplette Datei duplizieren müssen, sondern können punktuelle Veränderungen oder Erweiterungen an beliebigen Stellen des Templates durchführen.

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:

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"}
 

Auf den 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 Ihren 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="frontend/index/index.tpl"}
 
{* Mittlere Spalte bearbeiten *}
{block name="frontend_index_content"}
	... neuer Inhalt der mittleren Spalte ...
{/block}
 

In diesen 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.

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 unseren 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 lassen rufen wir den Block ohne Parameter auf und lassen den Inhalt einfach leer.

 
{* Detailseite vom Mastertemplate erben *}
{extends file="../_default/frontend/detail/index.tpl"}
 
{* Linke Spalte ausblenden *}
{block name="frontend_index_content_left"}{/block}
 

Beispiel - prepend:

Gehen wir mal davon aus, dass Sie auf der Detailseite über den 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 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ängten 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}
 

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" ausgeben, welchen wir im weiteren Schritt erweitern werden.

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" , dieses mal 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}
 

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. _default - Standardtemplate bzw. Mastertemplate
• 2. _local - Abgeleitetes Template, welches lokale Anpassungen in allen Subtemplates vornimmt
• 3. Ihr Template - Abgeleitetes Template bzw. Subtemplate
• 4. plugins - Installierte Shopware-Plugins

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".

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'} ... Inhalt ...{/block}
• append und prepend - Parameter um einen Block zu erweitern z.B. {block name='frontend_index_content' append} ... Inhalt ...{/block}

Um Ihnen den Umgang mit dem Block-System und der Templatevererbung näher zu bringen, werden wir jetzt unsere erste Anpassung Schritt für Schritt durchführen. Unser Ziel ist es Ihnen den Arbeitsablauf bei der Templateentwicklung näher zu bringen und Ihnen zu zeigen wie Sie auf einfache Art und Weise Elemente wie die Suche, Navigation oder Breadcrumb ausblenden oder bearbeiten können.

Folgende Schritte werden wir jetzt durchführen:

• 1. Ordnerstruktur schaffen
• 2. Template ableiten
• 3. Blöcke bearbeiten

Um ein neues Template zu erstellen, benötigen wir zu aller erst einen Ordner, welcher unser Template repräsentiert. Dieses Template wird ein Subtemplate, sprich eine abgeleitete Version des Mastertemplates.

Hierzu legen im Ordner "templates", welcher sich im Shop-Verzeichnis befinden, einen neuen Ordner an. In unseren Fall nennen dieses Ordner "my_template".

Da sich unsere Änderungen nur auf Storefront des Shops beziehen, brauchen wir noch einen Unterordner unter "my_template" mit dem Namen "frontend".

Sie können sich auch alternativ die leere Templatestruktur aus den Downloadbereich dieser Dokumentation herunterladen und diese Struktur als Grundlage für Ihr Template verwenden.

Um jetzt zum Beispiel die obere Kategorieauflistung auszublenden zu können, müssen wir vorweg erst einmal schauen, wo die Kategorieauflistung eingebunden bzw. definiert wird und ob hier ein Block zur Verfügung steht, welcher wir bearbeiten können. Hierzu wechseln wir in das Mastertemplate "_default" und schauen uns das Grundgerüst der Storefront in der Datei "index/index.tpl" an.

Hier sehen wir dass in Zeile 38 bis 41 der Sprachwechsel im Block "frontend_index_navigation_categories_top" definiert wurde:

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

Um jetzt diesen Block zu bearbeiten, wechseln wir wieder in unser Template "my_template" und erstellen einen Ordner, welcher als Namen den Bereich trägt, wo wir den Block gefunden haben. In diesen Fall ist dies der Ordner "index", welcher wir jetzt auch anlegen.

Als nächstes legen wir in unseren Template die Datei an, wo wir den Block gefunden haben. In diesen Fall ist dies die "index.tpl", welche wir in den Ordner "index" erstellen.

Jetzt können wir in unserer "index/index.tpl" die Templatedatei des Mastertemplates "_default" erben und dann den Block bearbeiten, welchen wir uns gerade rausgesucht haben.

Hierzu bietet, wie bereits erwähnt, Smarty uns den extends-Befehl. Dieser sorgt dafür dass wir in unserer Templatedatei alle Blöcke des vererbten Templatedatei zur Verfügung haben.

 
{* Grundgeruest vom Mastertemplate erben *}
{extends file="../_default/frontend/index/index.tpl"}
 

Um jetzt den Sprachwechsel zu bearbeiten bzw. komplett auszubauen rufen wir den Block auf, wo der Sprachwechsel eingebunden wird und lassen diesen Block komplett leer. Dadurch erreichen wir dass in unseren Template "my_template" der Sprachwechsel nicht mehr eingebunden wird.

 
{* Block der oberen Kategorieauflistung leeren *}
{block name="frontend_index_navigation_categories_top"}{/block}
 

Die komplette "my_template/frontend/index/index.tpl" sollte jetzt wie folgt aussehen:

 
{* Grundgeruest vom Mastertemplate erben *}
{extends file="../_default/frontend/index/index.tpl"}
 
{* Block der oberen Kategorieauflistung leeren *}
{block name="frontend_index_navigation_categories_top"}{/block}
 

Genauso können wir mit allen anderen Teilen des Templates arbeiten um beispielsweise die linke Spalte auf der Detailseite auszublenden oder im Kontobereich die Funktion Sofortdownloads ausbauen.

Möchten wir jetzt aber zum Beispiel die linke Spalte der Storefront bearbeiten um beispielsweise weitere Informationen auszugeben, dann ist es aber nicht sinnvoll wie im oberen Beispiel den kompletten Block zu überschreiben.

Hierzu bietet das Blocksystem, wie bereits erwähnt, die Möglichkeit Parameter beim Aufruf des Blocks anzuhängen. Sie haben einerseits die Möglichkeit einen Inhalt vor dem Block auszugeben (prepend) oder einen Inhalt nach dem Block auszugeben (append).

Beispiel - Die linke Spalte bearbeiten:

Im folgenden möchten wir in der linken Spalte der Storefront ein Bild ausgeben.

Als Erstes suchen wir uns wieder den Block aus dem Mastertemplate "_default", welcher für unsere Anpassungen am Besten geeignet ist. Hierzu wechseln wir wieder ins Mastertemplate in die Datei "_default/frontend/index/index.tpl".

Hier sehen wir dass die linke Spalte in Zeile 81 bis 84 im Block "frontend_index_content_left" definiert ist.

 
...
 
{* Content top container *}
{block name="frontend_index_content_top"}{/block}
 
{* Sidebar left *}
{block name='frontend_index_content_left'}
	{include file='frontend/index/left.tpl'}
{/block}
 
{* Main content *}
{block name='frontend_index_content'}{/block}
 
{* Sidebar right *}
{block name='frontend_index_content_right'}{/block}
 
...
 

Das Bild, welches wir verwenden möchten, befindet unter "my_template/frontend/_resources/images" und trägt den Namen "doku.jpg". Um jetzt das Bild am Ende des Blocks einzufügen nutzen wir den Parameter "append" und das Smarty-Plugin "link". Diese Änderungen führen wir in der gleichen Datei aus, wo wir auch den Sprachwechsel ausgebaut haben. In diesen Fall ist es die "my_template/frontend/index/index.tpl".

 
{* Erweitern der linken Spalte *}
{block name="frontend_index_content_left" append}
    <img src="{link file='frontend/_resources/images/doku.jpg'}"
         alt="Ein Bild" />
{/block}
 

Die komplette Datei "index/index.tpl" sollte jetzt in Ihren Template wie folgt aussehen:

 
{* Grundgeruest vom Mastertemplate erben *}
{extends file="../_default/frontend/index/index.tpl"}
 
{* Block des Sprachwechsels leeren *}
{block name="frontend_index_actions"}{/block}
 
{* Erweitern der linken Spalte *}
{block name="frontend_index_content_left" append}
    <img src="{link file='frontend/_resources/images/doku.jpg'}"
         alt="Ein Bild" />
{/block}
 

Wie Sie sehen ist das Anpassen der Templates klar strukturiert und es besteht ein klarer Workflow bei der Erstellung von Templates. Hier die wichtigsten Punkte:

• 1. Ordnerstruktur schaffen
• 2. Block aus dem Mastertemplate "_default" suchen und notieren oder in die Zwischenablage kopieren
• 3. Datei anlegen, welche als Namen den Dateinamen der Datei trägt, wo Sie den Block gefunden haben, welchen Sie bearbeiten möchten
• 3. Das Template ableiten, wo Sie den benötigten Block gefunden haben - "extends"
• 4. Block im abgeleiteten Template ersetzen oder bearbeiten - "append" oder "prepend"

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 Standardformatierung 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}
 

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

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]}
 
{* Beispielaufruf "Bewertung deaktiveren" *}
{config name=VoteDisable}
 

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 Ihren Server (Domain - "http://www.meinshop.de") installiert haben und möchten jetzt gerne in Ihren 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/_resources/styles/my_styles.css" />
 

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'}" />
 

Die Syntax des Plugins sieht wie folgt aus:

 
{* Syntax *}
{link file="[PFAD ZUR DATEI]"}
 

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>
 

Standardmäßig wird immer die "index"-Action aufgerufen. Wenn Sie jetzt aber beispielsweise die Sofortdownloads im Kontobereich aufrufen möchten, dann müsse dementsprechend die Action mit übergeben, welche aufgerufen werden soll.

 
{* Ein Link der auf die Sofortdownloads leitet *}
<a href="{url controller='account' action='downloads'}" title="Sofortdownloads öffnen">
	Sofortdownloads aufrufen
</a>
 

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>
 

Die Syntax des "url"-Plugins ist wie folgt:

 
{* Syntax *}
{url controller='[CONTROLLERNAME]' action='[ACTIONNAME]' [WEITERE PARAMETER='PARAMETERWERT']}
 

Das Plugin baut auch automatisch die SEO-Links zusammen, wenn das dementsprechende Plugin installiert ist.

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]}
 

Das Plugin bietet folgende Formatierungstypen, welche auf den 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

Das "rewrite"-Plugin dient zum Umschreiben von alten URLs, welche aus den vorherigen Shopware Versionen bekannt sind. Ein Beispiel hierfür wäre die URI für die Kategorieauflistung der Kategorie "Beispiele". In diesen Fall läuft der Shop auf der Domain "http://meinshop.de" und die Kategorie "Beispiele" hat die ID "32":

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

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

 
http://meinshop.de/beispiele
 

Als weiteren Parameter kann dem Smarty-Plugin ein Titel angeben werden, der dann bei den alten SEO-Links in der URL ausgegeben wird.

 
{* Syntax *}
{"shopware.php?sViewport=cat&sCategory=32"|rewrite:"beispiele"}
 
{* Ausgabe *}
http://meinshop.de/beispiele_cat_32.html