Wie bereits in älteren Shopware Versionen ist die Ordnerstruktur sehr klar gegliedert. Alle Anpassungen des Templates werden im Ordner "templates" vorgenommen, welchen Sie direkt im root-Verzeichnis Ihres Shops vorfinden werden.

Die nummerierten Unterordner dieses Verzeichnisses enthalten die einzeln Templates. (Default: 0-21)

Jedes dieser Templateverzeichnisse ist standardmäßig unterteilt in zwei weitere Ordner (de & en). Diese Ordner werden für Subshops genutzt (Default: de = deutscher Hauptshop , en = englische Shopversion).

Befinden wir uns beispielsweise im Mastertemplate (/templates/0/de/), so würden wir folgende Ordnerstruktur vorfinden:

• campaigns (Newsletter-Template)
• forms (Template für die Belegerstellung im Backend)
• html (Shopstruktur, hier werden alle Strukturen der einzelnen Seiten definiert)
• media (Shopstyle, hier werden alle Styles des Shops definiert (Farben, Hintergrundgrafiken, Positionen))

Die Bearbeitung Ihrer Mastertemplatestruktur geschiet also im Ordner html. Hier finden Sie folgende Verzeichnisstruktur vor:

• account - Templatedateien für den Kundenbereich (Mein Konto)
• ajax - Struktur der von AJAX geladenen Inhalte (z.B. das Modul Produktvergleich)
• articles - Artikeldetailseite, Artikelauflistung, Artikelboxen und Artikelextras wie z.B. Weiterempfehlen ect.
• basket - Warenkorb & Merkzettel
• campaign - Aktionsmodul
• category - Navigationsstruktur und Sitemapstruktur
• content - Struktur der Feed-Funktion und des Listings
• custom - Struktur der statischen Seiten
• error - Fehleranzeige
• index - Hauptstruktur des Shops, der Startseite und der PDF-Seite
• login - Struktur des Loginbereichs
• newsletter - Struktur für die Anmeldung zum Newsletter
• orderprocess - Bestellprozess und Bestellabschlussseite
• payment - Templates für einzelne Zahlungsmethoden
• register - Registriersteps 1 bis 3
• search - Struktur der Suchergebnisse und Suchfilter
• support (Formularstrukur für Kontakt ect.)

Das Aussehen bzw. die Styles Ihres Mastertemplates bearbeiten Sie im Ordner media. Hier finden Sie folgende Verzeichnisstruktur vor:

• css (Stylesheets für Farbanpassungen ect. (.css-Dateien))
• img (Bilder und Grafiken die im Template verwendet werden)
• js (externe Javascript-Dateien die im Template verwendet werden)
• swf (Flash-Dateien die im Template verwendet werden)

Das Template 0 ist das so genannte Mastertemplate. Alle Template-Dateien befinden sich nur in diesem MAstertemplate.

Subtemplates beinhalten standardmäßig keine Template-Dateien sondern beziehen diese immer vom Mastertemplate.

Es gibt jedoch die Möglichkeit einzelne Template-Dateien im Subtemplate anders zu gestalten als im Haupttemplate.

Beispiel:

Im Mastertemplate ist eine vierspaltige Artikelübersicht verwendet und es wurde ein Subshop erstellt der mit dem Subtemplate 18 arbeitet. In diesem Subshop soll nun eine angepasste Artikelübersicht eingespielt werden.

Da das Subtemplate die komplette Templatestruktur aus dem Mastertemplate bezieht müssen Sie nur 1 Datei (article_listing_4col.tpl) in die html-Ordnerstruktur vom Subtemplate 18 kopieren.

Wenn Sie die entsprechende Datei kopiert haben bezieht das Subtemplate alle Templatedateien weiterhin aus dem Mastertemplate jedoch wird die modifizierte Artikelübersicht mit der aus dem Mastertemplate ausgetauscht.

Somit ist das Kopieren eines kompletten Templates nicht mehr notwendig und erspart Ihnen eine Menge Zeit und Arbeit.

Einen Einblick in die Viewport-Technik erhalten Sie in dem Wiki-Artikel http://shopware.de/dev/wiki/Wie_funktioniert_das_Viewport-System.

sViewport-Syntax:

{$sBasefile}?sViewport=IHRVIEWPORT

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

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

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

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

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

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

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

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

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

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

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

In diesem Verzeichnis finden Sie alle Stylesheets zur Bearbeitung des Shopdesigns.

CSS-Dateien können mit einem beliebigen Text-Editor geöffnet werden, jedoch wird ein Web-Editor bevorzugt um die Zeilenangaben oder Color-Coding nutzen zu können. (Z. B. Adobe Dreamweaver, Zend Studio oder Coda)

Das Hauptverzeichnis für alle shoprelevanten Grafiken liegt unter: /img/default/store/

Hier sind auch Grafiken wie, z. B. das Shoplogo hinterlegt.

Öffnen Sie das Verzeichnis: /templates/0/de/media/img/default/store/

Hier finden Sie die Datei logo.gif vor. Überschreiben Sie diese Datei mit Ihrer neuen Version.

Öffnen Sie das Verzeichnis: /templates/0/de/media/css/

