Neu Template Snackys - verdammt schnell, inkl. Endless Scrolling, Checkout Funneling & Co.

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Danke, da fehlte allerdings einfach die neue Version - das sollten die Kollegen in den nächsten Minuten einspielen.

Die Zips habe ich bereits gestern Abend angepasst.
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Da wir mehrfach gefragt wurden warum es beim Speed Optimizer mehrere Updates gab und beim Template Ruhe herrschen würde, klinken wir uns hier nochmal ein und geben einen kleinen Vorgeschmack.

Wir sind an der neuen Version dran und schätzen das Release auf 2-3 Wochen.

Was passiert hier? Speed und Kompabilität, sowie Individualität:
  • Es wird mehrere Header-Varianten geben (Ein Vorgeschmack der Wireframes anbei)
  • Manche der Header unterstützen ein Hintergrundbild und sogar auch ein Hintergrundvideo für die Startseite
  • Man kann grundlegende Einstellungen setzen ob es eine feste Breite gibt
  • Man kann zwischen Megamenü und Dropdownmenü für die Kategorien wechseln
  • Filter kann man nun auch über die Artikelliste stellen (nicht nur links in die Sidebar)
  • Lösungen für zu lange Navigationen
  • Überarbeitung der Darstellung auf der Artikeldetailseite für Aufpreise und generelle Variationen (teils Bugfixing)
  • Tab-Ansicht wird integriert (Empfehlung jedoch weiterhin: Nicht nutzen! ;) )
  • Bessere Kompabilität durch Abfangen von EVO Funktionen (wenn von Plugins genutzt)
  • JavaScript Kompabilität erhöht (wir wechseln - leider - wieder auf die niedrigere JQuery Version, damit wir hier nicht anecken (JTL PayPal klappt z.B: nurmit der ältern JQuery Version, hier haben wir in der aktuellen Version einen Workaround drin, aber als Beispiel - denn das trifft auch auf Funktionen anderer Plugins zu)
  • Methoden des Speed Optimizers einbezogen: Ergebnis: wir sind jetzt nochmal um rund 10 Punkte gestiegen. Von derzeit (Neue Werte nach dem Pagespeed Insights Update) 80-85 steigen auf 90-95 (ebenfalls siehe Screenshot anbei)
  • Mehr Gestaltung für die Startseite (aber bitte nicht mit überladenen Templates / Dropper vergleichen - ein Template sollte nicht alle 100 Szenarien abbilden, mit Shop 5 werden wir für die Startseite wahrscheinlich rein auf den OnPage Composer setzen)
Und ein paar weitere Dinge - natürlich weiterhin: Wir achten auf unnötigen Ballast und teilen z.B: die unterschiedlichen Header-Varianten auf, sodass nur das CSS und Co geladen wird, was für die aktuellen Einstellungen des Nutzers benötigt wird.
 

Anhänge

Zuletzt bearbeitet:

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Hurra hurra - das Update ist da :)

Version 2 ist absofort verfügbar: https://shop.knoell-marketing.de/Snackys-Template

Wie versprochen zu dieser Woche - dank keinerlei Überstunden fast noch zum Beginn der Woche und nicht auf den letzten Drücker...
Dennoch wollten wir sauber durchtesten und der Umfang ist recht groß geworden - die Performance dennoch besser!

Anbei noch ein paar visuelle Einblicke:

Screen-Checkout-Standard.pngScreen-Home-Boxed.pngScreen-Home-Fullemnu-Full-Simple.pngScreen-Home-Fullemnu-Half-Full-Simple.pngScreen-Home-Simple.pngScreen-Home-Video-Full-Nav.pngScreen-Listing-Simple-Above.pngScreen-Listing-Simple-Sidew.png

