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

  • Wenn Ihr uns das erste Mal besucht, lest euch bitte zuerst die Foren-Regeln durch.

KnoellMarketing

Gut bekanntes Mitglied
9. Januar 2018
169
64
#24
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

Gut bekanntes Mitglied
9. Januar 2018
169
64
#26
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

Gut bekanntes Mitglied
9. Januar 2018
169
64
#27
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.png Screen-Home-Boxed.png Screen-Home-Fullemnu-Full-Simple.png Screen-Home-Fullemnu-Half-Full-Simple.png Screen-Home-Simple.png Screen-Home-Video-Full-Nav.png Screen-Listing-Simple-Above.png Screen-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

Gut bekanntes Mitglied
9. Januar 2018
169
64
#28
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