Template HowTo's

Die auf dieser Seite beschriebenen Anleitungen beziehen sich, wenn nicht anders angegeben, auf das JTL-Shop3-Tiny Template mit Theme "Tiny".
Farbwerte sind in Hexadezimalschreibweise angegeben.

Header anpassen

Der Header ist im JTL-Shop3-Tiny Template wie folgt aufgebaut:

<div id="header_wrapper">
  <div id="header">
    <div id="logo">...</div>
    <div id="headlinks">...</div>
    <div id="settings">...</div>
  </div>
  <div id="search">...</div>
  <div id="speciallinks">...</div>
</div>

Der Header im JTL-Shop3 Template lässt per Stylesheet z.B. theme.css leicht anpassen.

Bildschirmfoto des Header-Bereichs mit Hervorhebung von Block-Elementen, Anzeige der IDs und Classes ( Screenshot erstellt mit Web Developer Tools ):

header elements ids and classes outline

Haupt-Elemente im Header:

Element-ID Beschreibung CSS-Code-Beispiel
#header_wrapper Wrapper für #header, #search und #speciallinks #header_wrapper { background-color: #cccccc; }
#header Wrapper für #logo, #headlinks_wrapper und #settings #header { background-color: #123456; }
#headlinks Wrapper für die Haupt-Links im Header (Standardmäßig Links aus Linkgruppe "Kopf" + Warenkorb-Link) #headlinks li.basket > a { background-color: #888; color: #fff; }
#logo Wrapper für Firmenlogo #logo { margin-top: 30px; }
#search Wrapper für Produktsuche #search { background: none repeat scroll 0 0 transparent; padding: 0; position: relative; text-align: right; top: -100%; }
#speciallinks Wrapper für Bestseller, Top-Angebote, Neu etc. #speciallinks { display: none; }
#settings Wrapper für Login, Sprach- und Währungswechsel-Links #settings > ul > li > a { color: #ccc; }

Beispiel Header-Anpassung

Mit der folgenden CSS-Regel vergrößern wir den Header-Bereich auf 180px Höhe und fügen eine Hintergrundgrafik ein, die wir unter <demoshop-URL>/templates/JTLShop3-Tiny/themes/custom/images/header_background.jpg gespeichert haben. Die CSS-Anpassungen werden in diesem Beispiel in der theme.css des custom-Theme vorgenommen.

#header { height: 180px; background: transparent url(images/header_background.jpg) no-repeat top left; }

Die Such-Leiste versehen wir mit einer schwarzen Hintergrundfarbe:

#search { background-color: #000; }

Die Leiste mit besonderen Produkten (Bestseller, Top... ) blenden wir einfach aus:

#speciallinks { display: none; }

Breite des Shops anpassen

Bitte nutzen Sie für alle individuellen CSS-Anpassungen das benutzerdefinierte Theme, siehe auch Individuelle Theme Anpassung.

Flexible Shop-Breite 100%

Für eine flexible Shop-Breite, bei der sich die Breite an die Fenstergröße anpasst lautet die CSS-Regel:

.page_width { width: 100%; }

Fixe Shop-Breite 980px

Für eine feste Pixel-Breite von 980px nutzen Sie bitte diese Regel:

.page_width { width: 980px; } 

Mit 980px Breite lässt sich der Shop auch bei kleineren Auflösungen wie 1024x768 bedienen.

Farben, Hintergrundfarben, Hintergrundbilder und Schriftarten anpassen

