JTL-Shop: Evo-TemplateBest Practices Template-Anpassung

David Hannappel

RückblickVier Generationen JTL-Shop (Templates)

!

2010

2015

2007

2005

2010

2015

2007

2005

2010

2015

2007

2005

2010

2015

2007

2005

Shop 4 Programmiersprachen

PHP51%

JavaScript22%

Smarty18%

CSS5%

Wie individuell darf es sein?Ein paar Beispiele

"

GrundlagenEvo-Templateaufbau

*

Das ist drin

Struktur

templates/{MeinTemplate}/

Subordner benannt nach Funktion

js, themes, template.xml

template.xml

Basis-Informationen,

Template-Einstellungen,

Genutzte JS-Dateien, CSS

(Master-Template)

In welcher Datei...?Template-Quelldateien finden

#

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

Suche z.B. nach Klassenname

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

$

Passende Variable finden

Debug-Plugin

Geladene Templatedateien

Variablen + Werte

Sessionvariablen

Alternativ: {$object|var_dump}

JTL-Debug-Plugin

STRG Enter+

Los geht`s - Wie kann ich Änderungen durchführen?

Fokus auf Wartbarkeit

%

Viele Wege führen zum Ziel

Original ändern

_custom.tpl

Child-Template

Plugin

&'

Child-TemplatesErben vom Parent-Template

(

Warum ein Child-Template?

) Updatesicherheit * Getrennter Code

+ Smarty Blocks , Erweitern statt Kopieren

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!

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}

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}

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}

(CSS-)Theme im Child-TemplateLESS editieren und zu CSS kompilieren

-

Vorhandenes Theme kopieren

template.xml anpassen (Theme registrieren)

less/variables.less und less/theme.less anpassen

bootstrap.css kompilieren

Theme im Child-Template

.

/

%

0

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

LiveStyler

(Im Evo-Editor-Plugin enthalten, aktivieren in TPL-Einstellungen)

Nicht für Produktivshops!

Muss ich immer erst kompilieren, um CSS-Änderungen zu sehen?

Troubleshooting„Jetzt seh ich eine weiße Seite“

1

Errorlogging aktivieren

includes/config.JTL-Shop.ini.php

// loglevel - smarty templates

define('SMARTY_LOG_LEVEL', E_ALL);

// display errors

ini_set('display_errors', 1);

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

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

Gutes Gelingen!

Ressourcen:

docs.jtl-shop.de

gitlab.jtl-software.de/jtlshop/shop4/

lesscss.org