Eigenes Template

Was ist ein Template?

Das Template des Shops ist die „optische Grundstruktur“ bzw. „das grundlegende Aussehen“ Ihres Shops.
Mit Hilfe des Templates wird die Anordnung sämtlicher Elemente aller Shop-Seiten vorgegeben.

Bemerkung

Das Template ist nicht zu verwechseln, mit dem Theme!

Das Theme ist eine Teil des Templates, welches eine noch feinere Anpassung der Shop-Seiten ermöglicht.

Der bevorzugte Weg zum eigenen Template: Child-Templates

Um ein eigenes Template zu entwickeln, müssen Sie ein Child-Template anlegen. Wie das geht, wird auf dieser Seite erklärt.

Mit diesem Child-Template können Sie Style-, JavaScript- oder PHP-Dateien der in JTL-Shop mitgelieferten Standard-Templates „EVO“ und „NOVAerweitern oder überschreiben. Dabei werden alle Dateien des Templates von JTL-Shop geladen, außer denjenigen, die Sie in Ihr Child-Template kopiert und somit „überschrieben“ haben. In Ihrem Child-Template können Sie nun einzelne Passagen des Shops (Blocks) oder auch komplette Dateien austauschen.
Das mitgeliefert Template bleibt dabei erhalten und updatefähig, da es nicht verändert werden muss.

Die Struktur eines Child-Templates inkl. LESS- oder CSS-Dateien sieht dann in etwa so aus:

templates/childEvo/
├── css
│   └── mytheme.css
├── js
│   └── custom.js
├── php
│   └── functions.php
├── themes
│   ├── base
│   │   ├── images
│   │   ├── less
│   │   └── fileinput.min.css
│   └── my-evo
│       ├── less
│       └── bootstrap.css
├── preview.png
├── README.md
└── template.xml

Bemerkung

Manche Dateien, wie z. B. functions.php, sind nur exemplarisch in dieser Struktur abgebildet und nicht obligatorisch.
Dies soll nur aufzeigen, dass Sie auch Funktionen überschreiben können.

Ein neues Child-Template erstellen

Am einfachsten ist es, wenn Sie mit einem Beispiel-Child-Template beginnen.

Bis einschließlich Version 4.05 wird ein Beispiel Child für das EVO-Template im Installationspaket von JTL-Shop mitgeliefert.

Falls Sie eine aktuelle Version des Shops nutzen, können Sie das Child-Template manuell von der Projektseite Child-Templates herunterladen.

Das Anlegen eines Child-Templates ist in Shop 4.x und 5.x fast identisch, lediglich der Aufbau der einzelnen Templates unterscheidet sich.
So existiert für jedes der von JTL ausgelieferten Templates ein entsprechendes Beispiel.

Vorsicht

Verwenden Sie kein Beispiel Child produktiv!
Wir empfehlen, mit einer Kopie in einem neuen Verzeichnis zu starten.

Vorgehen am Beispiel der „EVO-Child-Vorlage“

Sie finden die Evo-Child-Vorlage auf der Projektseite evo-child-vorlag.

Für ein neues Child-Template benennen Sie zunächst den Ordner evo-child-vorlage/ in den gewünschten Template-Namen um, z. B. Mein-Shop-Template/.
Im Unterordner <Shop-Root>/templates/Mein-Shop-Template/ finden Sie die Datei template.xml.

Wenn Sie also beispielsweise das EVO-Template von JTL-Shop erweitern möchten, sollte die template.xml wie folgt aussehen:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template isFullResponsive="true">
    <Name>Mein-Shop-Template</Name>
    <Author>Max Mustermann</Author>
    <URL>https://www.mein-shop.de</URL>
    <Version>1.00</Version>
    <ShopVersion>403</ShopVersion>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Das ist mein eigenes Template!</Description>
</Template>

Dabei ist zu beachten, dass unter <Parent> das Eltern-Template (repräsentiert durch den Ordnernamen) eingetragen wird, welches angepasst werden soll.

Hinweis

Das Attribute isFullResponsive=“true|false“ im Tag <Template> kennzeichnet, dass sich Ihr neues Template vollständig responsive verhält, also automatisch an jede Auflösung anpasst.