Die Neuerungen:
  • Integrierte responsive Bildoptimierung
  • Mehr Gestaltungsmöglichkeiten im Design
    • 3 Menüvarianten
      • Dropdown
      • Megamenü
      • Big Menü via Burger Button
    • 9 Headervarianten
      • Standard Snackys
      • Navigation mittig
      • Light
      • Light mit Brandcolor
      • Fullscreen simpel
      • Fullscreen simpel light
      • Fullscreen Navigation
      • Fullscreen Navigation light
    • Boxed Layout ja / nein
    • Freie Definierung wie breit die Seite ist
    • Anzahl Artikel pro Reihe (responsive) einstellbar
    • Vorteilsleiste integrieren (z.B. Kostenloser Versand, 30 Tage Rückgaberecht, ...)
    • Fullscreen Hintergrundvideo für die Startseite (nicht alle Header!)
  • Integration Trusted Shops (kein Plugin notwendig)
  • Integration GTag Skript, zur Nutzung diverser Trackings wie Google Universal Analytics, AdWords Conversion, Google Marketing Manager - inkl. Trackings wie Listview Items, Add to Cart, Remove From Cart, ... (Bis zu 5 Tracking-IDs gleichzeitig)
  • Einstellung aus ehemals config.ini (umständlich) in das Template verlagert
  • Einstellungen aus dem Plugin in das Template verlagert (Um nur 1 Anlaufpunkt zu haben)
  • Zahlreiche Bugfixing -> insbesondere für Drittanbieter Plugins und ggf. Zugriffen auf EVO Funktionen (werden versucht abzufangen)
  • Alle JTL Module lauffähig (Konfigurator, Auswahlassistent, Umfrage, Download, Upload)
  • Weitere Performanceoptimierungen: Im Standard erreicht jede Seite und jeder Typ Werte von 90-98 (Pagespeed mobil)
  • Listenfilter wahlweise als Sidebar oder oben drüber.
  • Auf Shop 4.06.12 Build angepasst

Viele weitere kleine Anpassungen wie:
  • Checkout Schritt 1: Login/Als Neukunde/Gastbestellung klare Trennung
  • Kupon auf Checkout Schritt 3 (falls man aus der Seite direkt zur Kasse springt hat man sonst keine Möglichkeit)
  • Herstellerslider für die Startseite
  • Zahlungsarten im Footer listen
  • Umbau der Nachladefunktion um Scroll-Events nicht zu blockieren
  • Bekannte Browser-Warnings aus dem alten JQuery (leider wegen Plugins noch notwendig) per Polyfill behoben
  • SVG Logo nutzbar
  • ....

Kurzum: Ein sicherlich sehr umfangreiches Update was 2 wesentliche Ziele hatte: Mehr Gestaltungsfreiheit bieten und bessere Kompabilität zu anderen Plugins und Funktionen
Das Thema Performance ist bei uns sowieso an hoher Stelle, daher gab es auch hier recht viel.

Wir wollen durch die Gestaltung keine X unterschiedlichen Templates anbieten die im Kern ähnlich sind und haben daher alles in das eine gepackt.
Selbstverständlich laden wir immer nur das was wir pro Einstellunge brauchen. Der Umfang, die Gestaltungsmöglichkeit und die Addons die ohne weitere Plugins möglich sind (Universal Analytics, Trusted Shops, Bildoptimierung) haben uns veranlasst den Preis auf 699 EUR netto anzuheben.
Das wird jedoch die letzte Preisanpassung für das Template sein, versprochen.

Wir haben einmal 3 Shops vorbereitet, die 2 neuen davon werden wir in nächster Zeit noch vom Thema etwas abwandeln - aber das ist denke ich nebensächlich.
https://snackys.knoell-marketing.de/ (Standard)
https://snackys2.knoell-marketing.de/ (Mit Video, 2te Menüvariante, Listing mit Filtern oben, größere Produktboxen - wer einen großen Bildschirm hat: Das Design geht bis 3000px im Inhalt! :) )
https://snackys3.knoell-marketing.de/ (Dropdownmenü, Darkmode, USPs)

Alle Versionen wurden nur mit Templateeinstellungen ohne Templateanpassungen realisiert.

Doku bekommt natürlich noch das notwendige Update.

Der wichtigste Hinweis: Wer die Bildoptimierung nutzen will muss darauf achten dass die .htaccess Datei unter includes/plugins/km_snackys/imageOptimizer/.htaccess vorhanden ist
Dazu muss noch in der Root .htaccess eine Zeile eingetragen werden (wir haben es hinter die Zeile bei mod_rewrite mit asset/ gepackt):
Apache config:
RewriteRule ^images/(.*)$ includes/plugins/km_snackys/imageOptimizer/?p=$1&w=%{QUERY_STRING} [L]
Die Bildoptimierung klappt für alle nachgeladenen Bilder: Vor dem Laden wird die Größe ermittelt die das Bild haben soll, mitgegeben und dann nur in dieser Größe geladen (ermöglicht z.B. responsive Slider).
Es empfiehlt sich die Bildgenerierung von JTL vorher durchlaufen zu lassen. Denn die unterschiedlichen Dimensionen werden auch von JTL erst erstellt - und im Zweifel werden bei einem Aufruf für eine noch nicht vorhandene Größe 2 Verarbeitungen gestartet. Das ist weiter nicht schlimm, aber kann beim erstmaligen Aufruf einer frischen Kategorieseite etwas zögerlich sein (danach aber nicht mehr).

Den Download mit 14 Tage Test gibt es hier: https://shop.knoell-marketing.de/zips/snackys.zip
Und wem das dann gefällt: https://shop.knoell-marketing.de/Snackys-Template


Anbei noch ein paar Eindrücke der Performance:
Die Bemessungen zur Startseite im Vergleich (neu = Version 2.01, alt = Version 1.03, Evo ist auf der Startseite sehr nackig, dennoch haben wir es mal so belassen im Test - den Vorteil schafft es nicht reinzuholen):

Startseite - alles ohne mod Pagespeed!

Pagspeed Insighty - Snacky V2.01 ### 95/100
Pagspeed Insighty - Snacky V1.03 ### 77/100
Pagspeed Insighty - EVO ### 67/100

GTMetrix PageSpeed Score - Snacky V2.01 ### 100/100
GTMetrix PageSpeed Score - Snacky V1.03 ### 90/100
GTMetrix PageSpeed Score - EVO ### 66/100

GTMetrix YSlow Score - Snacky V2.01 ### 99/100
GTMetrix YSlow Score - Snacky V1.03 ### 96/100
GTMetrix YSlow Score - EVO ### 91/100

GTMetrix Fully Loaded - Snacky V2.01 ### 2.2s
GTMetrix Fully Loaded - Snacky V1.03 ### 2.3s
GTMetrix Fully Loaded - EVO ### 2.6s

Webpagetest.org Start render - Snacky V2.01 ### 1.7s
Webpagetest.org Start render - Snacky V1.03 ### 1.9s
Webpagetest.org Start render - EVO ### 2.9s

Webpagetest.org Full Loaded - Snacky V2.01 ### 5.0s
Webpagetest.org Full Loaded - Snacky V1.03 ### 8.9s
Webpagetest.org Full Loaded - EVO ### 11.1s

Standarversion:
1555078602514.png


Und hier mit Video - dank HTML5 Techniken überhaupt nicht störend im Seitenaufbau:
1555080217095.png
 
Zuletzt bearbeitet:

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Wir haben nun Version 2.02 released.

Hier gibt es einen Mini-Bugfix für das Scrollverhalten im Megamenü.

Zusätzlich wird das Template nun direkt über das Plugin installiert und geupdatet, sodass der Installationsvorgang deutlich einfach ist:

Zip-Datei in der Pluginverwaltung hochladen + über das Plugin installieren/updaten.

Ebenfalls haben wir die Doku fertiggestellt: https://shop.knoell-marketing.de/Doku-Snackys-Template
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Ein kleiner Patch ist verfügbar: Version 2.03

Der Changelog:
- Bugfixing Modals
- Bugfixing wenn GAR keine Sidebar im Artikellisting verwendet wird
- Child-Template reduziert (nur noch die template.xml ist notwendig)
- Sprachvariablen werden im Plugin geprüft
- Verbesserung der Bildoptimierung

Download wie immer direkt im Shop mit 14 Tage Test: https://shop.knoell-marketing.de/Snackys-Template
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Das wurde eigentlich geprüft, kann es aber gerne nochmal nachstellen.
Es gab eine zeitlang ein Problem auf Grund von Pfadangaben zu den temporären Dateien.
Das wurde durch aufnehmen der URL Pfade aus der Config behoben, aber wie gesagt ich schaue es mir gerne an.
 

hula1499

Sehr aktives Mitglied
22. Juni 2011
4.325
736
Schön? Also wir haben einen komplett unterschiedlichen Geschmack - schön ist was ganz anderes, für mich :D

ABER! und das ist das viel wichtigere: es ist echt geil schnell und hat sehr sehr wenig sinnlosen Ballast. Hatte mal eine Version kurz angetestet und befüllt und das war echt nicht schlecht.
Aber als Speed-junkie bin ich ja einfach zu begeistern.
Sollten wir mal auf Shop 5 updaten (2019 garantiert nicht) ist das auf jeden Fall auf meiner Top2 Liste.
 

saw

Gut bekanntes Mitglied
1. Januar 2012
185
12
Die Geschwindigkeit des Templates ist wirklich beeindruckend!

Könnt Ihr in Euren Demos noch eine Rubrik machen mit Sonderartikeln die dann Variationen, Stücklisten usw. haben ?
Und ich vermisse die Umstellung in Kategorien von Kacheln, Listen (ich komme nicht auf die richtigen Namen)
Das würde ich halt alles ganz gerne mal sehen ohne gleich die Testlizenz zu holen.

Und habt Ihr SEO Tricks eingebaut wie Texte links, rechts, oben unten...usw. ?

danke&grüße
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Vielen Dank! :)

