Joomla! erweitern/Komponenten/3rd Party/Virtuemart/anpassen

Voraussetzungen

• Virtuemart ist installiert und konfiguriert.
• Kategorien sind angelegt, Produkte eingegeben, Kategorien angelegt usw.

Themes

Mit der Version 1.1 wurden in Virtuemart die sogenannten "Themes" eingeführt. Damit ist es endlich möglich, fast alle Ausgaben in Virtuemart nach eigenen Wünschen anzupassen, ohne die Originalprogramme verändern zu müssen. Mit diesen Themes können Grafiken, HTML-Ausgaben und PHP-Funktionalität verändert werden. Anders als bei bekannten "echten" Template-Systemen wie patTemplate oder Smarty gibt es hier keine echte Trennung von Layout und Code. Die Themes sind PHP-Dateien, in denen HTML und PHP-Logik gemischt enthalten sind.

Wie finde ich die Themes?

Die Themes liegen in  DeinJoomla!/components/com_virtuemart/themes/. Dort befindet sich nach der Installation das  Default-Theme. Davon sollte man sich als erstes eine Kopie anlegen und nach eigenem Wunsch benennen, z. B.:  DeinJoomla!/components/com_virtuemart/themes/deintheme/. Danach wird in der Virtuemart-Administration > Konfigurtaion > Seite im Feld "Layout" unter "Wählen Sie das Thema/Stil für den Shop" dieses neue Theme ausgewählt. (Speichern nicht vergessen.)

Theme Struktur

Das Themes-Verzeichnis enthält über 340 Dateien in 19 Verzeichnissen. Dies liegt daran, dass die allermeisten Darstellungselemente von Virtuemart als einzelne Template-Dateien vorliegen. Das erschwert zu Anfang etwas die Einarbeitung, hat aber erhebliche Vorteile.

Im Hauptverzeichnis des Theme liegen einige wichtige Dateien, die für die Konfiguration und die grundlegende Funktionalität des Templates wichtig sind.

•  admin.css Stylesheet für die Frontend-Administration
•  admin.styles.css
•  theme.config.php Die Konfigurations-Datei für das theme
•  theme.css Das Haupt-Stylesheet für das theme
•  theme.js Der Javascript-Controller für das theme
•  theme.php In dieser Datei erfolgt die Definition der Klasse "vmTheme" (abgeleitet von "vmTemplate"). Es werden die Funktionen zur Verfügung gestellt die Stylesheets eingebunden usw. Das Theme kann mit eigenen "globalen" Funktionen erweitert werden, die im gesamten Kontext des Themes zur Verfügung stehen.

Ein Zugriff auf die Funktionen innerhalb der Templates erfolgt über vmlistAdditionalImages( $product_id, $images ) ("$this" ist der Verweis auf das Theme-Objekt.)

•  theme.prototype.js
•  theme.xml enthält die Parameter des theme und Zusatzinformationen. Ähnlich wie bei Joomla-Extensions können hier Parameter definiert werden, die über die Theme-Konfiguration im Virtuemart Backend konfiguriert werden können. Dabei kommt die von Joomla! bekannte Element- und Parameterstruktur zur Anwendung.

Die Verzeichnisstruktur der Themes ist gut und einfach nachvollziehbar gegliedert. Zuerst erfolgt die Trennung nach "Images" und "Templates", darunter die Gruppierung nach den einzelnen Funktions- und Seitenbereichen.

Das Images-Verzeichnis enthält alle grafischen Elemente (Buttons usw.) des Themes und ist relativ einfach zu verstehen. Durch die Verzeichnisstruktur und nach einer Durchsicht der Grafiken sollte klar sein, wo diese zur Anwendung kommen. Diese nehmen mit 255 den größten Teil der Themes-Dateien ein. Die Grafiken können einfach durch eigene Dateien ersetzt werden. Natürlich sollte man peinlich genau auf die Abmessungen (Breite und Höhe) der Originale achten, damit nach dem Austauschen der Bilder die Layouts noch funktionieren. Natürlich können auch abweichende Dimensionen genutzt werden, dann ist in der Regel auch eine Überarbeitung des jeweiligen Templates notwendig.

Das Templates-Verzeichnis enthält die bereits angesprochenen PHP-Dateien zur Steuerung der Ausgaben. Auch hier erleichtert eine "sprechende" Verzeichnisstruktur die Einarbeitung. Dennoch ist es hier etwas komplexer, die gewünschte Datei zu ermitteln.

