Ich musste mich die Tage mal mit OXID etwas beschäftigen und hab mir dafür die Community Edition 4.8.4 installiert und schnell festgestellt, wie einfach das ganze ist.
OXID arbeitet mit sog. Templates um die Funktionalität und das Layout eines angepassten Webshops von OXID selbst zu trennen. Um ein eigenes Template bearbeiten zu können muss man die folgenden Schritte durchführen:
Im ersten Schritt muss man unter oxid/application/views/[DeinTemplate] die Template Dateien ablegen. OXID erwartet innerhalb des Ordners eine Datei theme.php. Innerhalb dieser PHP Datei kann man die Metainformationen (Id, Name, Beschreibung, etc.) zum Template angeben. Diese Metainformationen werden innerhalb des Admin Frontendes angezeigt. Man findet die Anzeige im Menü: /Erweiterungen/Themes. Dort kann man auch das aktuell verwendete Theme aktivieren.
Wenn man die Temaplate Dateien nun erstellt hat, muss man einen Resourcen Ordner für das Them noch anlegen. Hierfür muss man unter dem folgenden Pfad entsprechen einen weiteren Ordner mit dem gewählten Template Namen erstellen: oxid/out/[DeinTemplate]
Innerhalb dieser vorgenannten Ordnerstruktur kann man allerlei Resourcen für das Template ablegen, wie z.B. Bilder uws. Wenn man jetzt Elemente innerhalb der HTML Struktur einwirken möchte, muss man das innerhalb der .tpl Dateien machen. Hier mal ein kleines Beispiel wie man innerhalb des Header-Abschnitts ein weiteres HTML Element einfügt:
Man muss in die Ordnerstruktur oxid/application/views/[DeinTemplate]/layout wechseln. Dort liegt die header.tpl Datei und dort kann man mit den sog. Smarty Tags die Elemente des HTML Codes bearbeiten. Smarty ist eine PHP Template Engine mit einer eigenen Notation. Das schöne daran ist, es ist stark an PHP selbst abgelehnt. D.h. wenn man ein neues DIV Element in einer eigenen tpl-Datei anlegen möchte, kann man die Datei mit einem include-Befehl in den Header-Bereich der Website einbinden. Herfür muss man einfach den folgenden Befehl an der gewünschte Stelle innerhalb der header.tpl Datei speichern:
[{include file="layout/test.tpl"}] |
Nun wird an dieser Stelle im HTML Code die HTML Elemente aus der test.tpl Datei automatisch integriert. Die test.tpl Datei kann dann in etwa so aussehen:
Wenn man nun das Frontend des Webshops aktualisiert, findet man im HTML Code der Seite das integrierte DIV:
