Präsentation von der JTL-Connect 2016 zu Evo-Templates im JTL-Shop von David Hannappel

1. JTL-Shop: Evo-Template
Best Practices Template-Anpassung
David Hannappel

2. Rückblick
Vier Generationen JTL-Shop (Templates)
!

3. 2010
2015
2007
2005

4. 2010
2015
2007
2005

5. 2010
2015
2007
2005

6. 2010
2015
2007
2005

7. Shop 4 Programmiersprachen
PHP
51%
JavaScript
22%
Smarty
18%
CSS
5%

8. Wie individuell darf es sein?
Ein paar Beispiele
"

12. Grundlagen
Evo-Templateaufbau
*

13. Das ist drin

14. Struktur
templates/{MeinTemplate}/
Subordner benannt nach Funktion
js, themes, template.xml

15. template.xml
Basis-Informationen,
Template-Einstellungen,
Genutzte JS-Dateien, CSS
(Master-Template)

16. In welcher Datei...?
Template-Quelldateien finden
#

17. Template-Quelldateien finden
1. Element untersuchen im Browser
2. Suche im (Template-)Code:
Integrierte Entwicklungsumgebung
z.B. NetBeans, PHPStorm, Eclipse, Coda...
Oder hier: gitlab.jtl-software.de

18. Suche z.B. nach Klassenname

19. Gibt es eine Smarty-Variable...?
Die passende Variable finden
$

20. Passende Variable finden
Debug-Plugin
Geladene Templatedateien
Variablen + Werte
Sessionvariablen
Alternativ: {$object|var_dump}

21. JTL-Debug-Plugin
STRG Enter+

22. Los geht`s - Wie kann ich
Änderungen durchführen?
Fokus auf Wartbarkeit
%

23. Viele Wege führen zum Ziel
Original ändern
_custom.tpl
Child-Template
Plugin
&'

24. Child-Templates
Erben vom Parent-Template
(

25. Warum ein Child-Template?
) Updatesicherheit * Getrennter Code
+ Smarty Blocks , Erweitern statt Kopieren

26. Wie erstelle ich ein Child-Template?
1. templates/{ChildTemplate}
2. template.xml:
...
<Parent>Evo</Parent>
...
3. Anzupassende Tpl-Dateien in entsprechenden
Ordnern anlegen
(am Parent-Template orientieren)
4. Erweitern à Smarty Blocks
Evo-Child-Example liefert Beispiele!

27. Code-Beispiel: Smarty Blocks: Prepend
templates/{ChildTemplate}/layout/footer.tpl:
{extends file="{$parent_template_path}/layout/footer.tpl"}
{block name=“footer-additional" prepend}
<div id=“all-payment-options" class="row footer-additional">
...
</div>
{/block}

28. Code-Beispiel: Smarty Blocks: Append
templates/{ChildTemplate}/layout/header.tpl:
{extends file="{$parent_template_path}/layout/header.tpl"}
{block name="head-title" append} – günstig bei JTL{/block}

29. Code-Beispiel: Smarty Blocks: Replace
templates/{ChildTemplate}/layout/header.tpl:
{extends file="{$parent_template_path}/layout/header.tpl"}
{block name=“logo"}
<canvas id="canvas-logo"></canvas>
{/block}

30. (CSS-)Theme im Child-Template
LESS editieren und zu CSS kompilieren
-

31. Vorhandenes Theme kopieren
template.xml anpassen (Theme registrieren)
less/variables.less und less/theme.less anpassen
bootstrap.css kompilieren
Theme im Child-Template
.
/
%
0

32. bootstrap.css kompilieren
Evo-Editor-Plugin nutzen
theme/{mytheme} muss beschreibbar sein!
Alternativ - Konsolenbefehl:
php includes/plugins/evo_editor/version/100/adminmenu/cli.php mytheme

33. LiveStyler
(Im Evo-Editor-Plugin enthalten,
aktivieren in TPL-Einstellungen)
Nicht für Produktivshops!
Muss ich immer erst kompilieren, um CSS-Änderungen zu sehen?

34. Troubleshooting
„Jetzt seh ich eine weiße Seite“
1

36. Errorlogging aktivieren
includes/config.JTL-Shop.ini.php
// loglevel - smarty templates
define('SMARTY_LOG_LEVEL', E_ALL);
// display errors
ini_set('display_errors', 1);

37. Fehlerausgabe interpretieren
Fatal error: Uncaught --> Smarty Compiler: Syntax error in template
"htdocs/shop4_dev/templates/Evo/productdetails/details.tpl" on line
83 "<div class="rating-wrapper{hallo} col-xs-4 text-right" unknown
tag "hallo" <-- thrown in
/htdocs/shop4_dev/includes/vendor/smarty/smarty/libs/sysplugins/sma
rty_internal_templatecompilerbase.php on line 83

38. Fehlerausgabe interpretieren
Fatal error: Uncaught --> Smarty Compiler: Syntax error in template
"htdocs/shop4_dev/templates/Evo/productdetails/details.tpl" on line
83 "<div class="rating-wrapper{hallo} col-xs-4 text-right" unknown
tag "hallo" <-- thrown in
/htdocs/shop4_dev/includes/vendor/smarty/smarty/libs/sysplugins/sma
rty_internal_templatecompilerbase.phpon line 83

39. Gutes Gelingen!
Ressourcen:
docs.jtl-shop.de
gitlab.jtl-software.de/jtlshop/shop4/
lesscss.org