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