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.

Getagged mit: , , , ,
9 Kommentare zu “xt:Commerce Template erstellen
  1. Steven sagt:

    Hi,

    an welcher Stelle wird in der Index.html auf das Stylesheet verwiesen ?

    Also ich hab zwar das Stylesheet, aber wie und wo greift der Shop darauf zu ??? In der index.html sind bei allen Templates keine Verweise auf die .css datei ??!

    MfG


    — Antwort von Exanto —

    Die CSS-Datei wird in der includes/header.php eingebunden. Dort wird auch der Doctype usw. gesetzt.

    Grüße!

  2. Thomas Regli sagt:

    Hallo

    Wie kann ich bei meinem Template das Cross Selling einbinden (im Default Template funktioniert die Anzeige, sobald ich ein gekauftes anzeige nicht, darum möchte dieses ergänzen.)

    Danke & Gruss Thomas

  3. IT sagt:

    Hallo Thomas,

    das Cross-Selling wird in der Template-Datei

    /module/product_info/product_info_v1.html

    eingebunden. Dort stehen unten ein paar Smarty-IF-Abfragen, die die verschiedenen Module anzeigen. Das für Cross-Selling lautet wie folgt:

    {if $MODULE_cross_selling != ''} {$MODULE_cross_selling} {/if}

    Gruß, Ingo

  4. Webagentur sagt:

    Gibt es auch ein ausführlicheres Tutorial im Netz, wo Schritt für Schritt erklärt wird, wie man ein Template baut?

  5. Andre sagt:

    Wie kann man eigene Module inkl. Template für XTC bauen?

  6. Ed sagt:

    Sehr schön beschrieben, auch für jeden Anfänger zu verstehen und auch möglich umzusetzen. Werde es auf jeden fall weiterempfehlen.

  7. Matthias sagt:

    Sehr schön, dann versuche ich mal mein Glück und hoffe, es klappt 😉

  8. Gerrit sagt:

    Was bringen denn die /* resets—-*/ in der stylesheet.css ? Ich habe aktuell das Problem, dass sich in einem Shop die Schrift nicht mit dem RTE anpassen lässt und ich habe das Gefühl es liegt an Zeile 9 & 119, aber ich bin mir noch nicht sicher welche Container da rausfliegen können und über Google finde ich nichts.

    Danke und beste Grüße aus Wiesbaden,

    Gerrit

    • Ingo sagt:

      Die „resets“ setzen meist einige Standardeinstellungen zurück, damit das Ergebnis in den meisten Browsern gut aussieht. In diesem Artikel wird allerdings kein spezieller Stylesheet behandelt. Er ist zudem 8 Jahre alt, da hat sich einiges geändert 😉

2 Pings/Trackbacks für "xt:Commerce Template erstellen"
  1. […] Hier mal eine Übersicht von Anbietern, die Templates für XT Commerce kostenlos zur Verfügung stellen. Wer noch andere Anbieter kennt bitte als Kommentar posten. Wer gerne selber ein Template erstellen möchte, der sollte sich die Anleitung auf exanto.de mal anschauen. […]

  2. […] Zugang, schnelle Ladezeiten, und … http://www.exanto.de/xt-commerce-template-erstellen.html – besuchen Shopsysteme im Vergleich: Magento, Oxid und xt:commerce Veyton … Die Nachfrage nach […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.