Suchen

Doku Snackys Template

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.06

Update

Um das Snackys-Template zu aktualisieren gehe wie folgt vor:

  1. Lade die aktuelle Version des Templates im Shop runter
  2. Gehe im Shopbackend in die Pluginverwaltung
  3. Lade hier nun die heruntergeladene ZIP-Datei hoch
  4. 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.
  5. Aktualisiere das Plugin
  6. 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.
  7. Gehe abschließend in die Template-Einstellungen des aktiven Snackys (Child) Templates und speicher diese.
  8. Das Snackys-Template ist nun auf dem aktuellsten Stand.
  9. Es empfiehlt sich anschließend den Template- und Objekt Cache zu leeren

Mindestanforderungen

PHPmindestens PHP 5.6 (empfohlen 7.2)
Shopversion4.06

Allgemeine Einstellungen

Sprachvariablen

Folgende Sprachvariablen musst du für das Template in der Sprachverwaltung eintragen:

WertSektionBeispielinhaltAusgabeort FrontendBenötigt?
COregcustomRegistrierenCheckoutBenötigt
COlogincustomAnmeldenCheckoutBenötigt
COguestcustomAls Gast fortfahrenCheckoutBenötigt
menucustomMenüFullscreen MegamenüBei aktivierter Header-Variante mit Fullscreen-Menü
headerBenefit1customSchnelle LieferungVorteilsleisteBei aktivierter Vorteilsleiste (min. 1 Vorteil)
headerBenefit2customKostenloser VersandVorteilsleisteBei aktivierter Vorteilsleiste (min. 2 Vorteile)
headerBenefit3customKostenlose RückgabeVorteilsleisteBei aktivierter Vorteilsleiste (min. 3 Vorteile)
headerBenefit4customKostenloser SupportVorteilsleisteBei aktivierter Vorteilsleiste (min. 4 Vorteile)
linkHomecustomHomeShop-NavigationBei aktivierter Option "Link zur Startseite = Text"
allCatscustomAlle KategorienShop-NavigationBei aktivierter Option "Kategorien in Oberpunkt zusammenfassen"

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 ^images/(.*)$ includes/plugins/km_snackys/imageOptimizer/?p=$1&w=%{QUERY_STRING} [L]
.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 ^images/(.*)$ includes/plugins/km_snackys/imageOptimizer/?p=$1&w=%{QUERY_STRING} [L]
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 ^/images/(.*)$ /includes/plugins/km_snackys/imageOptimizer/?p=$1&w=$args 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


Cookie Hinweis aktivieren

Aktiviert einen Cookie-Hinweis in deinem Shop. Die Texte kannst du über die Sprachvariablen im Plugin anpassen.

Plugins / Pluginübersicht / Template Snackys / Spalte Sprachvariablen

Das Template für den Cookie-Hinweis findest du in

snippets/cookie-hinweis.tpl

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

EinstellungShortcutEmpfohlener Wert
Anzahl anzuzeigender "Neu im Sortiment" Artikel124Mindestens 6
Anzahl anzuzeigender Top-Angebote126Mindestens 6
Anzahl anzuzeigender Sonderangebote128Mindestens 6
Anzahl anzuzeigender Bestseller130Mindestens 6
Anzahl News auf Startseite5713
Hersteller anzeigen188Ja, als Bild
Tabs nutzen287Nein

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

TypMiniKleinNormalGroß
Kategorien250 x 250
Variationen80 x 80700 x 7001500 x 1500
Produkte80 x 80350 x 350700 x 7001500 x 1500
Hersteller110 x 110250 x 250
Merkmale20 x 20320 x 320
Konfiggruppe130 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-typeWann 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-eventDer Name des Events. z.B. "purchase" oder auch "download" (hier kann man auch eigens erstellte Events angeben).
gtag-p-xxxxxx 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>

Theme-Einstellungen

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"


Zur-Kasse-Button im Sidebar-Warenkorb anzeigen?

Option, um den "Zur Kasse"-Button im Sidebar-Warenkorb ein- und auszublenden.


Megamenü


Darstellung Megamenü

Wähle zwischen dem klassischen Megamenü und einem simplen Dropdown

Diese Einstellung greift nicht für die Header-Varianten "Fullscreen Simple", "Fullscreen Simple Light" & "Simple".

Megamenü
Dropdown
Fullscreen Megamenü für Header-Varianten Fullscreen Simple, Fullscreen Simple Light & Simple

Kategorien in Oberpunkt zusammenfassen (Nur Dropdown)

Hast du bei der Darstellung des Megamenüs die Option "Dropdown" gewählt, kannst du mit dieser Einstellung alle Kategorien in einem Oberpunkt zusammenfassen. Für den Oberpunkt musst du die Sprachvariable #custom.allCats# anlegen.


Eigene Megamenü Seiten

In Snackys hast du 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

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


Header-Version

Wähle hier zwischen 9 verschiedenen Themes für den Shopheader

Standard Snackys
Navigation mittig
Light
Light mit Brandcolor
Fullscreen Simple
Fullscreen Simple Light
Fullscreen Navigation
Fullscreen Navigation Light
Simple

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.


Social-Media-Buttons im Header

Hier kannst du einstellen, ob die Social-Media Icons auch im Header angezeigt werden sollen.

Die Platzierung der Icons ist abhängig von der gewählten Header-Version. Diese Einstellung wird nicht von allen Header-Varianten unterstützt.


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

Default
Light
Dark



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:


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:

Einstellungen für Positionierung des PayPal Buttons im Warenkorb
PHPQuery Selector.right-boxes .cart-sum
Einstellungen für PayPal Button im Mini-Warenkorb
PHPQuery Selectorul.cart-dropdown li .items-list
PHPQuery Methodeappend