Snackys Template V2.07
Das Plugin unterstützt das Template Snackys insbesondere durch Performance Aufwertungen. Zudem kannst du hierüber das Template und Child-Templates installieren, sowie essentielle Funktionen prüfen. Alle Einstellungen aus der Doku, die keine Shop-Standards sind (z.B. Sprachvariablen) oder die Anpassungen in externen Dateien benötigen, triffst du in den Template-Einstellungen im Shopbackend.
Installation & Update
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 Entwicklungsumgebungen, kontaktiere uns gerne für einen längeren Testzeitraum.
Lade das ZIP Archiv in der Pluginverwaltung deines JTL Shops hoch.
Nach der Installation des Plugins wechselst du in die Plugineinstellungen. Dort kannst du sowohl das Template installieren, als auch beliebig viele Child-Templates.
Download: Version 2.07
Update
Um das Snackys-Template zu aktualisieren gehe wie folgt vor:
- Lade die aktuelle Version des Templates im Shop runter
- Gehe im Shopbackend in die Pluginverwaltung
- Lade hier nun die heruntergeladene ZIP-Datei hoch
- Gehe anschließend wieder in die Plugin-Verwaltung. Du solltest nun einen Hinweis sehen, dass für das Plugin "Snackys Template" ein Update zur Verfügung steht.
- Aktualisiere das Plugin
- Gehe nun in die Plugin-Einstellung. In der Spalte "Snackys Template" siehst du nun eine Meldung, dass das Template veraltet ist. Klicke nun auf den Update-Button. Das neue Template wird nun selbständig installiert.
- Gehe abschließend in die Template-Einstellungen des aktiven Snackys (Child) Templates und speicher diese.
- Das Snackys-Template ist nun auf dem aktuellsten Stand.
- Es empfiehlt sich anschließend den Template- und Objekt Cache zu leeren
Mindestanforderungen
PHP | mindestens PHP 5.6 (empfohlen 7.2) |
Shopversion | 4.06 |
Sprachvariablen
Folgende Sprachvariablen musst du für das Template in der Sprachverwaltung eintragen:
Wert | Sektion | Beispielinhalt | Ausgabeort Frontend | Benötigt? |
---|---|---|---|---|
COreg | custom | Registrieren | Checkout | Benötigt |
COlogin | custom | Anmelden | Checkout | Benötigt |
COguest | custom | Als Gast fortfahren | Checkout | Benötigt |
menu | custom | Menü | Fullscreen Megamenü / Mobiles Menü | Benötigt |
headerBenefit1 | custom | Schnelle Lieferung | Vorteilsleiste | Bei aktivierter Vorteilsleiste (min. 1 Vorteil) |
headerBenefit2 | custom | Kostenloser Versand | Vorteilsleiste | Bei aktivierter Vorteilsleiste (min. 2 Vorteile) |
headerBenefit3 | custom | Kostenlose Rückgabe | Vorteilsleiste | Bei aktivierter Vorteilsleiste (min. 3 Vorteile) |
headerBenefit4 | custom | Kostenloser Support | Vorteilsleiste | Bei aktivierter Vorteilsleiste (min. 4 Vorteile) |
linkHome | custom | Home | Shop-Navigation | Bei aktivierter Option "Link zur Startseite = Text" |
allCats | custom | Alle Kategorien | Shop-Navigation | Bei aktivierter Option "Kategorien in Oberpunkt zusammenfassen" |
language | custom | Sprache | Footer | Bei aktivierter Option "Sprach- und Wahrungswechsler im Footer" und mehr als einer Shop-Sprache |
Plugin JavaScripts optimieren
Aktiviert intelligentes Nachladen von Scripten. Sollten Plugins auf veraltete Techniken setzen, kann es zu Problemen kommen. Deaktiviere dann diese Einstellung.
Plugin CSS inline laden
Aktiviert das Inline-Laden von Plugin-Stylesheets.
Sale Badge oder Rabatt in Prozent
Stellt ein, ob bei reduzierten Artikeln der Rabatthinweis als Prozentzahl (z.B. -50%) oder als Textbadge (z.B. SALE) ausgegeben werden soll.
Bildoptimierung aktivieren
Mit aktivierter Bildoptimierung werden Bilder nur im benötigten Format geladen. So werden z.B. übergroße Bilder auf die benötigte Größe runter gerechnet, um Ressourcen zu sparen. Hierfür musst du in der .htaccess Datei folgende Anpassung vornehmen:
RewriteRule ^km_images/([0-9]+)/([0-9]+)/(.*)$ includes/plugins/km_snackys/imageOptimizer/?p=$3&w=$1&q=$2.htaccess vorher
#Rewrite der JTL-Shop-URLs #Aendern Sie an diesen Zeilen nichts! RewriteRule ^templates_c/filecache/.*$ - [R=403,NC,L] RewriteRule ^((urllist|sitemap_).*\.(xml|txt)(\.gz)?)$ includes/sitemap.php?datei=$1 [L] RewriteRule ^export/((sitemap_).*\.(xml|txt)(\.gz)?)$ $1 [L] RewriteRule ^asset/(.*)$ includes/libs/minify/?g=$1 [L] RewriteRule ^robots.txt$ robots.php [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^. index.php [L].htaccess nachher
#Rewrite der JTL-Shop-URLs #Aendern Sie an diesen Zeilen nichts! RewriteRule ^templates_c/filecache/.*$ - [R=403,NC,L] RewriteRule ^((urllist|sitemap_).*\.(xml|txt)(\.gz)?)$ includes/sitemap.php?datei=$1 [L] RewriteRule ^export/((sitemap_).*\.(xml|txt)(\.gz)?)$ $1 [L] RewriteRule ^asset/(.*)$ includes/libs/minify/?g=$1 [L] RewriteRule ^km_images/([0-9]+)/([0-9]+)/(.*)$ includes/plugins/km_snackys/imageOptimizer/?p=$3&w=$1&q=$2 RewriteRule ^robots.txt$ robots.php [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^. index.php [L]
Für ein optimales Ergebnis empfehlen wir ImageMagickt mit WebP Unterstützung auf dem Server zu aktivieren: https://github.com/oscarotero/imagecow#installing-imagemagick-with-webp-support
Dein Server arbeitet mit Nginx?
In diesem Fall greift die .htaccess nicht. Der Befehl für die Nginx-KOnfiguration lautet:
rewrite ^/km_images/([0-9]+)/([0-9]+)/(.*)$ /includes/plugins/km_snackys/imageOptimizer/?p=$3&w=$1&q=$2 last;
Ist Mod Pagespeed aktiv?
Aktiviere diese Einstellung, wenn du ModPagespeed verwendest. Hierdurch werden eventuelle Probleme bei der Bilderdarstellung behoben.
Bitte deaktiviere bei ModPagespeed die Funktion kleinere JavaScripts inline zu laden. Siehe: https://www.modpagespeed.com/doc/filter-js-inline
Subdomain für JavaScript Ressourcen
Wenn du deine Scripte auf eine Subdomain ausgelagert hast, kannst du hier den Pfad für diese angeben.
Die Subdomain muss auf den gleichen Hauptordner wie der Shop zeigen und sollte ebenfalls ein SSL-Zertifikat besitzen.
Templatecopyright entfernen
Trage hier deinen Lizenz-Key ein, um den Copyrighthinweis zu entfernen
Optimale Shopeinstellungen
Einstellung | Shortcut | Empfohlener Wert |
---|---|---|
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 |
Tabs nutzen | 287 | Nein |
Wenn du die Werte von "Artikel pro Reihe" anpasst, sollte die Mindestanzahl an Produkten in den Einstellungen 124, 126, 128, 130 auf den größten "Artikel pro Reihe"-Wert gesetzt werden.
Optimale Bildgrößen
Typ | Mini | Klein | Normal | Groß |
---|---|---|---|---|
Kategorien | 250 x 250 | |||
Variationen | 80 x 80 | 700 x 700 | 1500 x 1500 | |
Produkte | 80 x 80 | 350 x 350 | 700 x 700 | 1500 x 1500 |
Hersteller | 110 x 110 | 250 x 250 | ||
Merkmale | 20 x 20 | 320 x 320 | ||
Konfiggruppe | 130 x 130 |
Wenn du Anpassungen an der Breite des Contents oder "Artikel pro Reihe" vornimmst, musst du die Größe von "Produktbild Klein" entsprechend anpassen. Die Bildgröße entspricht der Contentbreite durch die Anzahl Artikel pro Reihe.
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 kannst du über die Sprachvariablen im Plugin anpassen.
Plugins / Pluginübersicht / Template Snackys / Spalte Sprachvariablen
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ärmen): 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
Analytics
Trage hier deine Tracking-IDs für die Services des Google Tag Mangers, wie AdWords Tracking, Google Analytics und Google 360 Marketing ein. Das Template setzt hier auf GTag (gtag.js), welches die Nutzung von Universal Analytics ermöglicht.
Diese Einstellungen überschreiben die Standard JTL-Shop Einstellungen für die Analytics Einrichtung.
Das Tracking-Script schickt standardisierte Trackings wie z.B. Artikel in Warenkorb gelegt. Diese Trackings kann man um eigene Aktionen, sogenannte Events, erweitern. Eine Liste der Standard-Events findest du hier: https://developers.google.com/gtagjs/reference/event. Dafür musst du das gewünschte HTML-Element um folgende Attribute erweitern:
gtag-type | Wann soll das Event ausgeführt werden (entspricht JavaScript-Events wie z.B: "click" oder "change", ..) Zusätzlich gibt es das Event "start" was beim Seitenladen genutzt wird |
gtag-event | Der Name des Events. z.B. "purchase" oder auch "download" (hier kann man auch eigens erstellte Events angeben). |
gtag-p-xxx | xxx steht für weitere Parameter wie "currency", "value", ... Dieser Tag ist dynamisch |
Ein finales Beispiel für einen Download (als eigenes angelegtes Event in Google Analytics):
<a href="download.zip" gtag-type="click" gtag-event="download" gtag-p-value="Download.zip" gtag-p-event_label="Mein Download Tracking">Herunterladen</a>
Boxed Layout?
Stellt die Seite im Boxed-Layout Design dar
Boxed Layout: Abstand oben unten
Fügt einen Abstand des Seitencontainers zum oberen und oberen Browserrand hinzu
Boxed Layout: Rahmen anzeigen
Aktiviert einen dünnen Rahmen um den Seitencontainer
Boxed Layout: Hintergrundbild
Pfad zum Hintergrund-Bild, das beim Boxed-Design ausgegeben werden soll
Verwende relative Bildpfade um Ressourcen & Ladezeiten zu schonen. Statt "https://meinshop.de/img/meinbild.jpg" also "/img/meinbild.jpg"
Trusted Shops
Trusted Shops Badge anzeigen
Stellt ein, ob das Trusted-Shops Badge im Shop angezeigt werden soll
Trusted Shops ID
Trage hier deine Trusted Shops ID ein
Variante
Variante Bewertung: Trusted Shops Badge mit Bewertungen
Variante Standard: Trusted Shops Badge ohne Bewertungen
Positionierung Trusted Shops Badge (Desktop)
Bestimmt, ob das Trusted Shops Badge Links oder Rechts im Browser angezeigt werden soll.
Wir empfehlen die Einstellung "Links" beizubehalten, da das Trusted Shops Badge auf der rechten Seite Shopelemente wie den Sidebar-Warenkorb überlagern
Mobile Variante
Neben dem Standard-Design für die Responsive-Darstellung kannst du hier auch die neue Floating-Variante einstellen.
Die neue Floating-Variante funktioniert aktuell nur bei registrierten Shops. Die neue Darstellung wird von Trusted Shops nach und nach weiter freigeschaltet
Header
SVG-Logo Pfad
Gib hier den Pfad zu deinem SVG-Logo ein, um dieses anstelle des Pixel-Bildes im Shop darzustellen
Header-Version
Wähle hier zwischen 9 verschiedenen Themes für den Shopheader
Pfad Hintergrund-Video (im mp4 Format)
Gib hier den Pfad zu dem Video an, welches im Fullscreen-Header abgespielt werden soll. Unterstützt werden aktuell Videos im mp4 Format
Das Video wird nur in den Header-Varianten "Fullscreen Simple", "Fullscreen Simple Light", "Fullscreen Navigation", "Fullscreen Navigation Light" auf der Startseite ausgegeben
Pfad Video-Placeholder-Bild
Gib hier den Pfad zu dem Bild an, welches während des Ladevorgangs des Videos angezeigt werden soll.
Wird autoplay von einem Browser oder Gerät nicht unterstützt, wird das Bild solange angezeigt, bis der Nutzer auf den Play-Button drückt.
Vorteile im Header anzeigen
Aktiviert eine Vorteilsleiste oberhalb des Headers, in der du bis zu 4 Vorteile eintragen kannst. Die Vorteile steuerst du über die Sprachvariablen
- #custom.headerBenefit1
- #custom.headerBenefit2
- #custom.headerBenefit3
- #custom.headerBenefit4
Style Vorteilsleiste
Wähle hier zwischen drei verschiedenen Styles für die Vorteilsleiste



