xt:Commerce Template erstellen

In diesem Artikel beschreibe ich die einzelnen Schritte die nötig sind um ein sauberes und optimiertes xt Commerce Template zu erstellen. Dabei geht es um die Anpassung der HTML-Seiten inklusive der Smarty-Variablen, die Auszeichnung von Klassen und IDs für die spätere Erstellung einer CSS-Datei und den Cross-Browser Test des fertigen Templates um eine optimale Darstellung zu verwirklichen.

### 1. HTML-Dateien des Templates verändern bei xt:Commerce
### 2. Die CSS-Datei anpassen
### 3. Testen des neuen Templates auf verschiedenen Browsern

### 1. Template HTML-Dateien verändern

Zunächst muss das Markup (HTML) der bestehenden Dateien angepasst
werden. Die wichtigste Datei hierbei ist die „index.html“, welche das
Grundgerüst des _xt Commerce Templates_ bildet. Hier empfiehlt es sich, den
Headerbereich mit Links und Grafiken zu definieren, und die
Grundstruktur mit Tabellen oder DIV-Layern festzulegen.

Das W3C Konsortium empfiehlt inzwischen für die grobe Strukturierung
ausschließlich die dafür vorgesehenen DIV-Layer einzusetzen, und
sämtliche Design-Elemente (Breite, Höhe, Hintergrund, Ränder, Bilder
usw.) in der CSS-Datei festzulegen. Dazu später mehr.

Eine Besonderheit bei xt:Commerce ist die Smarty- Template- Engine.
Die Smarty-Variablen werden in den PHP-Dateien des Shops mit Inhalt
gefüllt, und in den HTML-Dateien des Templates angezeigt. In der
index.html sind dies z.B. {$store_name}, {$box_CATEGORIES},
{$main_content} und andere.

Die Bezeichnungen sind meist selbsterklärend. Die wichtigsten
Smarty-Variablen in der index.html sind zweifelsohne die verschiedenen
Boxen und natürlich der {$main_content}. Die Boxen enthalten den
entsprechend generierten Inhalt, welcher in den Dateien
„/templates/IHR_TEMPLATE/source/boxes/*.php“ generiert wird. Die Boxen
haben wiederum ihre eigenen Templates, welche sich in
„/templates/IHR_TEMPLATE/boxes/*.html“ verstecken und dort angepasst
werden können.

Den Empfehlungen des W3C folgend, ist es zunächst sinnvoll sich eine
einheitliche Markup- Struktur für Boxen und Unterseiten zu überlegen,
und dort Klassen und IDs für die späteren Style-Definitionen zu
vergeben. Ein ordentliches Markup und eine wohlüberlegte Style-
Struktur ermöglichen es, auch im Nachhinein Kleinigkeiten zu ändern,
Schriftarten und Schriftgrößen anzupassen uvm. Ändern Sie in dieser
Manier nun alle Template- Dateien entsprechend Ihren Wünschen ab, und
tragen Sie die leeren Klassen und IDs der einzelnen Elemente in eine
leere Stylesheet- Datei („/templates/IHR_TEMPLATE/stylesheet.css“) ein.
Eine gute Einführung in (x)HTML, CSS usw. gibt es hier: SelfHTML

### 2. Die CSS-Datei anpassen

Nachdem Sie Ihr Markup komplettiert haben, sollten Sie bei den
einzelnen Layern und Elementen die Styledefinitionen eintragen. Je nach
Erfahrung kann dies ein langwieriger Prozess sein, da leider alle
Browser bei manchen Elementen unterschiedliche Interpretationen der
Darstellung bereithalten… Diese Fehler oder auch „Browser- Bugs“
äussern sich am stärksten im (leider immer noch) stark verbreiteten
Internet Explorer, und das auch noch in jeder Version unterschiedlich.
Eine gute Liste der Bugs und wie man mit diesen umgeht findet sich
hier: PositionIsEverything.

Als Referenz- und Entwicklungsbrowser empfiehlt sich der Mozilla Firefox,
da dieser die (imho) bisher beste CSS-Unterstützung bietet. Ausserdem
gibt es für diesen Browser eine Menge Plugins, die die Webentwicklung
erleichtern und beschleunigen.

### 3. Testen des neuen Templates auf verschiedenen Browsern

Wenn Sie mit dem bisherigen Template zufrieden sind, fangen Sie an
es auf verschiedenen Browsern zu testen, und bügeln Sie die CSS-Bugs
aus. Allen voran hat der Internet Explorer erfahrungsgemäß die meisten
Probleme, weshalb es empfehlenswert ist ihn direkt in den
Entwicklungsprozess mit einzubeziehen, und immer wieder gegenzuprüfen
während man Markup und Styles definiert.

Weitere Browser mit denen man testen kann: Netscape, Opera, IE 5.0,
IE 5.5, IE 6.0, MAC IE 5.0, MAC Safari, Mozilla Suite u.a. – Der Nutzen
ist meiner Meinung nach zweifelhaft, da laut Webhits
die meisten (> 85%) Besucher den IE 5.5 und 6.0 sowie Mozilla
Firefox nutzen. Dies ist selbstverständlich je nach Thema der Webseite
anders, aber ein komplettes xt:Commerce Template unter allen Browsern
genau gleich aussehen zu lassen, ist eine sehr langwierige
Angelegenheit für die meist niemand die Zeit und/oder das Geld
aufbringen möchte.

Zu guter letzt prüfen Sie ihr xt:Commerce Template mit dem W3C Validator,
und korrigieren Sie die schlimmsten Fehler manuell. Eine
standardkonforme Umsetzung ihres Templates, gepaart mit dem sinnvollen
Einsatz von DIV-Layern, Stylesheets und sauberem Markup werden sich
sehr positiv auf Ladezeiten und Suchmaschinenindexierung Ihres
zukünftigen [xt:Commerce](/xtcommerce-templates-module-tutorials/) Online-Shops auswirken.

Natürlich biete ich eine Erstellung von xt:Commerce Templates und/oder Umsetzung in xHTML und CSS auch als Dienstleistung an. Wenn Sie möchten, nehmen Sie doch Kontakt mit mir auf.