Es sind ja schon mehrere Beispiele drin, aber sicherlich auch versteckt.
Wir werden mal so eine Funktionsecke bauen, gerne.

Auch werden wir noch eine 4te Demo bauen im "Boxed"-Layout (was die neue Version ebenfalls unterstützt und ggf. dann schon eher was für z.B. @hula1499 ist)

Zu der Ansicht der Listen: Man kann hier nicht im Modus umstellen, aber in der Anzahl.
Ich kann also sagen "5 Artikel pro Reihe" oder 10, oder auch nur 3 - und das für 5 unterschiedliche Auflösungen (ab 1600px, 1200-1599px, ...).

Für SEO haben wir vor allem auf Performance gesetzt, im Artikeldetail eine saubere schöne Lösung ohne Tabs realisiert, Meta-Keywords entfernt (ja mit Absicht! ;) ), in strukturierten Daten die Fehler behoben (hauptsächlich der Author wird im Standard angemeckert).... lauter solche Dinge.
Feste Platzierungen für weitere SEO Texte oder ähnliches jedoch nicht: Dafür gibt es die Möglichkeit im Child-Template, denn jeder hat da ja seinen eigenen Ansatz.

Kurzum: Technik und relevanten Basics erledigen wir.
Inhaltlich: Die aktuellen Möglichkeiten sind recht gut - für weiteres simpel im Childtemplate arbeiten (am besten von der SEO Agentur instruieren lassen).
 
  • Gefällt mir
Reaktionen: saw

hula1499

Sehr aktives Mitglied
22. Juni 2011
4.325
736
Sorry, ich wurde hier vollkommen falsch verstanden.

Das Design ist zweckmässig und absolut ok - natürlich um welten besser als dieses EVO Ding.

Design ist vollkommen individuell und auch für viele Branchen unterschiedlich zu gestalten, wenn mans anständig machen will.
Performance und "aufgeräumt" ist hier das Zauberwort, Farben/Grössen/Boxen kann man via Template anpassen, der erste Bereich ist schwierig, das Templatezeug dann "einfach".
Bei JTL funktioniert beides nicht, von daher habt ihr in 2 Punkten profiliert...ich finde den performance/aufgeräumt-aspekt super, ohne Ironie.
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
402
136
Sorry, habe ich dann wirklich falsch verstanden - aber selbst wem es nicht gefällt ist absolut in Ordnung - der darf gerne im Childtemplate auf seinen Geschmack kommen :D.

Insgesamt wäre ich ja sowieso mal für eine "bare"-Templateversion wie es z.B: Shopware macht.
Aber... das ist ein anderes Thema.

Danke für das Lob :) Es freut uns hier den wohl richtigen Weg gefunden zu haben.
 
  • Gefällt mir