Startseite
Slider über ganze Breite darstellen?
Hier kannst du einstellen, ob der Startseiten-Slider über die gesamte Bildschirmbreite oder innerhalb der Content-Breite angezeigt werden soll.
Diese Einstellung greift nicht bei den Header-Varianten "Fullscreen Simple", "Fullscreen Simple Light", "Fullscreen Navigation" & "Fullscreen Navigation Light".
Hersteller-Slider anzeigen?
Aktiviert einen Hersteller-Slider auf der Startseite
Boxen auf Startseite darstellen
Um eigene Boxen auf der Startseite ausgeben, musst du in der Boxenverwaltung im Abschnitt "Header" deine gewünschten Boxen hinzufügen.
Eine ausführliche Dokumentation zur Boxenverwaltung findest du hier.
Theme Anpassungen
Farben
Änder hier die Farbe allgemeiner Shopelemente. Es können alle validen CSS-Werte verwendet werden (Farbname, HEX, RGB, RGBA).
Maximale Content-Breite (in px)
Hier kannst du die Maximalbreite des Contents einstellen. Der Standard sind 2000px.
Wir empfehlen eine Mindestbreite von 1200px. Bei Werten darunter müssen ggf. weitere CSS-Anpassungen vorgenommen werden.
Eigenes CSS
Wenn du eigene Anpassungen am Theme vornehmen willst, verwende hierfür das Custom Theme. Anpassungen kannst du dann in der custom.css im Custom-Theme Ordner vornehmen
themes/custom/css/custom.css
Berechnung der Seitenverhältnisse
Um das Seitenverhältnis für einen Preload-Container zu ändern, musst du die entsprechende padding-top Angabe anpassen. Diese errechnet sich wie folgt aus einem Bild: Höhe/Breite * 100. Verwende hierfür das Custom-Theme und bearbeite die aspectratios.css
themes/custom/css/aspectratios.css
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. Zusätzlich wird die Schriftart per Daten-Cookie beim Besucher zwischengespeichert um eine schnellere Ladezeit zu erzielen.
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. Gehe zur Generierung der fonts.css wie folgt vor:
- Lade alle gewünschten Schriften auf deinen PC
- Rufe die Seite [https://jaicab.com/localFont/] auf und lade alle Schriften hoch
- Passe ggf. den Name und die Dicke an (hier haben wir manchmal nicht die richtigen Ergebnisse bekommen)
- Lade den Inhalt der fonts.css auf der rechten Seite 1 zu 1 in deine fonts.css
Template Anpassungen via Child-Template
Um updatesicher Anpassungen im Template selbst vorzunehmen solltest du 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]
Im Vergleich zum EVO-Template findest du 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.
Um updatesicher zu bleiben und keine Hauptfunktionen des Templates zu zerstören empfehlen wir, bei Anpassungen am Shop ein Child-Template zu verwenden.
Template Anpassungen durch Knoell Marketing
Für individuelle Anpassungen an deinem Template kannst du uns gerne kontaktieren:
- Web: www.knoell-marketing.de
- Mail: info@knoell-marketing.de
- Tel: 06431 / 902 94 90
Plugins
PayPal Express
Für die richtige Darstellung des PayPal Express Buttons musst du im Tab "PayPal Express" im JTL PayPal Plugin folgene Einstellungen anpassen:
PayPal Buttons im Warenkorb
Größe des Buttons | PHPQuery Selector | PHPQuery Methode |
---|---|---|
mittel | .cart-sum | append |
PayPal Button auf der Artikeldetailseite
Größe des Buttons | PHPQuery Selector | PHPQuery Methode |
---|---|---|
mittel | #add-to-cart | append |
PayPal Button im Mini-Warenkorb
Größe des Buttons | PHPQuery Selector | PHPQuery Methode |
---|---|---|
.cart-dropdown .items-list | .cart-sum | append |
PayPal Button im Bestellvorgang
Größe des Buttons | PHPQuery Selector | PHPQuery Methode |
---|---|---|
groß | #register-customer | after |
Amazon Pay
Für die richtige Darstellung des Amazon Pay Buttons musst du im Tab "Einstellungen Allgemein" im Amazon Pay (JTL-Shop 4) by Solution 360 Plugin folgene Einstellungen anpassen:
Pay-Button Warenkorb
Pay-Button-Größe | Pay-Button-Selektoren | Pay-Button-Einfügemethode |
---|---|---|
mittel | .cart-sum | Anhängen (Append) |
Pay-Button Checkout
Pay-Button-Größe | Pay-Button-Selektoren |
---|---|
mittel | #checkout form > .text-right |
Pay-Button Artikeldetailseite
Pay-Button-Größe | Pay-Button-Selektoren | Pay-Button-Einfügemethode |
---|---|---|
mittel | #add-to-cart | Anhängen (Append) |
Pay-Button Kategorieseite
Pay-Button-Größe | Pay-Button-Selektoren | Pay-Button-Einfügemethode |
---|---|---|
mittel | #result-wrapper_buy_form_#kArtikel# .form-basket | Anhängen (Append) |
Darstellung Login-Button
Pay-Button-Größe | Pay-Button-Selektoren | Pay-Button-Einfügemethode |
---|---|---|
klein | #login-popup form.evo-validate, #login_form .form-group:not(.float-label-control) | Anhängen (Append) |