Suchen

Doku Snackys Template

Das Plugin unterstützt das Template Snackys insbesondere durch Performance Aufwertungen.


Installation

Das Template kommt mit einem Plugin - um alle Performance Optimierungen zu realisieren. Es gibt eine kostenlose 14 tägige Testphase - auf Bedarf (z.B. in Entwicklungsumgebung) kontaktiert uns gerne für einen längeren Testzeitraum.
Die ZIP entpacken und einfach in das Hauptverzeichnis des Shops laden (Struktur ist nach JTL ausgerichtet) und beinhaltet das Template + das Plugin. Das Template funktioniert mit dem 4.06er Shop.
Download: Version 1.01

Achtung: Wir setzen auf ein starkes Caching - bitte achten Sie bei individuellen Anpassungen auf den Abschnitt "Cache erneuern"

Optimale Shopeinstellungen

  • Anzahl anzuzeigender "Neu im Sortiment" Artikel (124): Mindestens 6
  • Anzahl anzuzeigender Top-Angebote (126): Mindestens 6
  • Anzahl anzuzeigender Sonderangebote (128): Mindestens 6
  • Anzahl anzuzeigender Bestseller (130): Mindestens 6
  • Anzahl News auf Startseite (571): 3
  • Hersteller anzeigen (188): Ja, als Bild

Optimale Bildgrößen

TypMiniKleinNormalGroß
Kategorien250 x 250
Variationen80 x 80700 x 7001500 x 1500
Produkte80 x 80350 x 350700 x 7001500 x 1500
Hersteller110 x 110130 x 130
Merkmale20 x 20320 x 320
Konfiggruppe130 x 130

Bildformate

Snackys verwendet modernste Techniken um Bilder nachzuladen. Um ein Springen der Seite beim Laden der Bilder zu vermeiden, wird ein Container in einem definierten Seitenverhältnis vorgeladen, in welchen das Bild dann eingesetzt wird. Das Seitenverhältnis ist hier immer 1:1 (Quadrat), mit Ausnahme der News-Bilder im 4:3 Format.


Artikeloverlays

Um die Ladezeit zu minimieren, setzt Snackys bei den Artikeloverlays auf gestylte Text-Badges, statt Bilder. Die Texte können Sie über die Sprachvariablen im Plugin anpassen. Plugins > Pluginübersicht > Template Snackys > Spalte Sprachvariablen


Eigene Megamenü Seiten

In Snackys haben Sie die Möglichkeit, eigene Links im Megamenü sowohl vor, als auch nach den Kategorien zu setzten:

  • Eigene Seiten VOR den Kategorien: Linkgruppe megamenu_start verwenden
  • Eigene Seiten NACH den Kategorien: Linkgruppe megamenu verwenden

Cache

Wir setzen auf 2 Cache-Methoden: Den JTL internen Cache und auf temporäre Dateien. Alle Einstellungen im JTL Cache speichern wir unter dem Typ "Template". Bei Anpassungen sollte dieser geleert werden.

Auf temporäre Dateien setzen wir für CSS und JavaScript Inhalte, da diese doch etwas größe;ere Datenmengen beinhalten können. Durch diesen Weg sparen wir uns jedoch stets erneut das lesen der einzelnen Dateien, sowie die anschließende Minifizierung. Dadurch kann es beim ersten Abruf einer Seite zu einer etwas längeren Ladezeit kommen. Die temporären Dateien speichern wir für 2 Tage.

Cache erneuern

Der JTL Cache kann wie gewohnt geleert werden. Der Cache mit temporären Dateien von Snackys befindet sich in 2 Ordnern und kann simpel durch Löschen aller beinhaltenden Dateien geleert werden:

  • includes/plugins/km_snackys/version/101/frontend/temp/ (101 ggf durch die installierte Version anpassen)
  • templates/snackys/temp/

Ebenso kann direkt über den Aufruf einer Seite der Cache dieser Seite erneuert werden (weiteres siehe: Cache aufwären): Dazu muss einfach an die jeweilige URL der Parameter "rebuildCache" angehängt werden.

  • Beispiel1: https://www.domain.de/?rebuildCache
  • Beispiel2: https://www.domain.de/Kategorie?rebuildCache
  • Beispiel3: https://www.domain.de/navi.php?qs=Suche&rebuildCache

Cache aufwärmen

