Tipps und Tricks

Bei diesen Tipps & Tricks wird davon ausgegangen, dass ein eigenes Child-Template angelegt wurde.
Dies stellt unter anderem sicher, dass das entsprechende (Parent-)Template weiterhin updatefähig bleibt.

Bemerkung

Die JTL-Templates des Shops basieren auf leicht unterschiedlichen Technologien zur Seitendarstellung:
Das EVO-Template nutzt als CSS-Spracherweiterung LESS,
Das NOVA-Template nutzt hierfür Sass (SCSS).

Beide Technologien sind Erweiterungen der herkömmlichen CSS-Syntax und schaffen hauptsächlich die Möglichkeit, CSS ähnlich komfortabel zu schreiben wie Programm-Code.
Diese Technologien setzen einen Pre-Prozessor voraus, um die jeweilige Style-Sprache in CSS zu übersetzen. Je nach Template und Shop-Version gibt es hierfür unterschiedliche Werkzeuge (siehe Abschnitt „Theme editieren“).

LESS und SCSS

Mithilfe von LESS und SCSS können Sie verschiedene Werte für Farben, Schriften, Abstände und Rahmen als Variablen definieren, die dann in allen oder auch nur einigen Templates benutzt werden können.
Um nun schnell und einfach das Aussehen von JTL-Shop zu verändern, bietet es sich an, diese LESS- oder SCSS-Variablen des Templates in einem Child-Template zu überschreiben.

Wie Sie mit LESS-Dateien in Ihrem Child-Template arbeiten, finden Sie im Bereich: Arbeiten mit LESS.
In diesem Abschnitt wird ebenso beschrieben, wie Sie die Variablen des Templates mit Ihrem Child-Template überschreiben können.

Theme-Variablen

Diese Variablen sind, soweit möglich, in einigen wenigen Dateien zusammengefasst.

Im EVO-Template liegen sie im Ordner <Shop-Root>/templates/Evo/themes/bootstrap/less/variables.less.
Im NOVA-Template liegen sie im Ordner <Shop-Root>templates/NOVA/themes/clear/sass/_variables.scss.

Hinweis

Es gibt noch viele weitere Variablen in der variables.less bzw. _variables.scss. Sehen Sie sich diese Datei(en) an und probieren Sie es aus, einige Werte zu ändern.

Merkmale abfragen

Merkmale dienen, auf der Artikeldetailseite, der Auflistung bestimmter Artikeleigenschaften wie z. B. der Farbe des Produktes.
Merkmale werden in JTL-Wawi, pro Sprache, definiert.

Template-Code
im EVO-Template: templates/Evo/productdetails/attributes.tpl :

{block name='productdetails-attributes-shop-attributes'}
    {foreach $Artikel->Attribute as $Attribut}
        <div class="list-group-item attr-custom">
            <div class="list-group-item-heading">{$Attribut->cName}: </div>
            <div class="list-group-item-text attr-value">{$Attribut->cWert}</div>
        </div>
    {/foreach}
{/block}

im NOVA-Template: templates/NOVA/productdetails/attributes.tpl :

{block name='productdetails-attributes-shop-attributes'}
    {foreach $Artikel->Attribute as $Attribut}
        <tr class="attr-custom">
            <td class="h6">{$Attribut->cName}: </td>
            <td class="attr-value">{$Attribut->cWert}</td>
        </tr>
    {/foreach}
{/block}

Der Zugriff ist auch über ein assoziatives Array möglich:

{assign var="attrname" value="Name des Funktionsattributes hier eintragen"}
{$Artikel->AttributeAssoc.$attrname}

Funktionsattribute

In JTL-Wawi können Sie in den Artikeldetails im Reiter „Attribute/Merkmale“ sogenannte Funktionsattribute im Artikel hinterlegen.
Anders als Artikelattribute (siehe vorheriger Abschnitt „Merkmale“) werden Funktionsattribute nicht mehrsprachig definiert, da sie Funktionalitäten und Aktionen im Shop auslösen bzw. das Template steuern können.
(Siehe auch: Beispielartikel mit Funktionsattributen im JTL-Demoshop)

Funktionsattribute am Artikel stehen templateseitig in den Artikeldetails als Variable zur Verfügung und können artikelbezogen im Frontend abgefragt werden.

Funktionsattribute können im Template per {$Artikel->FunktionsAttribute.funktionsattributname} ausgelesen werden.
(„funktionsattributname“ reflektiert hier den Namen des Funktionsattributes, wie es in JTL-Wawi definiert wurde)

Natürlich können Sie auch eigene Funktionsattribute in JTL-Wawi anlegen und diese im Shop-Template nutzen.

Achtung

Schreiben Sie Funktionsattributnamen auch dann in Kleinbuchstaben, wenn deren Namen in JTL-Wawi Großbuchstaben enthalten.

Beispiel:

Sie möchten ein Funktionsattribut highlightclass neu erstellen und abfragen sowie abhängig davon den Hintergrund der Kurzbeschreibung auf der Artikeldetailseite in Gelb erscheinen lassen, quasi „highlighted“.

Wir gehen hier wieder von einem eigenen Child-Template aus (siehe „Eigenes Template“).
Definieren Sie die CSS-Klasse in einer eigenen custom.css Datei.
Geladen wird diese CSS-Klasse via template.xml, Tag <Minify><CSS Name="clear.css">...</CSS> für das jeweilige Theme. In NOVA ist es das Theme „clear“.

/* custom.css */
.highlightclass {
    background-color: yellow;
}

Das neue Funktionsattribut soll den Name highlightclass tragen und muss natürlich noch in JTL-Wawi angelegt werden.
Rufen Sie dazu in JTL-Wawi die Artikelstammdaten des Zielartikels auf und wechseln Sie in den Reiter „Attribute/Merkmale“. Diese zweigeteilte Maske beinhaltet im oberen Bereich „Artikelattribute“ die Attribute, die wir anreichern wollen.
Klicken Sie rechts auf Attribute verwalten und wählen Sie in der folgenden Maske unter „Attribut anlegen“ den Unterpunkt „neues Funktionsattribut“ aus. Vergeben Sie einen Namen und legen Sie den Onlineshop fest, an den dieses Attribut gesendet werden soll.

Ändern Sie nun in der Template-Datei templates/NOVA/productdetails/details.tpl den folgenden Code-Block so ab,
dass Sie den Wert des Funktionsattributes einfügen können, wenn er gesetzt ist:

/* productdetails/details.tpl */
{block name='productdetails-details-info-description'}
    {include file='snippets/opc_mount_point.tpl' id='opc_before_short_desc'}
    <div class="{if !empty($Artikel->FunktionsAttribute.highlightclass)}{$Artikel->FunktionsAttribute.highlightclass} {/if}shortdesc mb-2 d-none d-md-block" itemprop="description">
        {$Artikel->cKurzBeschreibung}
    </div>
{/block}

Sonderfall: „Sonderzeichen im Funktionsattributnamen“
Bei Sonderzeichen im Namen des Funktionsattributes können Sie wie folgt darauf zugegreifen:

{assign var="fktattrname" value="größe"}
{$Artikel->FunktionsAttribute.$fktattrname}

Kategorieattribute abfragen

Ähnlich den Funktionsattributen eines Artikels lassen sich in der JTL-Wawi, in den Kategoriedetails, auch Kategorieattribute definieren. Diese werden beim Synchronisieren zum Onlineshop übertragen und können dort Steuerungsaufgaben übernehmen können.

