Doku Snackys Template V207

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:

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

Sprachvariablen

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

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

#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]
				

#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

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

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

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:

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"

Zur-Kasse-Button im Sidebar-Warenkorb anzeigen?

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

Link zur Startseite

Hier kannst du einstellen, ob ein Link zur Startseite in der Shopnavigation zu sehen sein soll. Du kannst zwischen einem Haus-Icon oder einem Text-Link wählen. Für den Textlink musst du die Sprachvariable #custom.home# anlegen.

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

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

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.

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

Shoplogo im Footer

Hier kannst du einstellen, ob das Shoplogo auch im Footer ausgegeben werden soll.

Zahlungsarten im Footer

Stellt die Zahlungsarten oberhalb des Footers dar. Du kannst einstellen, ob alle Zahlungsarten, nur Zahlungsarten mit Bildern oder alle Zahlungsarten als Text ausgeben werden wollen.

Es werden die aktiven Zahlungsarten ausgegeben (unabhängig davon, ob der Kunde diese für seine Kundengruppe, Land, … überhaupt nutzen kann). Um dies zu reduzieren müssten die ungewünschten Zahlungsarten im Backend deaktiviert werden.

Sprach- und Wahrungswechsler im Footer

Aktiviert die Auswahl der Zahlungsart und Währung im Footer.

Aktiviere diese Option, wenn du eine Header-Variante ohne Topbar ausgewählt hast

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.

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

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

PayPal Button auf der Artikeldetailseite

PayPal Button im Mini-Warenkorb

PayPal Button im Bestellvorgang

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 Checkout

Pay-Button Artikeldetailseite

Pay-Button Kategorieseite

Darstellung Login-Button