Hier finden Sie die Datei basic.css vor. Öffnen Sie diese Datei in Ihrem Web-Editor.

Passen Sie die entsprechenden Werte in der basic.css an:

Öffnen Sie das Verzeichnis: /templates/0/de/media/css/

Hier finden Sie die Datei basic.css vor. Öffnen Sie die Datei in Ihrem Web-Editor und springen Sie zur folgenden ID:

  div#navigation (Default-Zeile: 343)

Das Vorhaben dieses Templates ist es die Navigation beispielsweise in ein dunkles Grau einzufärben mit einer weißen Schrift. Wenn man mit der Maus über die Links fährt soll die Schrift rot werden.

• entfernen Sie die Hintergrundgrafik der Navigationsleiste

Zeile 348 vorher:
background: url(../img/default/store/main_menu_bg.gif) repeat-x 0 0;

Zeile 348 nachher:
background: none;

• entfernen Sie die Kommentierung der Hintergrundfarbe und passen diese auf ein dunkles Grau an

Zeile 349 vorher:
/*background-color: #dbdada;*/

Zeile 349 nachher:
background-color: #373737;

• passen Sie die Schriftfarbe der Links auf ein weiß an

Zeile 374 vorher:
color: #444;

Zeile 374 nachher:
color: #fff;

• setzen Sie die hover-color auf rot

Zeile 382 vorher:
color: #623420;

Zeile 382 nachher:
color: #ff0000;

Öffnen Sie das Verzeichnis: /templates/0/de/media/css/

Hier finden Sie die Datei basic.css vor. Öffnen Sie die Datei in Ihrem Web-Editor und springen Sie zum folgenden Abschnitt:

Hyperlinks (Default-Zeilen: 92-96)

Passen Sie die entsprechenden color-Werte an um die globalen Hyperlinks einzufärben.

Öffnen Sie das Verzeichnis: /templates/0/de/media/css/

Hier finden Sie die Datei basic.css vor. Öffnen Sie die Datei in Ihrem Web-Editor und springen Sie zum folgenden Abschnitt:

body (Default-Zeile: 52)

• einfarbiger Hintergrund: Passen Sie den background-color-Wert an

Zeile 57 vorher:
background-color: #f2f2f2;

Zeile 57 nachher:
background-color: #ff0000;

• Hintergrund mit Verlaufgrafik: STEP 1 Kommentieren Sie die background-color aus

Zeile 57 vorher:
background-color: #f2f2f2;

Zeile 57 nachher:
/*background-color: #f2f2f2;*/

• Hintergrund mit Verlaufgrafik: STEP 2 Entfernen Sie den Kommentar und passen Sie den background an

Zeile 56 vorher:
/*background: #fff url(../img/default/store/body_bg.gif) repeat-x 0 0;*/

Zeile 56 nachher:
background: #ff0000 url(../img/default/store/body_bg_new.gif) repeat-x 0 0;

Öffnen Sie das Verzeichnis: /templates/0/de/media/css/

Hier finden Sie die Datei basic.css vor. Öffnen Sie die Datei in Ihrem Web-Editor und springen Sie zur folgenden Klasse:

.button (Default-Zeile: 1622)

Um global alle Buttons ohne Sonderstyle mit einer grauen Hintergrundfarbe und schwarzer Schrift zu versehen ist folgendes anzupassen:

• ersetzen Sie den background bzw. das background-image mit einer background-color

Zeile 1635 vorher:
background: transparent url(../img/default/store/main_menu_bg.gif) repeat-x;

Zeile 1635 nachher:
background-color: #e9e9e9;

• anpassen des Wertes color

Zeile 1636 vorher:
color:#444;

zeile 1636 nachher:
color:#000;

Öffnen Sie das Verzeichnis: /templates/0/de/media/css/

Hier finden Sie die Datei basic.css vor. Öffnen Sie die Datei in Ihrem Web-Editor.

Um die Größe des Headers anzupassen bzw. in diesem Beispiel die Höhe um 20px zu vergrößern müssen mehrere Elemente neu positioniert werden. Zusätzlich wird die Implementierung eines Hintergrundbildes für den Header erklärt.

• Container um 20px in der Höhe vergrößern

Zeile 129 vorher:
padding: 175px 5px 20px 5px;

Zeile 129 nachher:
padding: 195px 5px 20px 5px;

• Navigationsleiste um 20px nach unten verschieben

Zeile 345 vorher:
top: 141px;

Zeile 345 nachher:
top: 161px;

• Suchleiste um 20px nach unten verschieben

Zeile 231 vorher:
top: 141px;

Zeile 231 nachher:
top: 161px;

• Shopnav um 10px nach unten verschieben

Zeile 273 vorher:
top: 50px;

Zeile 273 nachher:
top: 70px;

• Logo um 10px nach unten verschieben

Zeile 136 vorher:
top: 42px;

Zeile 136 nachher:
top: 62px;

Um dem header ein background-img zuzuweisen springen Sie zur ID div#container in der basic.css (Default-Zeile: 122)

• kommentieren Sie die background-color aus

Zeile 131 vorher:
background-color: #fff;