Beginnend mit Shop-Version 4.0 werden Kategorie-Funktionsattribute und Kategorieattribute unterschieden.
Kategorie-Funktionsattribute (categoryFunctionAttributes) sind key/value-Paare die zur Aufnahme der Funktionsattribute dienen, während Kategorieattribute in Form von „array of objects“ lokalisierte Kategorieattribute aufnehmen.
Funktionsattribute dienen der Steuerung von Aktionen im Onlineshop selbst nur im Template, während Kategorieattribute lokalisierte Werte - passend zur eingestellten Shop-Sprache - enthalten können.

Diese Kategorieattribute können im Template wie folgt abgefragt werden:

PHP-Code für Funktionsattribut
(Einbindung in Plugins oder in die php/functions.php des Templates):

$Kategorien = new KategorieListe();
$Kategorien->getAllCategoriesOnLevel( 0 );
foreach ($Kategorien->elemente as $Kategorie) {
  $funktionsWert = $Kategorie->categoryFunctionAttributes['meinkategoriefunktionsattribut'];
}

PHP-Code für lokalisiertes Attribut
(Einbindung als Plugin oder in die php/functions.php des Templates):

$Kategorien = new KategorieListe();
$Kategorien->getAllCategoriesOnLevel( 0 );
foreach ($Kategorien->elemente as $Kategorie) {
  $attributWert = $Kategorie->categoryFunctionAttributes['meinkategorieattribut']->cWert;
}

Template-Code
zur Steuerung mittels Kategorie-Funktionsattributen in der Kategorieansicht (am besten mit der Smarty Debug-Konsole nach dem eigenen Kategorieattribut suchen):

{if $oNavigationsinfo->oKategorie->KategorieAttribute.meinkategoriefunktionsattribut === 'machedies'}
    <span>MacheDies</span>
{else}
    <span>MacheDas</span>
{/if}

Template-Code
zur Ausgabe eines lokalisierten Kategorieattributs in Kategorieansicht (am besten mit der Smarty Debug-Konsole nach dem eigenen Kategorieattribut suchen):

<span>{$oNavigationsinfo->oKategorie->KategorieAttribute.meinkategorieattribut->cWert}</span>

Eigene Sprachvariablen verwenden

Um eigene Sprachvariablen zu erstellen, öffnen Sie im Backend von JTL-Shop die „Sprachverwaltung“ (Einstellungen -> Sprachverwaltung) und klicken Sie auf die Schaltfläche Variable hinzufügen .
Per Smarty-Funktion {lang} und den Parametern key und section können Sie diese Variablen im Template verwenden.

Beispiel:

Fügen Sie über die Sprachverwaltung folgende Sprachvariable hinzu:

Sprachsektion:custom
Variable:„safetyBoxTitle“
Wert Deutsch:„SSL-Verschlüsselung“
Wert Englisch:„SSL-Encryption“

Template-Code:

{lang key="safetyBoxTitle" section="custom"}

PHP-Code (z. B. in Plugins, wobei hier im Beispiel der Plugin-Kontext gegeben ist; zu erkennen am $this->):

$langVar = $this->getLocalization()->getTranslation('safetyBoxTitle');

Sprachvariable als Smarty-Variable speichern und abfragen:

Template-Code:

{* Sprachvariable einfügen *}
{lang key="safetyBoxTitle" section="custom"}

{* Variable mit assign zuweisen *}
{lang assign="testVariableSafetyBoxTitle" key="safetyBoxTitle" section="custom"}

{* die zuvor zugewiesene Variable kann nun normal aufgerufen oder abgefragt werden *}
{if $testVariableSafetyBoxTitle eq "SSL-Verschlüsselung"}<span class="de">{$testVariableSafetyBoxTitle}</span>{else}<span>{$testVariableSafetyBoxTitle}</span>{/if}

Erstellen eigener Smarty-Funktionen

Um in Ihrem Template eigene Smarty-Funktionen nutzen zu können, legen Sie im Verzeichnis [templatename]/php/ eine Datei functions.php an.
Diese Datei wird automatisch beim Start geladen und ermöglicht das Registrieren von Smarty-Plugins.

Achtung