Programmierung der Templates

Technischer Hintergrund / Aufbau der Template-Dateien

Es ist auch hier wichtig zu wissen, dass die Virtuemart Template-Dateien nicht mit "echten" Template-Systemen vergleichbar sind. Hier gibt es keine gekapselte Template-Logik mit Platzhaltern usw. Die Template-Dateien sind vielmehr mit typischen PHP-Includes vergleichbar. An einer bestimmten Stelle im Code werden diese Dateien hinzugeladen und ausgeführt (!). Das bedeutet, dass ein Fehler in der Template-Datei unweigerlich zu einem Fehler in Virtuemart wird. Jede Datei beginnt (wie bei Joomla! üblich) mit der Prüfung, ob die Datei innerhalb von Joomla! geladen wurde. Dies sollte unbedingt auch bei eigenen Templates aus Sicherheitsgründen beibehalten werden.

Danach folgt unmittelbar der auszuführende Code des Templates. Wie bereits erwähnt, wird dieser Code in die Programmausführung von Virtuemart direkt eingebunden und kommt sofort zur Ausführung. Da dieser Code stark von dem Virtuemart-Bereich abhängig ist, kann hier kein allgemeingültiger Überblick über die Programmierung gegeben werden. Mit HTML- und PHP-Kenntnissen sollte man aber schnell die Logik des einzelnen Templates verstehen können (ohne diese Kenntnisse sollte man sowieso lieber keine Änderungen vornehmen...)

Hilfen dabei

• "DEBUG" einschalten. Das bewirkt, dass im Frontend der Beginn einer Datei mit bezeichnet wird. Beim Überfahren von mit der Maus wird dann auch die entsprechende Datei genannt.
• Die Virtuemart-URL: Hier eine typische "Product Flypage" (Produkt-Detailansicht): /index.php?page=shop.product_details&category_id=11&flypage=flypage.tpl&product_id=37&option=com_virtuemart&Itemid=71&vmcchk=1&Itemid=71 Die beiden hervorgehobenen Elemente der URL erleichtern uns das Auffinden der benötigten Datei: im Verzeichnis Templates liegt das Unterverzeichnis "product_details" und darin die Datei "flypage.tpl" - und schon haben wir die Datei gefunden.
• Firebug
• Oft hilft ein Dump der Variablen (z.B. PHP-Funktion print_r()) direkt im Template, um an die zur Verfügung stehenden Variablen zu kommen.
• ein spezieller PHP-Editor, der die Verknüpfungen selber auflösen kann und somit das Auffinden der Funktionen erleichtert.

Spezielle Dateien und Verzeichnisse

browse_x.php

Die  browse_1.php,  browse_2.php,  browse_3.php usw. befinden sich im  DeinJoomla!/components/com_virtuemart/themes/deintheme/templates/browse und werden durch die  DeinJoomla!/administrator/components/com_virtuemart/html/shop.browse.php aufgerufen und bestückt.. Mit Ihnen werden Übersichten über die einzelnen Produkte dargestellt.

Sie werden aus dem  DeinJoomla!/components/com_virtuemart/themes/deintheme/templates/browse/includes mit haeder, pagenavigation, Sortierung usw. ergänzt.

Es können weitere Produktübersichten erstellt werden.

Für jeder Kategorie kann in der Kategorie Information eine andere Produktübersicht gewählt werden.

flypage_x.tpl.php

Mit diesen Dateien werden die Produktdedails dargestellt. Sie finden sich im  DeinJoomla!/components/com_virtuemart/themes/deintheme/templates/product_details und werden durch die  DeinJoomla!/administrator/components/com_virtuemart/html/shop.product_details.php aufgerufen und bestückt.

Sie werden aus dem  DeinJoomla!/components/com_virtuemart/themes/deintheme/templates/product_details/includes ergänzt.

Es können weitere erstellt werden und für jede Kategorie eine eigene verwendet werden.

Variablen

Diese Variablen werden in Virtuemart verwendet.

Ein herzliches Dankeschön ...

... an Thomas Kahl für seine Veröffentlichung Der Virtuemart 1.1 Shopkomponente ein neues Gesicht verpassen und dafür, dass ich sie hier als Grundlage nutzen darf.