Farben, Hintergrundfarben und Hintergrundbilder werden in CSS mit color und background gesetzt.
(Eine umfassende Dokumentation zu diesen CSS-Anweisungen finden Sie unter http://de.selfhtml.org/css/eigenschaften/hintergrund.htm )

Sie können praktisch jedes Element, das Sie per CSS-Selektor auswählen können, mit einer anderen Hintergrundfarbe bzw. einem anderen Hintergrundbild versehen.
Tipp: Firebug hat sich als sehr nützliches Werkzeug bewährt, um Farbanpassungen live im Browser zu testen.

Die CSS-Regeln zur Farbanpassung sollten so wie alle CSS-Anpassungen in die theme.css des jeweiligen Themes oder in eine eigene CSS-Datei geschrieben werden (Siehe auch Individuelle Theme Anpassung).

Globale Link-Farben anpassen

a, a:visited, a:link { color: #888; }
a:hover, a:visited:hover {  color: #123456; }

Hintergrundfarben anpassen

#page { background: #ccc none; }

Globale Buttons farblich anpassen

.submit { background: #333 none; border: 1px solid #888; color: #fff; text-shadow: #FE6 0px 1px 0px; }

Schriftart ändern

html { font-family: 'Trebuchet MS', Tahoma, Helvetica, Arial; }

Artikelattribute abfragen

Artikelattribute

Artikelattribute dienen in den Artikeldetails der Auflistung bestimmter Artikeleigenschaften wie z.B. Füllmenge. Artikelattribute werden in JTL-Wawi pro Sprache definiert .
Siehe auch Beispielartikel mit Attributen im JTL-Demoshop

Standardmäßig werden Artikelattribute im Shop in den Artikeldetails unter dem Beschreibungstext aufgelistet, sofern Artikelattribute vorhanden sind.

TPL-Code (Standardmäßig bereits im JTL-Shop3-Tiny Template enthalten in artikel_inc.tpl):

{if $Artikel->Attribute|@count > 0}
  <div class="attributes">
    {foreach name=Attribute from=$Artikel->Attribute item=Attribut}
      <p><b>{$Attribut->cName}:</b> {$Attribut->cWert}</p>
    {/foreach}
  </div>
{/if}

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 lassen sich in den Artikeldetails im Reiter Sonstiges/Sonderpreise Funktionsattribute zu dem Artikel hinterlegen. Anders als Artikelattribute (siehe vorheriger Abschnitt) werden Funktionsattribute nicht mehrsprachig definiert.
Funktionsattribute an einem Artikel lösen ein bestimmtes Ereignis aus oder steuern gewisse Funktionen im Shop oder Template.
Siehe auch Beispielartikel mit Funktionsattributen im JTL-Demoshop .

Funktionsattribute am Artikel stehen templateseitig in den Artikeldetails als Variable zur Verfügung und können auf solchen Seiten abgefragt werden.
Standardmäßig unterstützt der Shop die folgenden Funktionsattribute: Funktionsattribute für JTL-Shop2/3
Funktionsattribute können im Template per {$Artikel->FunktionsAttribute.FUNKTIONSATTRIBUTNAME} ausgelesen werden (FUNKTIONSATTRIBUTNAME durch den von Ihnen gewählten Funktionsattributnamen in der Wawi ersetzen).

Natürlich können auch eigene Funktionsattribute in der Wawi angelegt, und im Shop-Template abgefragt werden.

Wichtig: Funktionsattributnamen müssen lowercase (nur Kleinbuchstaben) ausgeschrieben werden, auch wenn der Name in JTL-Wawi Großbuchstaben enthält.

Beispiel:
Wir möchten ein Funktionsattribut "body_class" abfragen und abhängig davon eine besondere CSS-Klasse für das body-Element setzen:

TPL-Code (für header.tpl bzw. header_custom.tpl):

...
<body{if $Artikel->FunktionsAttribute.body_class} class="{$Artikel->FunktionsAttribute.body_class}"{/if} id="page_type_{$nSeitenTyp}">
...

Sonderfall Sonderzeichen im Funktionsattributnamen:
Bei Sonderzeichen im Namen des Funktionsattributs kann wie folgt darauf zugegriffen werden:

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

Kategorieattribute abfragen

In JTL-Wawi lassen sich in den Kategoriedetails Kategorieattribute definieren, welche beim Synchronisieren zum Shop übertragen werden.
Diese Kategorieattribute können im Template wie folgt abgefragt werden:

PHP-Code (Einbindung als Plugin oder Einbindung in php/functions.php):

$Kategorien = new KategorieListe();
$Kategorien->getAllCategoriesOnLevel( 0 );
foreach ($Kategorien->elemente as $Kategorie) {
  $Kategorie->KategorieAttribute["meinkategorieattribut"];
}

Smarty-Code zur Abfrage von Kategorieattributen in Kategorieansicht (am besten mit der Smarty Debug-Konsole nach dem eigenen Kategorieattribut suchen):

{$oNavigationsinfo->oKategorie->KategorieAttribute.meinkategorieattribut}

Eigene Sprachvariablen anlegen und ins Template einfügen

In der Sprachverwaltung im JTL-Shop-Admin-Backend ( Admin -> Sprachverwaltung ) lassen sich im Hinzufügen-Reiter eigene Sprachvariablen hinzufügen. Per Smarty-Funktion {lang} und den Parametern key und section können Sie diese Variablen im Template verwenden.

Beispiel:
Wir fügen über die Sprachverwaltung folgende Sprachvariable hinzu:
  • Sektion: custom
  • Variable: "safetyBoxTitle"
  • Wert Deutsch: "SSL-Verschlüsselung"
  • Wert Englisch: "SSL-Encryption"

TPL-Code:

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

PHP-Code (z.B. für Plugins):

echo $GLOBALS['oSprache']->gibWert('safetyBoxTitle', 'custom');

Sprachvariable als Smarty-Variable speichern und abfragen

TPL-Code:

{* 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}

Eigene Modal-Popups einbinden

Nachfolgend wird beschrieben, wie Sie einen Link erzeugen der durch Anklicken ein eigenes Modales Fenster (Popup) öffnet.
  • Erzeugen Sie zunächst eine Link (Anker-Element oder Button), geben Sie diesem die Klasse "popup" sowie eine eindeutige ID.
  • Anschließend erstellen Sie den Popup-Fensterinhalt als Div-Container mit class="hidden" und einer ID "popup" + als Suffix die ID des oben erzeugten Ankers, also z.B. id="popupMeinPopup".

Der folgende Code demonstriert, wie ein Popup im JTL-Shop3 eingebunden wird. Der Code funktioniert in Artikellisten und auf Artikeldetails-Seiten, da dort die JavaScript-Funktion registerPopups() aufgerufen wird.

<a class="popup" id="MeinPopup">Dieser Link öffnet mein Popup</a>

<div id="popupMeinPopup" class="hidden">
Inhalt des Popups
</div>

Auf anderen Seitentypen als Artikellisten und Artikeldetails ist es gegenenfalls erforderlich, registerPopups() beim Seitenaufruf zu laden:

<script type="text/javascript">
$(document).ready(function() {ldelim}
   register_popups();
{rdelim});
</script>

Eigene Artikellisten erzeugen und ins Template integrieren

Ab JTL-Shop3.10 ist es möglich, eigene Artikel-Arrays über eine Smarty-Funktion {get_product_list} zu erzeugen.
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 welchem 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
kTag String - Primärschlüssel eines Tags siehe ttag.kTag
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
cTagFilter String - Primärschlüssel der Tags durch Semikolon getrennt z.B. "300;301". Primärschlüsselangabe siehe Datenbank ttag.kTag
cSuche String - Suchbegriff z.B. "zwiebel ananas baguette"

Beispieleinbindung in Template-Code

Den folgenden Code binden wir im Template in die Datei /tpl_inc/seite_startseite.tpl ein:

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

Sortierungsschlüssel

Standard 100
Name A-Z 1
Name Z-A 2
Preis 1..9 3
Preis 9..1 4
EAN 5
neuste zuerst 6
Artikelnummer 7
Verfügbarkeit 8
Gewicht 9
Erscheinungsdatum 10
Bestseller 11
Bewertungen 12

Suchspecialschlüssel

Bestseller 1
Sonderangebote 2
Neu im Sortiment 3
Top Angebote 4
In Kürze verfügbar 5
Top bewertet 6
Ausverkauft 7
Auf Lager 8
Vorbestellung Möglich 9

Eigene Kategorielisten erzeugen und im Template integrieren

Ab JTL-Shop3.10 ist es möglich, eigene Kategorie-Arrays über eine Smarty-Funktion {get_category_list} zu erzeugen.
Der Funktion können die folgenden Parameter übergeben werden:

Parametername Typ Pflichtattribut Beschreibung
nLimit Numeric Ja Maximale Anzahl Kategorien, welche geholt werden sollen
cAssign String Ja Name der Smarty-Variable, in welchem das Array mit Kategorien gespeichert wird
cKatAttrib String - Kategorieattribut, welches die gewünschten Kategorien selektiert. Es wird nur der Name berücksichtigt, Kategorieattribut-Wert wird nicht berücksichtigt.

Beispiel:
Wir versehen in JTL-Wawi mehrere Kategorien mit dem Kategorieattribut "frontpage". Als Wert kann ein beliebiger Wert z.B. 1 eingetragen werden (wird nicht beachtet).

Als nächstes kopieren wir die Datei /templates/JTL-Shop3-Tiny/tpl_inc/seite_startseite.tpl nach /templates/JTL-Shop3-Tiny/tpl_inc/seite_startseite_custom.tpl

Im Template /templates/JTL-Shop3-Tiny/tpl_inc/seite_startseite_custom.tpl fügen wir dann den folgenden Code ein:

{get_category_list cKatAttrib='frontpage' cAssign='oCategory_arr'}

{if $oCategory_arr}
   <ul>
   {foreach name=Kategorieliste from=$oCategory_arr item=oCategory nLimit=2}
      <li>
         <a href="{$oCategory->cURL}">
         <img src="{$oCategory->cBildURL}" alt="" /><br />
         {$oCategory->cName}
         </a>
      </li>
   {/foreach}
   </ul>
{/if}

Artikelabhängig eigene artikel_inc.tpl laden

Ab JTL-Shop3.12 können Sie in JTL-Wawi ein Funktionsattribut "tpl_artikeldetails" nutzen und als Wert eine Ersatz-Datei für artikel_inc.tpl z.B. "artikel_inc_minimal.tpl" eingeben.
Legen Sie dazu zunächst eine Kopie der Datei /tpl_inc/artikel_inc.tpl an, z.B. /tpl_inc/artikel_inc_minimal.tpl und nehmen Sie in der Datei /tpl_inc/artikel_inc_minimal.tpl dann die gewünschten Änderungen vor (z.B. Lagerampel ausblenden, Artikelkurzbeschreibung über den Preis etc.). Im Anschluß fügen Sie den Artikeln, für welche dieses Template geladen werden soll, ein Funktionsatttribut in JTL-Wawi hinzu: Name: "tpl_artikeldetails", Wert: "artikel_inc_minimal.tpl".

Bei Variationskombinationen müssen Sie auch jedem Kindartikel das jeweilige Funktionsattribut zuweisen.

Beispiel im Demoshop: http://demoshop.jtl-software.de/Computer-Konfigurator

In diesem Beispiel wird das Template artikel_inc_ex.tpl (auch im Standard-Template vorhanden) per Funktionsattribut geladen. Das besondere an diesem Template ist, dass es auf der rechten Seite eine Kaufen-Box zur Verfügung stellt und die Kurzbeschreibung des Artikels im oberen Bereich des Templates nutzt.

Warenkorbgesamtgewicht im Warenkorb anzeigen

Das Warenkorbgesamtgewicht steht im Warenkorb mit der Variable {$WarenkorbGesamtgewicht} zur Verfügung.

Beispiel-Einbindung:

Legen Sie zunächst eine Kopie der Datei warenkorb.tpl an und benennen Sie diese Kopie warenkorb_custom.tpl.
Bearbeiten Sie die Datei warenkorb_custom.tpl und suchen Sie nach folgendem Code-Block

<tr>
  <td><span class="price_label">{lang key="totalSum" section="global"}{*lang key="gross" section="global"*}:</span></td>
  <td><span class="price_value">{$WarensummeLocalized[0]}</span></td>
</tr>

fügen Sie davor folgenden Code-Block ein:

<tr>
  <td><span class="weight_label">{lang key="weight" section="global"}:</span></td>
  <td><span class="weight_value">{$WarenkorbGesamtgewicht} kg</span></td>
</tr>

X-Seller Containerhöhe vergrößern (JCarousel)

Die X-Seller werden im Shop3 standardmäßig im JCarousel angezeigt. Dabei kann im Admin-Backend über Einstellung die Anzahl der nebeneinander sichtbaren Artikel eingestellt werden. Bei zu vielen Artikeln nebeneinander und/oder zu langen Artikelnamen können Umbrüche entstehen, die Zusatzangaben wie Grundpreis o.ä. zu weit nach unten schieben.

In diesem Fall sollte man die Höhe des JCarousel-Containers wie folgt vergrößern (Standard ist 75px):

.jcarousel-skin-tiny .article_wrapper a, .jcarousel-skin-tiny .jcarousel-clip-horizontal, .jcarousel-skin-tiny .jcarousel-item {
height: 100px;
}

Google Webfont für Grafikpreise nutzen

Wählen Sie unter http://www.google.com/webfonts die gewünschte Webfont aus.
Im nachfolgenden Beispiel nehmen wir die Schriftart "Hanalei Fill"

Fügen Sie folgende CSS-Regel in die theme.css ein:

@import url(//fonts.googleapis.com/css?family=Hanalei+Fill); /* Diese CSS-Regel muss am Anfang der theme.css stehen */

/* für alle Container mit Klasse .price neue Schriftart setzen */
.price { 
    font-family: 'Hanalei Fill', cursive; 
    color: red;
} 

jtl-shop3-tiny_header.png - header elements ids and classes outline (36,855 KB) D. Hannappel, 06.12.2010 16:51