Reaktionen: peterwill
Ähnliche Themen Forum Antworten Erstelldatum des Themas
Neu JTL Shop 5.0.1 Nova-Template Slick Slider Bildgröße fehlerhaft JTL-Shop - Fehler und Bugs 1
Neu eBay Template erstellen anhand einer Designvorlage Dienstleistung, Jobs und Ähnliches 0
Neu JTL Shop5 mit Standart Template Nova Bildergröße für Banner und Slider ändern Allgemeine Fragen zu JTL-Shop 0
Fragen zum Nova Template Kategorien etc Upgrade JTL-Shop4 auf JTL-Shop5 2
Shop 5 Evo Template Links im Kopfbereich führen auf Startseite Upgrade JTL-Shop4 auf JTL-Shop5 7
Neu Freelancer für JTL Shop 5 Template Anpassungen gesucht Dienstleistung, Jobs und Ähnliches 0
Neu JTL Shop 5 Theme Editor Nova Template Farbe Buttons Templates für JTL-Shop 5
Neu price.tpl - WO GREIFT DIESE DATEI ÜBERALL? && TEMPLATE-VERÄNDERUNG, BITTE UM HILFE Templates für JTL-Shop 2
Neu Shop 5 - Nova Template Umlaute/Sonderzeichen Fehler im Kundenmenü/Registrierung Templates für JTL-Shop 8
Neu JTL Shop 5 NOVA-Template Kategorien als Menüpunkt Technische Fragen zu Plugins und Templates 6
Neu <body> Tag nicht in header.tpl? | Shop5 NOVA Template | CMP-Code Consentmanager User helfen Usern - Fragen zu JTL-Wawi 0
Neu E-Mail Template für Rechnungen JTL-Wawi - Fehler und Bugs 0
Nova Template - "In den Warenkorb" bei Hover in Artikelübersicht Einrichtung JTL-Shop5 2
Gelöst nach Update auf Shop 5.0.1: kein CSS nach Wechsel auf NOVA Template Upgrade JTL-Shop4 auf JTL-Shop5 2
Neu JTL WAWI 1.4.5.40.0, JTL Shop 5 Nova-Template User helfen Usern - Fragen zu JTL-Wawi 0
Beantwortet Shop 5 Nova Template - Kategoriebilder bei bestimmten Kategorie Level nicht anzeigen Templates für JTL-Shop 1
Neu Evo Template 5.0? Templates für JTL-Shop 3
Shop lädt nicht bei Nova Child Template Einrichtung JTL-Shop5 2
Neu Nova Template Shop 5 rechte Spalte bei Kategorien und im Artikel Templates für JTL-Shop 1
Gelöst NOVA Template zusätzliches Bild auf der Wartungsseite. Templates für JTL-Shop 2
Nova Template CLS und Page Speed Einrichtung JTL-Shop5 2
Neu Plugin: smarty include Template aus einem anderen Pfad, wie? Technische Fragen zu Plugins und Templates 0
Neu Nova Template Möglichkeit bei Klicken auf Oberkategorie, anzeige aller Artikel der unterkategorien ? Templates für JTL-Shop 0
Neu Löschen von Test Artikeln / Kategorien aus Evo Shop-Template Onlineshop-Anbindung 2
Update von Shop 4 mit Salepix auf Shop 5 mit Nova Template problemlos? Upgrade JTL-Shop4 auf JTL-Shop5 4
Neu NOVA Template Kategorie / Unterkategorie anpassen Allgemeine Fragen zu JTL-Shop 2
Neu Nova Child-Template Hintergrundfarbe Global ändern. Templates für JTL-Shop 2
Neu Nova Template umbauen - Warenkorb Button und Konfigurator Button - Kunde soll selbst entscheiden können Dienstleistung, Jobs und Ähnliches 0
Neu NOVA Template - Hintergrundfarbe Formular - Anmeldung Templates für JTL-Shop 4
Beantwortet Header vergrößern im NOVA Template Templates für JTL-Shop 7
Neu Änderung an der Produkt Detail Seite beim Shop 5 NOVA Template Templates für JTL-Shop 3
Neu JTL Shop 5, Nova Template, wie bekomme ich Kategorien und unter diesen, die Artikel sichtbar? Allgemeine Fragen zu JTL-Shop 4
Neu Massive Probleme NOVA 5 Template Anzeige Templates für JTL-Shop 1
Gelöst Fehler 503 bei Aktivierung Child-Template JTL-Shop - Fehler und Bugs 1
Neu [Shop4|Evo]Änderung im Template wird ignoriert Templates für JTL-Shop 0
Gelöst JTL Shop 5 Nova Template Problem beim Einrichten des PayPal Plug-ins Einrichtung JTL-Shop5 2
Fehler bei DB Update: Cannot load template no-template Upgrade JTL-Shop4 auf JTL-Shop5 3
Nova Template: Komischer Abstand des ersten Panels? Einrichtung JTL-Shop5 3
Neu Unable to load template 'file: selectionwizard/index.tpl' JTL-Wawi - Fehler und Bugs 0
Suchfeld Nova Template verkleinern Einrichtung JTL-Shop5 8
Evo Template in Shop 5 identisch mit Shop 4? Upgrade JTL-Shop4 auf JTL-Shop5 2
JTL Shop5 Nova Template Top Angebote unter den Artikeln Einrichtung JTL-Shop5 2
JTL Shop5 Nova Template keine Responsive Ansicht TOP Angebote und News Einrichtung JTL-Shop5 4
Neu Änderungen an Child Template SCSS Variablen wird nicht übernommen Technische Fragen zu Plugins und Templates 1
Neu Versehentlich EVO Template aktiviert - Danach zerschossene Darstellung von Nova Template Installation / Updates von JTL-Shop 0
Gelöst NOVA Template - Slick Slider macht Probleme - Geladen wird nach 'mouseenter' & 'touchstart' Templates für JTL-Shop 7
Neu EVO Template für Shop 5 "404" Anzeige im Frontende Hersteller Templates für JTL-Shop 1
Gelöst Template Abfrage Templates für JTL-Shop 1
NOVA Template zerschossen nach Upgrade von 4 auf 5 Upgrade JTL-Shop4 auf JTL-Shop5 0
Gelöst JTL Shop5 bei JTL gehostet. Nova-Template ist nicht mit Smartphone zu nutzen . welche Einstellung muss da noch gemacht werden Templates für JTL-Shop 9
Ähnliche Themen