Um den ersten Besucher des Tages nicht mit der Last der Minifizierung zu bestrafen empfiehlt es sich den Cache aufzuwärmen - zumindest für die wichtigsten Seiten. Dazu kann einfach per Cronjob jede gewünschte Seite z.B.: Nachts um 2 mit dem oben genannten Parameter "rebuildCache" aufgerufen werden. Mehr zu Cronjobs für z.B. Ubuntu: [https://wiki.ubuntuusers.de/Cron/]

Ein Beispiel um den Crjob jede Nacht um 3 für die erste Beispiel-URL aufzurufen:

0 3 * * * wget -q https://www.domain.de/?rebuildCache

Theme Anpassungen (Farb & CSS Anpassungen)

Wenn Sie eigene Anpassungen am Theme, z.B. an den Farben & Seitenverhältnissen vornehmen möchten, verwenden Sie am besten das Custom Theme. Dann können Sie folgende Anpassungen im jeweiligem Theme Ordner vornehmen:

  • themes/custom/css/aspectratios.css - siehe dazu: Berechnung der Seitenverhältnisse in der aspectratios.css:
  • themes/custom/css/custom.css - jegliche weitere CSS Angabe
  • themes/custom/fonts/fonts.css - siehe dazu: Andere Schriftart verwenden
  • themes/custom/config.ini - Hier können die Hauptfarben angepasst werden

Berechnung der Seitenverhältnisse in der aspectratios.css:

Um das Seitenverhältniss für einen Preload-Container zu ändern, müssen Sie die entsprechende padding-top Angabe anpassen. Diese errechnet sich wie folgt aus einem Bild: Höhe/Breite * 100

Andere Schriftart verwenden

Für eine bestmögliche Performance werden die Schriften von der gleichen Domain geholt - so wird sich die DNS Abfrage eines externen Anbieters gespart.

Um eine andere Schriftart zu verwenden muss diese z.B. in der custom.css als font-family angegeben werden, sowie in die fonts.css des Themes-Ordners gepackt werden. Gehen Sie zur Generierung der fonts.css wie folgt vor:

  • Laden Sie alle gewünschten Schriften auf Ihren PC
  • Rufen Sie die Seite [https://jaicab.com/localFont/] auf und laden Sie alle Schriften hoch
  • Passen Sie ggf. den Name und die Dicke an (hier haben wir manchmal nicht die richtigen Ergebnisse bekommen)
  • Laden Sie den Inhalt der fonts.css auf der rechten Seite 1 zu 1 in Ihre fonts.css

Template Anpassungen via Child-Template

Um updatesicher Anpassungen im Template selbst vorzunehmen sollten Sie auf ein Child-Template setzen. Das verhät sich identisch zu den JTL-Dokus, auch können Anpassungen wie gewohnt im Template vorgenommen werden. Siehe dazu: [http://docs.jtl-shop.de/de/latest/shop_templates/eigenes_template.html]

Laden Sie zuerst unser Muster-Child Template herunter (Ordnername kann nach Belieben angepasst werden) und nutzen Sie dieses für weitere Anpassungen. Im Vergleich zum EVO-Template finden Sie hier mehrere Dateien erneut vor, das hat den Hintergrund, dass wir auf diese per Plugin zugreifen und den Weg über das Vater-Template nicht immer einsehen können. Im Gegenzug ist dies in diesem Fall jedoch deutlich schneller. Alle weiteren Dateien können nach Belieben hinzugefügt und angepasst werden - hier kann gerne auf die oben genannte JTL Doku zurückgegriffen werden.

Hier können Sie sich den Grundaufbau eines Snackys-Child-Templates herunterladen: [https://www.knoell-marketing.de/snackys-child.zip]


Inline Javascript

Für eine bestmögliche Performance werden bei Snackys alle Scripte nachgeladen, auch Inline-Scripte(in einer Datei zusammengefasst). Um JavaScript inline zu erzwingen muss dem Skript-Tag das Attribut inline hinzugefügt werden.

Sollten Inline-Scripts auf Grund von JTL-Variablen verwendet werden, die in den externen JavaScript-Dateien nicht vorhanden sind empfehlen wir diese in ein JSON-Skript zu packen und in der externen Datei zu laden.

Speichern einer JTL Variable fuer ein externes Skript.
 

Diese kann dann im externen Skript wie folgt abgerufen werden

var data = JSON.parse(document.getElementById('myjson').innerHTML);
console.log("Meine Variable lautet: "+data.meineVar);

Template Anpassungen durch Knoell Marketing

Für individuelle Anpassungen an Ihrem Template können Sie uns gerne kontaktieren: