Suchen

Doku Snackys Template

Das Plugin unterstützt das Template Snackys insbesondere durch Performance Aufwertungen. Zudem können Sie 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, treffen Sie in den Template-Einstellungen im Shopbackend.


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 Entwicklungsumgebungen, kontaktiert uns gerne für einen längeren Testzeitraum.

Laden Sie das ZIP Archiv in der Pluginverwaltung Ihres JTL Shops hoch.
Nach der Installation des Plugins wechseln Sie in die Plugineinstellungen. Dort können Sie sowohl das Template installieren, als auch beliebig viele Child-Templates.

Download: Version 2.03

Mindestanforderungen

PHPmindestens PHP 5.6 (empfohlen 7.2)
Shopversion4.06

Allgemeine Einstellungen

Sprachvariablen

Folgende Sprachvariablen müssen Sie für das Template in der Spreachverwaltung 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. Deaktivieren Sie 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 müssen Sie 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


Ist Mod Pagespeed aktiv?

Aktivieren Sie diese Einstellung, wenn Sie ModPagespeed verwenden. Hierdurch werden eventuelle Probleme bei der Bilderdarstellung behoben.

Bitte deaktivieren Sie 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 Ihrem Shop. Die Texte können Sie über die Sprachvariablen im Plugin anpassen.

Plugins / Pluginübersicht / Template Snackys / Spalte Sprachvariablen

Das Template für den Cookie-Hinweis finden Sie in

snippets/cookie-hinweis.tpl

Subdomain für JavaScript Ressourcen

Wenn Sie Ihre Scripte auf eine Subdomain ausgelagert haben, könne Sie 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

Tragen Sie hier Ihren 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 Sie die Werte von "Artikel pro Reihe" anpassen, 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 Sie Anpassungen an der Breite des Contents oder "Artikel pro Reihe" vornehmen, müssen Sie 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 können Sie ü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

Tragen Sie hier Ihre 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 finden Sie hier: https://developers.google.com/gtagjs/reference/event. Dafür müssen Sie 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

Verwenden Sie 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ählen Sie 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)

Haben Sie bei der Darstellung des Megamenüs die Option "Dropdown" gewählt, können Sie mit dieser Einstellung alle Kategorien in einem Oberpunkt zusammenfassen. Für den Oberpunkt müssen Sie die Sprachvariable #custom.allCats# anlegen.


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

Trusted Shops

Trusted Shops Badge anzeigen

Stellt ein, ob das Trusted-Shops Badge im Shop angezeigt werden soll


Trusted Shops ID

Tragen Sie hier Ihre 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 können Sie 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ählen Sie 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)

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

Geben Sie 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 können Sie 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 Sie bis zu 4 Vorteile eintragen können. Die Vorteile steuern Sie über die Sprachvariablen

  • #custom.headerBenefit1
  • #custom.headerBenefit2
  • #custom.headerBenefit3
  • #custom.headerBenefit4

Style Vorteilsleiste

Wählen Sie hier zwischen drei verschiedenen Styles für die Vorteilsleiste

Default
Light
Dark



Startseite

Slider über ganze Breite darstellen?

Hier können Sie 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, müssen Sie in der Boxenverwaltung im Abschnitt "Header" Ihre gewünschten Boxen hinzufügen.

Eine ausführliche Dokumentation zur Boxenverwaltung finden Sie hier.


Theme Anpassungen

Farben

Ändern Sie hier die Farbe allgemeiner Shopelemente. Es können alle validen CSS-Werte verwendet werden (Farbname, HEX, RGB, RGBA).


Maximale Content-Breite (in px)

Hier können Sie 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 Sie eigene Anpassungen am Theme vornehmen wollen, verwenden Sie hierfür das Custom Theme. Anpassungen können Sie 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, müssen Sie die entsprechende padding-top Angabe anpassen. Diese errechnet sich wie folgt aus einem Bild: Höhe/Breite * 100. Verwenden Sie hierfür das Custom-Theme und bearbeiten Sie 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. 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]

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.

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 Ihrem Template können Sie uns gerne kontaktieren:


Plugins

PayPal Express

Für die richtige Darstellung des PayPal Express Buttons müssen Sie 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