Wenn Sie Ihr Child-Template vom Evo- oder NOVA-Template ableiten, dann sollten Sie dies immer auf true einstellen.
Das Attribut bewirkt bei der Einstellung auf true, dass im Backend die Option „Standard-Template für mobile Endgeräte?“ nicht mehr ausgewählt werden kann und eine Warnung ausgegeben wird, falls dies (noch) so sein sollte.

Bereits jetzt können Sie Ihr Template im Shop-Backend aktivieren.
Da noch keine Änderungen vorgenommen wurden, erkennen Sie in Ihrem Shop noch keinen Unterschied.

Ihr Template aktivieren

Wenn Sie nun alle Änderungen an Ihrem Child-Template vorgenommen haben, gehen Sie in das Backend von JTL-Shop.
Navigieren Sie im Backend des Shops zum Menü Template und klicken Sie dort auf den Button Aktivieren neben Ihrem Child-Template.

In der folgenden Eingabemaske können Sie nun im Abschnitt Theme Ihr Theme aus der Select-Box auswählen. Auch andere Template-Einstellungen können Sie hier vornehmen.
Klicken Sie anschließend am Ende der Seite auf Speichern, um Ihr Template in Betrieb zu nehmen.

Nach dem Ändern von Templateeinstellungen und/oder dem Wechsel von Themes empfiehlt es sich, die entsprechenden Zwischenspeicher des Shops zu leeren.
Hierzu navigieren Sie im Backend-Menü auf den Menüpunkt „System“ (Shop 4.x) bzw. „Einstellungen“ (Shop 5.x) und klicken auf „Cache“. Wählen Sie hier „Template“ in der dazugehörigen Checkbox aus. Anschließend klicken Sie am Ende der Seite auf den Button absenden, um den Cache zu leeren.

Nun sollten Ihr Child-Template aktiviert sein, sodass Sie Ihre Änderungen in Ihrem JTL-Shop sehen können.

Eigenes Hintergrundbild

Um beispielsweise ein eigenes Hintergrundbild in Ihrem Shop einzurichten, kopieren Sie Ihr Hintergrundbild, als JPG oder PNG in den Ordner <Shop-Root>/templates/Mein-Shop-Template/themes/[my-evo]/ Ihres EVO-Child-Templates.

Sie können nun das Hintergrundbild in den Template-Einstellungen Ihres EVO-Child-Templates im Backend von JTL-Shop einstellen, indem Sie in der Pulldownliste für „Hintergrundbild“ die Auswahl „Custom“ am Ende der Liste auswählen.

Bemerkung

Dies gilt nut für das EVO-Template. Im NOVA-Template gibt es kein Hintergrundbild.

Im Gegensatz hierzu wäre im NOVA-Template eine Änderung des Hintergrundes über dessen Farbwerte zu bewerkstelligen.
Hierfür kann das Plugin „JTL Theme-Editor“ genutzt werden. Weitere Informationen dazu finden Sie im Abschnitt „Themes editieren“.

Überschreiben bestehender Skripte

Falls Sie im Parent-Template definierte JavaScript-Dateien überschreiben möchten, fügen Sie dem File-Eintrag das Attribut override="true" hinzu und erstellen Sie Ihre eigene Version der JavaScript-Datei im Unterverzeichnis js/.

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Template isFullResponsive="true">
    <Name>Mein-Shop-Template</Name>
    <Author>Max Mustermann</Author>
    <URL>https://www.mein-shop.de</URL>
    <Parent>Evo</Parent>
    <Preview>preview.png</Preview>
    <Description>Mein erstes Child-Template</Description>

    <Minify>
        <JS Name="mythememini.js">
            <File Path="js/mytheme.js"/>
            <File Path="js/jtl.evo.js" override="true"/>
        </JS>
    </Minify>
    <Boxes>
        <Container Position="right" Available="1"></Container>
    </Boxes>
</Template>

Dieses Beispiel würde bewirken, dass die Datei js/jtl.evo.js Ihres Child-Templates anstelle der originalen Datei des Evo-Templates eingebunden wird. Ohne das override-Attribut würde die genannte Datei zusätzlich zur jtl.evo.js des Parent-Templates eingebunden werden.

Änderungen an Template-Dateien

Template-Dateien (Dateiendung .tpl) können auf zwei Arten angepasst werden:

  • einzelne Teile („Blocks“)
  • komplette Struktur einer Template-Datei

