Die VM-2 Layouts

In VirtueMart 2 spricht man nicht mehr von Themen, sondern von Layouts und dieses Layoutkonzept hält sich eng an die Strukturkonventionen für Komponenten unter Joomla 2.5.x. In der Pfadstruktur der Komponente spiegelt sich das zunächst wieder in dem es im Komponentenverzeichnis ~/components/com_virtuemart/ so wie üblich ein Unterverzeichnis /views/ gibt. Für jeden Seitenbereich von VirtueMart zur Darstellung bestimmter Inhalte im Joomla-Contentbereich gibt es ein separates Unterverzeichnis z.B. /categories/ (für die Kategoriestartseite, also die 0. Ebene, das ist nicht die Shop-Startseite!) oder /category/ (für die früher so genannte Kategorie-Browsepages) usw.

Das Templatescript, welches verwendet wird ist üblich die default.php mit Ihrer Konfigurationsdatei default.xml. In der VirtueMart-Backend-Konfigurarion gibt es z.B. für die Kategorien das Layout in einer DropDown-Liste ausgewählt werden. Standardmäßig eben default.



Möchte man jetzt sein eigenes Layout erstellen, dann sollte man nicht in diesen default-Dateien drinne rummurksen, zumal diese wahrscheinlich mit einem nächsten VM-Upgrade überschrieben werden. Statt dessen kann man eine von zwei Varianten nutzen, die hier vorgestellt werden.

 

Variante 1 - umbenannte Ableitungen der default.php in den view-Verzeichnissen

sondern beide Dateien beispielsweise im Verzeichnis /category/ dublizieren z.B. als mein_layout.php und mein_layout.xml.

Nach dem man das getan hat kann man mein_layout in der VM-Konfiguration unter dem Registerreiter Stilvorlagen (hier weicht die VM-Übersetzung von dem Begriff Layout ab) in o.g. DropDown-Liste als "Kategorie-Layout" zuweisen.

Interessant zu wissen ist, dass mit der Konfig-Einstellung "Kategorie-Layout" beide o.g. Seiten also für die Kategorie der 0. als auch für alle anderen gemeinsam eingestellt werden, obwohl diese in unterschiedlichen Verzeichnissen liegen.

Für das Shop-Startseiten-Layout gibt es eine weitere Option in der Gruppe "VirtueMart-Startseiten Einstellungen", die Auswahlfeld "Layout für Ihre Startseite".

Damit hätte man dann seinem Shop ein neues Standard-Kategorie-Layout zugewiesen. An gleicher Stelle könnte man jetzt z.B. weitere Layouts unterschiedlich benannt ablegen, um speziellen Kategorien spezielle Layout zuweisen zu können. Die Zuweisung erfolgt in der Kategorieverwaltung für die jeweilige Kategorie. Auch hier gibt es eine DropDown-Liste mit der Auswahlmöglichkeit für alle angelegten Layouts.

Für das Produkt-Flypage-Template gibt es eine Option "Produkt-Layout" unter dem Registerreiter "Stilvorlagen". Um hier auch ein eigenes Layout auswählen zu können, muss im Unterverzeichnis /views/productdetails/ die default.php/.xml kopiert werden nach mein_layout.php/.xml.

 

Variante 2 - default.php-Ableitungen in den J!-Template-Verzeichnissen

Im Forum wird eine zweite Variante beschrieben, um statt dem Standard eigene Layouts zu laden, nämlich die, die typisch für Joomla im Zusammenwirken mit dem Joomla-Haupttemplate ist. Diese soll hier auch kurz benannte werden, wobei ich einschränkend sagen muss, dass ich Sie in meinem JYAML-Template erfolglos ausprobierte hatte und deshalb nicht weiter verfolgt habe:

Zunächst erstellt man wie oben beschrieben eine Kopie der components/com_virtuemart/views/VIEW/templ/default.php-Scripte in den jeweils zu modifizierenden VIEW-Ordner. Im neu zu erstellenden Verzeichnis template/betreffendes_joomla_template/html/com_virtuemart/ legt man einen gleich benannten VIEW-Ordern an und verschiebt dorthin oben genannte Kopie mit gleichem Namen default.php.

Ein Umstellen der Layout-Dateinamen wie in der Variante 1 beschrieben innerhalb der Shop-Stil-Konfigurationen ist damit nicht notwendig. Joomla gewährleistet ganz automatisch, dass die VM-Standard-default.php ignoriert wird und statt dessen unsern neue default.php in Template-Verzeichnis verwendet wird.

 

Die VM-Style-Datei

1: Die Konfigurations- und Template-Variante

Wer im Übrigen verhindern will, dass der Shop durch die VM-eigenen Styles formatiert wird, kann das Laden der entsprechenden Style-Datei verhindern. Durch Deaktivieren der Checkbox "Benutzt das Virtumart CSS" in der Shop-Konfiguration > Stilvorlage wird verhindert, dass die Datei /components/com_virtuemart/assets/css/vmsite-ltr.css geladen wird. Statt dessen kann man über sein Template dann eine eigene Styledatei laden, oder wie üblich durch eine nachgeladene CSS-Datei die VM-Style modifiziern.

Wie man zusätzlich(!) eine spezielle VM-Style-Datei laden kann, die vom Skin/Thema abhängig ist und nur im Zus.hg. mit dem Shop geladen wird soll nun behandelt werden. Schließlich will ich ja meine Modifikationen nicht in der original VM-Core-CSS-Datei vornehmen, um die Updatefähigkeit der Komponente zu wahren sondern in einer Mod-Variante die Styles überschreibt oder ergänzt.