Die so erstellte functions.php ersetzt das Original aus dem Vatertemplate vollständig! Stellen Sie deshalb sicher, dass alle geerbten Funktionen ebenfalls implementiert werden!

Theoretisch könnten Sie einfach eine komplette Kopie der Datei aus dem Parent-Template erstellen und dort Ihre Änderungen vornehmen. Das ist jedoch nicht sehr sinnvoll, da dann bei jedem Update des Onlineshops alle Änderungen nachgezogen werden müssten.
Besser ist es, das Original einfach per include in das eigene Script einzubinden.

Um die Update-Fähigkeiten Ihres Parent-Templates weiterhin zu gewährleisten, erstellen Sie eine leere functions.php und fügen dort den folgenden Code ein:

 <?php
 /**
  * Eigene Smarty-Funktionen mit Vererbung aus dem Vatertemplate
  *
  * @global JTLSmarty $smarty
  */

 include realpath(__DIR__ . '/../../Evo/php/functions.php');

Danach können Sie Ihre eigenen Smarty-Funktionen implementieren und in Smarty registrieren.

Im nachfolgenden Beispiel wird eine Funktion zur Berechnung der Kreiszahl PI eingebunden.

$smarty->registerPlugin('function', 'getPI', 'getPI');

function getPI($precision)
{
    $iterator = 1;
    $factor   = -1;
    $nenner   = 3;

    for ($i = 0; $i < $precision; $i++) {
        $iterator = $iterator + $factor / $nenner;
        $factor   = $factor * -1;
        $nenner  += 2;
    }

    return $iterator * 4;
}

Die Funktion getPI kann dann im Template z. B. mit {getPi(12)} verwendet werden.

Überschreiben bestehender Funktionen

Das Überschreiben von Funktionalitäten ist ebenfalls möglich.
Hierzu muss lediglich die Registrierung der originalen Funktion zuerst mit $smarty->unregisterPlugin aufgehoben werden.
Danach kann die eigene Funktion registriert werden.

Im nachfolgenden Beispiel wird die Funktion trans des EVO-Templates dahingehend erweitert, dass bei nicht vorhandener Übersetzung der Text „-no translation-“ ausgegeben wird.

$smarty->unregisterPlugin('modifier', 'trans')
       ->registerPlugin('modifier', 'trans', 'get_MyTranslation');

/**
 * Input: ['ger' => 'Titel', 'eng' => 'Title']
 *
 * @param string|array $mixed
 * @param string|null $to - locale
 * @return null|string
 */
function get_MyTranslation($mixed, $to = null)
{
    // Aufruf der "geerbten" Funktion aus dem Original
    $trans = get_translation($mixed, $to);

    if (!isset($trans)) {
        $trans = '-no translation-';
    }

    return $trans;
}

Unabhängige Artikellisten erzeugen

Ab JTL-Shop Version 3.10, bis einschließlich 5.0, ist es möglich, eigene Artikel-Arrays über eine Smarty-Funktion {get_product_list} zu erzeugen.
Dies kann beispielsweise dazu genutzt werden, um auf bestimmte Artikel(-gruppen) abseits von Cross-Selling gesondert aufmerksam zu machen.

Der Funktion können die folgenden Parameter übergeben werden:

Parametername Typ Pflichtattribut Beschreibung
nLimit Numeric Ja Maximale Anzahl Artikel, welche geholt werden sollen
cAssign String Ja Name der Smarty-Variable, in welcher das Array mit Artikeln gespeichert wird
kKategorie Numeric Primärschlüssel einer Kategorie, siehe Datenbank tkategorie.kKategorie
kHersteller Numeric Primärschlüssel eines Herstellers, siehe Datenbank thersteller.kHersteller
kArtikel Numeric Primärschlüssel eines Artikels, siehe Datenbank tartikel.kArtikel
kSuchanfrage String Primärschlüssel einer Suchanfrage, siehe Datenbank tsuchcache.kSuchCache
kMerkmalWert String Primärschlüssel eines Merkmalwerts, siehe Datenbank tmerkmalwert.kMerkmalwert
kSuchspecial Numeric Filterung nach Suchspecials, siehe Tabelle unten „Suchspecialschlüssel
kKategorieFilter Numeric Zusätzlicher Filter nach einer Kategorie in Kombination mit einem Hauptfilter z. B. kHersteller.
kHerstellerFilter Numeric Zusätzlicher Filter nach einem Hersteller in Kombination mit einem Hauptfilter z. B. kKategorie. Primärschlüssel siehe Datenbank thersteller.kHersteller
nBewertungSterneFilter Numeric Zusätzlicher Filter nach Mindest-Durschnittsbewertung in Kombination mit einem Hauptfilter, z. B. kKategorie.
cPreisspannenFilter String Zusätzlicher Filter nach Preisspanne in Kombination mit einem Hauptfilter, z. B. kKategorie. Schreibweise für „von 20 € bis 40,99 €“: „20_40.99“
nSortierung Numeric Gibt an, nach welchem Artikelattribut sortiert werden soll. Details siehe Tabelle unten „Sortierungsschlüssel
cMerkmalFilter String Primärschlüssel der Merkmalwerte durch Semikolon getrennt, z. B. „100;101“. Primärschlüsselangabe siehe Datenbank tmerkmalwert.kMerkmalwert
cSuchFilter String Primärschlüssel der Suchfilter durch Semikolon getrennt, z. B. „200;201“. Primärschlüsselangabe siehe Datenbank tsuchcache.kSuchCache
cSuche String Suchbegriff, z. B. „zwiebel ananas baguette“

Beispiel

Binden Sie den folgenden Code im Template ein:

<h2>Unsere Verkaufschlager aus dem Bereich Gemüse</h2>
{get_product_list kKategorie=9 nLimit=3 nSortierung=11 cAssign="myProducts"}
{if $myProducts}
  <ul>
  {foreach name=custom from=$myProducts item=oCustomArtikel}
    <li><a href="{$oCustomArtikel->cURLFull}">{$oCustomArtikel->cName}</a></li>
  {/foreach}
  </ul>
{/if}

Sortierungsschlüssel

Name Wert Konstante
Standard 100 SEARCH_SORT_STANDARD
Artikelname von A bis Z 1 SEARCH_SORT_NAME_ASC
Artikelname von Z bis A 2 SEARCH_SORT_NAME_DESC
Preis aufsteigend 3 SEARCH_SORT_PRICE_ASC
Preis absteigend 4 SEARCH_SORT_PRICE_DESC
EAN 5 SEARCH_SORT_EAN
neuste zuerst 6 SEARCH_SORT_NEWEST_FIRST
Artikelnummer 7 SEARCH_SORT_PRODUCTNO
Verfügbarkeit 8 SEARCH_SORT_AVAILABILITY
Gewicht 9 SEARCH_SORT_WEIGHT
Erscheinungsdatum 10 SEARCH_SORT_DATEOFISSUE
Bestseller 11 SEARCH_SORT_BESTSELLER
Bewertungen 12 SEARCH_SORT_RATING

Suchspecialschlüssel

Name Wert Konstante
Bestseller 1 SEARCHSPECIALS_BESTSELLER
Sonderangebote 2 SEARCHSPECIALS_SPECIALOFFERS
Neu im Sortiment 3 SEARCHSPECIALS_NEWPRODUCTS
Top-Angebote 4 SEARCHSPECIALS_TOPOFFERS
In Kürze verfügbar 5 SEARCHSPECIALS_UPCOMINGPRODUCTS
Top bewertet 6 SEARCHSPECIALS_TOPREVIEWS
Ausverkauft 7 SEARCHSPECIALS_OUTOFSTOCK
Auf Lager 8 SEARCHSPECIALS_ONSTOCK
Vorbestellung möglich 9 SEARCHSPECIALS_PREORDER