Zeile 131 nachher:
/*background-color: #fff;*/

• entfernen Sie den Kommentar um den background

Zeile 130 vorher:
/*background: #fff url(../img/default/store/container_bg.gif) no-repeat top;*/

Zeile 130 nachher:
background: #fff url(../img/default/store/container_bg.gif) no-repeat top;

• legen Sie das neue background-img an oder ersetzen Sie das Bestehnde

Zeile 130 vorher:
background: #fff url(../img/default/store/container_bg.gif) no-repeat top;

Zeile 130 nachher:
background: #fff url(../img/default/store/header_new.gif) no-repeat top;

Um ein Attribut zu erstellen oder ein solches zu verwalten lesen Sie bitte zuerst den Artikel hier.

Öffnen Sie das Verzeichnis: /templates/0/de/html/articles/

Hier finden Sie die Datei article_details_middle.tpl vor. Öffnen Sie die Datei in Ihrem Web-Editor.

Die Ausgabe eines Artikelattributs ist durch eine Smarty-Variable im Template möglich. Diese Variable hat folgende Syntax:

Variable für das Artikelattribut mit dem Datenbank-Feld: attr3

$sArticle.attr3

Sie haben unter anderem auch die Möglichkeit Abfragen mit Attributen zu erstellen.

Sie wollen beispielsweise ein Bild nur ausgeben lassen wenn das Attribut auch einen Inhalt besitzt bzw. ausgefüllt ist.

{if $sArticle.attr3}

{/if}

Auch in der Artikelübersicht wird ein Attribut genau wie auf der Artikeldetailseite ausgegeben:

Variable für das Artikelattribut mit dem Datenbank-Feld: attr3

$sArticle.attr3

Textbausteine sind im Template verwendbare Variablen, die in Shopware vordefiniert werden können. In Shopware wurde das komplette Templatesystem von so genanntem "hardcoded" Text befreit, d. h. es werden im Shopsystem Variablen mit den dazugehörigen Texten eingespeichert und im Template kann man die Texte durch angabe der Smarty-Variable abrufen. Der Vorteil an diesem System ist, dass es z. B. bei Subshops mit anderen Sprachen nur 1 Variable pro Textbaustein gibt. (Beispielsweise würde die Variable $sWelcome je nach ausgewählter Sprache den Wert "Herzlich Willkommen" oder z. B. "Welcome" ausgeben.)

Das Anlegen eines Textbausteines wird umfassend im Hilfeartikel http://www.shopware.de/dev/wiki/Hilfe:Einstellungen#Textbausteine erläutert und kann dort nachgeschlagen werden.

Um einen Textbaustein in Ihrem Shoptemplate einzubinden ist folgender Aufbau der Smartyvariable im Template einzuhalten:

{$sConfig.sSnippets.sVariablentitel}

Beispiel:

Die im Backend einzugebene Smarty Variable entspricht dem sVariablentitel der Textbausteinsyntax.

Statische Seiten lassen sich in verschiedenen Arbeitsabläufen ausgeben.

Die einfachste Methode eine statische Seite zu erstellen und diese im Frontend darzustellen ist direkt im Backend unter dem Menüpunkt:

Inhalte / Shopseiten

Variante zweit wäre es die im Backend erstellten Gruppen für die statischen Seiten mit einer Smarty-Foreach-Schleife auszulesen und die Seiten der Gruppen in der Storefront automatisch ausgeben zu lassen. Die dritte Möglichkeit ist es eine einzelne statische Seite anzusprechen und diese in der Storefront auszugeben.

Die Erstellung von statischen Seiten im Backend ist leicht zu handhaben.

• Schritt 1: Öffnen Sie das Menü "Shopseiten"

• Schritt 2: Wählen Sie den Button "Seite hinzufügen" um eine neue Shopseite anzulegen

• Schritt 3: Geben Sie den gewünschten Inhalt der Shopseite ein

• Schritt 4: Passen Sie die Grundeinstellungen an

Um die bereits erstellten Shopseiten im Backend zu bearbeiten wählen Sie die Kategorie in der die bereits angelegte statische Seite gespeichert ist.

Das Löschen der Shopseiten erweist sich als äußerst unkompliziert und ist innerhalb von 3 einfachen Schritte erledigt.

• Schritt 1: Wählen Sie die zu löschende Seite aus.

• Schritt 2: Klicken Sie auf den Button "Seite löschen"

• Schritt 3: Bestätigen Sie die Meldung um die Seite entgültig zu löschen.

Newsletter / Campaigns - Layout Anpassen

Sie können auch die verschiedenen Templates über einen Link aufrufen.

Beispiel: http://www.ihrshop.de/shopware.php?sTpl=3 (So wird auf dem lokalen PC das Template 3 verwendet)

mit http://www.ihrshop.de/shopware.php?sTpl=-1 wird wieder auf das Standard-Template umgestellt

Mit dieser Funktion ist das Bearbeiten eine Templates auch im Livebetrieb möglich. Änderungen können im Anschluss einfach in das aktuelle Template übernommen werden, oder das neue wird über die Shopware Administration als Standard-Template ausgewählt.