Wer mit dem JYAML-Template arbeitet, kann im Verzeichnis /templates/jyaml/css/ eine VM-spezifische CSS-Datei erstellen, z.B. benannt als vm.skinname.css und dann über die JYAML-Template-Konfiguration einbinden. Nachteil auch dieser Methode ist, dass diese Style-Datei immer geladen wird und nicht, wie es eigentlich sein sollte, nur wenn VM als Komponente sichtbar ist. Insofern könnte man auch gleich die Änderungen in die Template-Skin-CSS schreiben. Aufgepasst werden muss natürlich, dass diese Modifikationen nach der vmsite-ltr.css geladen wird.

Im Prinzip werden genau diese Vorgehensweisen auch im VM-Forum empfohlen. Entweder die vmsite-ltr.css-Inhalte in die Themplate-CSS Datei hinein zu kopieren, oder eine separate abzulegen und einzubinden und dann in der VM-Konfiguration die VM-eigenen zu deaktivieren. Eine eigene kann man ganz einfach so nutzen, in dem man eine gleich benannte vmsite-ltr.css in das Verzeichnis /templates/eigenestemplate/css/ legt. Diese wird dann von VM statt der originalen verwendet. Wer nur Teile neu definieren will oder überschreiben will und nicht die komplette vmsite-ltr.css uns somit auch das Original vom VM-Core weiter unangetastet nutzen will, kann einfach folgenden Trick machen:
In die eigene vmsite-ltr.css legen wir diese Zeile zu oberst rein:
@import "../../../components/com_virtuemart/assets/css/vmsite-ltr.css";
gefolgt von unseren ergänzenten Styleanweisungen.


2: Die vmJsApi-Variante

Für alle die die sich auch mal an ein Script heranwagen, wird im VirtueMart Developerbereich noch eine weitere Ausführung zum Thema des Ladens von JS- und CSS-Datei aufgeführt:

Es gibt in VM eine Klasse vmJsApi zum Laden von Scripten ins Frontend die u.a. diese beiden Methoden besitzt: vmJsApi::css() und vmJsApi::js(). Im Prinzip funktionieren diese fast identisch bis auf die Tatsache, dass Sie sich aus anderen Verzeichnissen bedienen und einmal CSS-Scripte und anderenfalls JS-Dateien laden.

Hier ein paar Infos vorweg über die Funktionsweise:

  1. Diese Methoden speichern die per Parameter übergebenen Angaben zunächst in einem statischen Array. Das ist für's Verständnis wichtig zu wissen. Dabei ist der erste Parameter der Methoden nicht nur der Anfang des Dateinamens nach dem gesucht wird, sondern zugleich auch der Bezeichner oder besser Namesbereich in dem statischen Array unter dem es abgelegt wird. Wenn wir eine Datei die geladen wird durch eine eigene überschreiben wollen, müssen wir den gleiche Bezeichner verwenden, soll eine Datei zusätzlich geladen werden, muss sich der Bezeichner unterscheiden!
  2. Da sich VM hier an die übliche J!-Praxis hält, geht es bei der Suche der Dateien nach entsprechend festgelegter Logik vor. Zunächst schaut es in den J!-Template-Pfad (z.B. für das JYAML-Template in /templates/jyaml/script/ bzw. /templates/jyaml/css/) ob es dort eine so benannte Datei gibt. Wenn ja, dann wird diese verwendet, anderenfalls sucht VM in seinem eigenen Pfad (/components/virtuemart/assets/js/ oder /components/virtuemart/assets/css/).
  3. Wenn dieses Pfad-Verhalten ausgehebelt werden soll, kann man den Pfad zusätzlich auch konkret angeben, als zweiten zu übergebenden Parameter.
  4. Wenn man z.B. mit der JQuery oder anderen JS-Bibliotheken arbeitet, ist häufig eine Versionsangabe im Dateinamen üblich. Diese kann man als 3. Parameter übergeben. Wenn der Array-Positionsbezeichner gleich bleibt, wird dann z.B. die ansich gleichlautende von VM geladene nicht verwendet sondern die eigene trotz anderer Versionnummer.
  5. Dann gibt es noch einen 4. Parameter als boolscher Wert, über den definiert werden kann, ob dies ein komprimierte Datei ist, folglich auch so heißt oder nicht.
Hier mal zwei Beispiele:
vmJsApi::css('myShopTemplate');

Dieser Aufruf lädt zusätzlich aus dem Joomla-Template-CSS-Verzeichnis die Datei. myShopTemplate.css.

vmJsApi::js('jquery-ui','//ajax.e10f949fcaacdb195442bfb5062d59de-gdprlock/ajax/libs/jqueryui','1.8.16',true);

Dieser Aufruf überschreibt die Einbindung der VM-eigenen jquery-ui.js und ersetzt ihn durch ein adäquates Script von extern, konkret von dieser Adresse: //ajax.e10f949fcaacdb195442bfb5062d59de-gdprlock/ajax/libs/jqueryui/jquery-ui.1.8.16.min.js. Hier ist gut zu sehen, wie sich der Dateiname aus dem Parametern ergibt.

Wen es interessierte: Die o.g. Klasse vmJsApi wird im Script admininstrator/components/com_virtuemart/helpers/config.php definiert.

 

Anmerkung zum Java-Script-Pfad:
  • Im Joomla-Developer-Bereich soll der JavaSrcipt-Pfad angeblich templates/STYLE_XYZ/js/ heißen.
  • Bei den mitgelieferten Joomla-Templates heißen die Pfade aber templages/beez5/javascript/ und
  • im jYaml-Template templates/jyaml/script/.

Keine Ahnung wie Joomla und VM mit dieser Unterschiedlichkeit klar kommt.
Aber vielleicht machen das die Templates ja für sich klar?