Wenn es um das Thema individuelle Shopanpassung geht, ist damit in aller Regel auch eine Modifikation des Frontends verbunden. Aus diesem Grund möchten wir unser Kochbuch mit einigen Rezepten beginnen, die mit dem Frontend zu tun haben.
Das Frontend des OXID eShop beruht derzeit auf Smarty. Dabei handelt es sich um eine Template-Sprache, die es erlaubt, dynamische Inhalte in das Frontend einzubringen, ohne dazu alternativ beispielsweise eine Skriptsprache wie PHP zu verwenden. Obwohl es mittlerweile Smarty 3 gibt, wird hier Smarty 2 verwendet, da zum Zeitpunkt der Softwareauswahl Smarty 3 noch mit Performanceproblemen zu kämpfen hatte. Bestimmte Eigenschaften, wie das Verschachteln verschiedener Template-Dateien (siehe „1.2 Ein Theme updatesicher entwickeln“), wurden aber von OXID in Smarty 2 rückportiert und steht auch dort zur Verfügung.
Um den Shop an unsere Bedürfnisse anpassen zu können, müssen wir zunächst darauf eingehen, wie Themes in OXID grundsätzlich aufgebaut sind und an welchen Stellschrauben man drehen muss, um die gewünschten Resultate zu erzielen. Dabei kommt es jedoch nicht nur darauf an, dass alles »für den Moment« nett aussieht und funktioniert, sondern dass sich auch nach einem Update die Seitenelemente noch wie vorgesehen an Ort und Stelle befinden. In diesem Kapitel erfahren Sie außerdem, wie sich Blöcke in OXID ersetzen bzw. erweitern lassen. Zum Schluss geben wir Ihnen noch mit auf den Weg, wie sich die sozialen Netzwerke Twitter und Google+ einbinden lassen.
1.1 Den Aufbau eines Themes kennenlernen
Seit Version 4.7 besteht ein Template in OXID aus Dateien in zwei Verzeichnissen. Sämtliche Smarty-Templates finden sich im Verzeichnis application/views/mythemename/, alle direkt durch den Browser aufrufbaren Dateien befinden sich in /out/mythemename/. In der folgenden Liste werden die wichtigsten Verzeichnisse anhand des Azure-Themes erläutert.
/de/ und /en/
In diesen Verzeichnissen sind die sprachspezifischen Dateien hinterlegt, die dafür sorgen, dass die verwendeten Textstrings, die innerhalb der Templates verwendet werden, entsprechend übersetzt werden.
theme.php
Dies ist sozusagen das Herz eines jeden Themes, in dem seine grundsätzlichen Parameter festgelegt werden, wie Name, interner Code usw. In vielen Rezepten dieses Buchs werden wir auf diese Datei noch genauer zu sprechen kommen.
Nachfolgend ist der Inhalt von /tpl/ aufgelistet. Dieses Verzeichnis enthält alle Smarty-Dateien, die im jeweiligen Theme enthalten sind.
/tpl/custom/
Hier finden Sie alle Dateien der individuellen Templates für Kategorien und Produkte, die man unter »alternatives Template« im Backend eintragen kann.
/tpl/email/
In den jeweiligen Unterverzeichnissen /html/ und /plain/ befinden sich alle Smarty-Dateien, die etwas mit der Formatierung der automatisch vom Shopsystem versendeten E-Mails zu tun haben.
/tpl/form/
Alles, was das Formatieren von Formularen betrifft, ist in diesem Verzeichnis zusammengefasst. Das betrifft beispielsweise das Kontaktformular (contact.tpl) oder auch die Kundenregistrierung (register.tpl).
/tpl/layout/
An dieser Stelle werden die grundsätzlichen Layout-Templates hinterlegt, also solche, die für den groben Aufbau der Seite zuständig sind, wie base.tpl und page.tpl.
/tpl/message/
Alles, was der Shop an Feedback liefert, wenn beispielsweise fehlerhafte Eingaben erfolgt sind, wird mittels der Templates in diesem Verzeichnis formatiert.
/tpl/page/
In den Unterverzeichnissen von /page/ finden Sie, weiter unterteilt nach den OXID-Seitentypen, die Template-Dateien für den gesamten Shop, angefangen von der Produktdetailseite über die Seiten des Check-outs bis zum Kundenkonto.
/tpl/rdfa/
Ein relativ junges Feature des OXID eShop ist, dass die ausgelieferten Seiten für das sogenannte Semantic Web vorbereitet sind. In diesem Verzeichnis sind alle diesbezüglichen Templates untergebracht.
/tpl/widget/
Im letzten Verzeichnis sind kleine Seitenelemente, die sogenannten Widgets, gespeichert. Hier findet der geneigte Entwickler beispielsweise den Mini-Warenkorb oder den Sprachwechsel.
Im /out/-Verzeichnis ist ebenfalls für jedes Theme ein Unterverzeichnis vorhanden, die Inhalte sind folgende:
/img/
Wie der Name schon vermuten lässt, findet man hier alle Bilder, die im Theme verwendet werden.
/src/bg/
Werden Hintergrundbilder über CSS in das Frontend geladen, werden Sie sie mit hoher Wahrscheinlichkeit in diesem Verzeichnis finden.
/src/css/
Das erwähnte CSS in verschiedenen Geschmacksrichtungen wird an dieser Stelle abgelegt.
/src/js/
Hier sind alle JavaScript-Bibliotheken und...