Anpassungen über Blocks

Blocks“ sind im Template-Code, namentlich definierte Stellen, die im Child-Template, über diese Namen, erweitert oder ersetzt werden können.
Möglich ist dies dank der Fähigkeit des Smarty-Frameworks, „Vererbung“ von Templates zu erlauben.

Beispielsweise können Sie im Header Ihres Shops individuelle Dateien laden, das Logo austauschen, oder das Menü anpassen.
Alle JTL-Templates besitzen bereits viele vordefinierte Blocks, die Sie verändern können.

Blocks sind in den Template-Dateien an folgender Struktur zu erkennen:

{block name="<name des blocks>"}...{/block}

Wenn Sie nun eine bestimmte Template-Datei verändern möchten, kopieren Sie diese aus dem Parent-Template und fügen Sie an der gleichen Stelle in Ihr Child-Template-Verzeichnis ein.

Achtung

Die Ordnerstruktur im Child-Template muss der des Parent-Templates entsprechen.

Beispiel: templates/Evo/layout/header.tpl -> templates/Mein-Shop-Template/layout/header.tpl

Möchten Sie beispielsweise den Seitenkopf Ihres Shops anpassen, erstellen Sie in Ihrem Child-Template-Verzeichnis den Ordner layout/ und darin die Datei header.tpl.
Nun fügen Sie in dieser header.tpl Ihres Child-Templates folgenden Code ein:

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

Mit dieser Zeile wird die Child-Template-Datei header.tpl angewiesen, die Parent-Template-Datei header.tpl (hier aus dem EVO-Template) zu erweitern („extends“).

Möchten Sie nun beispielsweise den Seitentitel verändern, finden Sie in der header.tpl den Block ‚head-title‘ :

<title>{block name="head-title"}{$meta_title}{/block}</title>

Dieser Block kann nun auf drei verschiedene Arten geändert werden.

1. „Ersetzen“

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

{block name="head-title"}Mein Shop!{/block}

Hierbei wird der komplette Block ersetzt:

  • Ursprüngliche Ausgabe: {$meta_title}
  • Neue Ausgabe: Mein Shop!

2. „Text hängen“:

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

{block name="head-title" append} Mein Shop!{/block}

Hier wird der eingegebene Text an den meta-title der Seite angehängt:

  • Ursprüngliche Ausgabe: {$meta_title}
  • Neue Ausgabe: {$meta_title} Mein Shop!

3. „Text voranstellen“:

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

{block name="head-title" prepend}Mein Shop! {/block}

Hiermit wird der eingegebene Text dem meta-title der Seite vorangestellt:

  • Ursprüngliche Ausgabe: {$meta_title}
  • Neue Ausgabe: Mein Shop! {$meta_title}

In Ihrem Child-Template befinden sich nun nur noch die Template-Dateien, die Sie verändert haben. Die komplette Templatestruktur aus dem jeweiligen Parent-Template ist nicht erforderlich.
Wird das Parent-Template aktualisiert, beispielsweise durch ein offizielles Update, müssen nur wenige bis gar keine Anpassungen an Ihrem Child-Template vorgenommen werden.

Weitere Infos zu Blocks finden Sie auf smarty.net

Anpassung der gesamten Struktur

Vorsicht

Anpassungen der gesamten Template-Struktur können weitreichende Folgen haben! Gehen Sie bei der Bearbeitung deshalb bitte sehr vorsichtig vor.

Wenn Sie die komplette Struktur einer Template-Datei anpassen wollen, können Sie auch eine Datei mit gleichem Namen wie im Parent-Template erstellen, aber den Inhalt selbst festzulegen.
Dieses Vorgehen entspricht zwar im Weiteren der oben genannten Variante, allerdings werden nun keine Ersetzungen vom Shop mehr vorgenommen, wie dies in den originalen Template-Dateien normalerweise geschieht.

Der Hauptnachteil dieser Variante ist der Verlust der Update-Fähigkeit über das Parent-Template.
Wird im Zuge eines offiziellen Updates das Parent-Template umfangreich geändert, so müssen diese Änderungen händisch in das Child-Template übernommen werden.

Eigenen CSS-Code einfügen

Wie man eigenen CSS-Code in das Child-Template einfügt, finden Sie hier: Eigenes Theme