JTL-Shop Child-Template anlegen: Anleitung für NOVA

Wozu ein Child-Template?

Ein Child-Template ist ein eigener Template-Ordner, der auf einem Eltern-Template aufbaut. Meist ist das NOVA, das Standard-Template von JTL-Shop 5. Der Shop lädt alle Dateien aus NOVA und verwendet nur dort Ihre Fassung, wo im Child-Template eine eigene Datei liegt.

Bei einem Shop-Update bleibt Ihr Child-Template unangetastet. Wer direkt in den NOVA-Dateien arbeitet, verliert seine Anpassungen dagegen beim nächsten Update. Prüfen sollten Sie nach jedem Update trotzdem, ob Ihre Änderungen noch so funktionieren wie vorher.

Schritt 1: Vorlage NOVAChild herunterladen

JTL stellt mit NOVAChild eine fertige Vorlage für ein NOVA Child-Template bereit. Laden Sie sie herunter und entpacken Sie sie in den Ordner templates/ Ihres Shops. Danach sieht die Struktur so aus:

templates/
├── NOVA/
└── NOVAChild/
    ├── js/
    │   └── custom.js
    ├── themes/
    ├── Bootstrap.php
    ├── preview.png
    ├── README.md
    └── template.xml

Im Child-Template liegen später nur die Dateien, die Sie ändern. Alles andere holt sich der Shop weiterhin aus NOVA.

Schritt 2: template.xml prüfen

Die Datei template.xml beschreibt Ihr Child-Template. Zwei Einträge sind entscheidend: Name muss genau dem Ordnernamen entsprechen, und Parent nennt das Eltern-Template, also NOVA.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template isFullResponsive="true">
    <Name>NOVAChild</Name>
    <Author>Ihr Name</Author>
    <URL>https://www.ihr-shop.de</URL>
    <Version>1.0.0</Version>
    <MinShopVersion>5.0.0</MinShopVersion>
    <Parent>NOVA</Parent>
    <Preview>preview.png</Preview>
    <Description>Eigenes Child-Template auf Basis von NOVA</Description>
</Template>

Lassen Sie isFullResponsive auf true, wenn Sie von NOVA ableiten. Dann blendet das Backend die Einstellungen für ein separates „Template für mobile Endgeräte“ aus.

Wenn das Template anders heißen soll

Soll Ihr Template nicht NOVAChild heißen, ändern Sie drei Stellen gemeinsam: den Ordnernamen, den Eintrag Name in der template.xml und den Namespace in der Bootstrap.php. Der Namespace folgt dem Schema Template\IhrName. Sonderzeichen sind im Namen nicht erlaubt, weil JTL-Shop 5 die PHP-Klassen nach dem PSR-4-Standard lädt.

Schritt 3: Einzelne Bereiche über Smarty-Blöcke ändern

NOVA ist in benannte Smarty-Blöcke unterteilt, die Sie gezielt ersetzen oder ergänzen. Legen Sie dazu im Child-Template eine Datei mit demselben Pfad wie in NOVA an, zum Beispiel layout/header.tpl. Die Datei verweist in der ersten Zeile auf das Original und enthält danach nur die Blöcke, die Sie ändern:

{extends file="{$parent_template_path}layout/header.tpl"}

{block name='layout-header-head-title'}Mein Shop{/block}

Die Variable $parent_template_path enthält den Pfad zum Eltern-Template bereits mit abschließendem Schrägstrich. Einen Block können Sie ganz ersetzen, Text anhängen (append) oder Text voranstellen (prepend):

{block name='layout-header-head-title'}Mein Shop{/block}

{block name='layout-header-head-title' append} | Mein Shop{/block}

{block name='layout-header-head-title' prepend}Mein Shop | {/block}

Eine komplette .tpl-Datei zu ersetzen ist ebenfalls möglich. Dann müssen Sie diese Datei aber nach jedem Update mit der neuen NOVA-Fassung abgleichen. Mit einzelnen Blöcken bleibt dieser Aufwand meist klein.

Eigenes CSS und JavaScript

Eigene Styles legen Sie im Theme Ihres Child-Templates ab. Zusätzliche Skripte binden Sie im Block layout-footer-js der footer.tpl ein, mit dem Attribut async, damit die Seite nicht langsamer lädt.

Soll eine JavaScript-Datei aus NOVA vollständig ersetzt werden, tragen Sie sie in der template.xml in derselben Gruppe jtl3.js und mit demselben Pfad wie im Original ein, ergänzt um override="true". Ihre eigene Fassung legen Sie unter diesem Pfad im Child-Template ab, im Beispiel also unter js/global.js:

<Minify>
    <JS Name="jtl3.js">
        <File Path="js/global.js" override="true"/>
    </JS>
</Minify>

Fehlt override="true" oder weicht der Pfad ab, lädt der Shop Ihre Datei zusätzlich zum Original. Den Gruppennamen jtl3.js dürfen Sie nicht ändern.

Schritt 4: Child-Template aktivieren

Öffnen Sie im Backend unter Darstellung die Einstellungen › Templates und klicken Sie neben Ihrem Child-Template auf Aktivieren. Wählen Sie im Abschnitt Theme Ihr Theme aus und speichern Sie. Leeren Sie danach unter System › Cache den Template-Cache, damit Ihre Änderungen im Shop erscheinen.

Häufige Fehler

• Ordnername und Name in der template.xml weichen voneinander ab. JTL sieht vor, dass beide gleich sind, und Namespace sowie Eltern-Verweis richten sich nach dem Ordnernamen.
• Nach dem Umbenennen wurde der Namespace in der Bootstrap.php nicht angepasst.
• Die erste Zeile mit {extends …} fehlt in einer Datei, die nur einzelne Blöcke ändern soll.
• Änderungen wurden direkt im NOVA-Ordner gemacht und sind nach dem nächsten Update verschwunden.

Child-Template bei SALEPIX-Templates

Bei unseren JTL-Shop Templates müssen Sie nichts davon selbst einrichten. Ein Child-Template wird ab Werk mitgeliefert und ist sofort aktiviert, Ihre Anpassungen bleiben also bei Updates erhalten. Wenn Sie Änderungen am Template nicht selbst umsetzen möchten, übernimmt das unsere Custom-Entwicklung.