Das Dokument beschreibt, wie man ein VirtueMart-Template in Joomla erstellt, einschließlich der Definition von Overrides, CSS und JavaScript-Integration sowie der Verwendung von Browser-Entwicklertools. Es wird erklärt, wie man Daten findet und anzeigt, und wie man eigene Daten nachlädt, indem man eine Helper-Klasse erstellt. Abschließend gibt es Hinweise zu VirtueMart-Parametern und zur Strukturierung des Codes.

1. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Wie erstelle ich ein
Virtuemart Template?
Tobias Rick
Simon Samtleben
Yannick Spang
Joomla!Day Deutschland 2013

2. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Inhalt
● Was ist ein Virtuemart Template?
● Joomla Overrides
● CSS und Javascript
● Browser Developer-Tools
● Includes
● Vorhandene Daten finden und ausgeben
● Virtuemart Parameter
● Eigene Daten nachladen

3. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Was ist ein Virtuemart Template?
● Eine Kombination aus Virtuemart Theme und Joomla
Template
● Greift sowohl im Shop als auch in den Standard-Joomla-
Views
● Man unterscheidet zwischen CSS-Overrides und Code-
Overrides

4. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Was ist ein Override?
● Es überschreibt die Ausgabe der View einer Komponente
oder eines Moduls
● Es wird automatisch geladen sobald es angelegt wurde
● Es wird bei einem Update nicht überschrieben
● Wie finde ich das richtige Override?
● Es befindet sich im Template-Ordner
Original:
/components/$component/views/$view/tmpl/
Override:
/templates/$template/html/$component/$view/

5. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
CSS und Javascript
$doc = JFactory::getDocument();
● Eigene CSS Datei laden:
$doc->addStyleSheet(JURI::base() .
'templates/yag_vision_vt/css/style.css');
● Eigene Javascript Datei laden:
$doc->addScript($this->baseurl .
'/templates/yag_vistion_vt/javascript/script.js');
Ob die Datei erfolgreich geladen wurde kann man mit Hilfe des Quellcodes
überprüfen.

6. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
CSS und Javascript
● Eigenen CSS Code einfügen
$document->addStyleDeclaration(".foo{ color:#eee;}");
● Eigenen Javascript Code einfügen
$document->addScriptDeclaration('...');

7. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Browser Developer Tools
● CSS „Regeln finden“
● Ladezeiten analysieren
● Fehler finden
– 404, Javascript Fehler, …
● Ajax-Requests analysieren

8. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com

9. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Includes
● Sorgen für strukturierten Code
– z.B. in Tabs, Schleifen, etc.
● Code kann wiederverwendet werden
– z.B. Featured Products, Latest Products, …
● Liegen im gleichen Ordner wie die View
<?php echo $this->loadTemplate('items'); ?>
<?php include 'default_items.php'; ?>

10. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Daten finden und anzeigen
● Daten stammen aus Models (und Controllern)
● Verschiedene Datentypen
– Strings, Numbers, Arrays, Objekte
● Verschiedene Anlaufstellen
– original View(s)
– view.html.php
/components/$component/views/$view/view.html.php
● Wie gebe ich Daten aus?

11. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Virtuemart Parameter
● Befinden sich in VmConfig
● Alle Parameter anzeigen
print_r(VmConfig::loadConfig());
● Einzelnen Parameter auslesen
VmConfig::get('param_name');

12. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Eigene Daten nachladen
● Helper Klasse anlegen und einbinden.
– Kann überall verwendet werden.
– View bleibt aufgeräumt.
● Daten in der Datenbank suchen.
● Methode in Helper erstellen um Daten zu laden.
$Dbo = JFactory::getDbo();
$Dbo->setQuery('SELECT * FROM #__foo');
$data = $Dbo->loadAssocList();

13. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Fragen?
www.yagendoo.com

14. www.yagendoo.com • yagendoo Media GmbH • team@yagendoo.com
Vielen Dank für Ihre Aufmerksamkeit!