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

  • Temporäre Senkung der Mehrwertsteuer Hier findet ihr gesammelt alle Informationen, Videos und Fragen inkl. Antworten: https://forum.jtl-software.de/threads/mehrwertsteuer-senkung-vom-01-07-31-12-2020-offizieller-diskussionthread-video.129542/

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Hallo JTLer,

unsere Kunden haben wir versprochen bis Jahresende wird es fertig - daher haben wir in den letzten Tagen den Endspurt hingelegt und sind nun endlich soweit:
Unser erstes Template für die Allgemeinheit (sonst erstellen wir stets individuelle Templates) ist einsatzbereit.

Die Live-Demo: https://snackys.knoell-marketing.de

Der Clou: Wir haben hier ein sehr großen Fokus auf Performance gelegt.
Auf Grund unseren Erfahrungen mit AMP und dem diesjährigen starken Fokus von Google auf Geschwindigkeit (finden wir toll: Damit denken auch die Betreiber an das Thema und surfen fängt wieder an Spaß zu machen!) haben wir recht viele Berührungspunkte gehabt die wir allesamt in der Templateumsetzung mit beachtet haben.

Das Ergenis: Ein schnelles Template - das nach unserer Auffassung auch noch richtig gut aussieht.

Auch im Design/Funktionalitäten haben wir uns ein paar Besonderheiten gewidmet:
  • Sidebar Warenkorb
  • Optimierter Checkout (Funneling)
  • Endless Scrolling
  • Bilderzoom
  • Lightbox mit Gallerie
  • Integrierter Cookie Hinweis
Ein paar Beispiele wie wir eine bessere Performance erreichen:
  • Minifizierte Bootstrap (statt einfach dem kompletten Framework)
  • CSS nach Seitentypen (Styling von der Artikelseite sind auf der Startseite unnötig)
  • CSS wird vollständig intern geladen (Vermeiden von Requests)
  • JavaScript wird optimiert und verzögert geladen (auch inline-Skripts werden ausgelagert)
Zu guter Letzt haben wir auf exakt dem gleichen Shop mit identischen Einstellungen einmal unser Template und einmal das EVO-Template geprüft.

Der Performance-Check:
Startseite - Seite erscheint:
2,50s Snackys Template
3,30s EVO Template

Kategorieseite - Seite erscheint:
2,00s Snackys Template
3,60s EVO Template

Detailsseite - Seite erscheint:
2,30s Snackys Template
3,60s EVO Template

Und das sagt Pagespeed Insights:
Startseite
81/100 Mobil - 88/100 Desktop - Snackys Template
56/100 Mobil - 80/100 Desktop - EVOTemplate

Kategorieseite
94/100 Mobil - 97/100 Desktop - Snackys Template
78/100 Mobil - 98/100 Desktop - EVOTemplate

Detailseite
82/100 Mobil - 100/100 Desktop - Snackys Template
41/100 Mobil - 97/100 Desktop - EVOTemplate

Selbstverständlich haben wir auch andere Optimierungen wie den Objekt- Cache, Mod-Pagespeed usw. aktiviert: im Test jedoch natürlich für beide Templates!

Demo-Shop: https://snackys.knoell-marketing.de/

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

Die ZIP entpacken und einfach in das Hauptverzeichnis des Shops laden (Struktur ist nach JTL ausgerichtet) und beinhaltet das Template + das Plugin.
Das Template funktioniert mit dem 4.06er Shop.

Download

Beim Plugin die Abfrage des Lizenzkeys kann einfach mit weiter bestätigt werden - dann aktiviert sich die Testlizenz.


P.S.: Unser eigener Shop wird dafür gerade fertiggestellt, sodass es dann auch nach der Testphase gekauft werden kann.
 
Zuletzt bearbeitet:

Roddi

Sehr aktives Mitglied
14. Juli 2012
480
43
Im Beitrag sollte vllt. noch der Hinweis stehen, das Ioncube installiert sein muss sonst bekommt man eine weiße Seite nach dem aktivieren zu sehen. ;)
 
  • Gefällt mir
Reaktionen: KnoellMarketing

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Danke für das viele Feedback.
Wir haben dies zum Anlass genommen noch mehr rauszuholen: Und sind nun nochmal rund 10% schneller!
Zudem gibt es ein paar Updates:

- Template ist nun vollständig eigenständig (kein Child des EVO-Templates mehr)
- Reduzierung von PHP Ausführungen (alle Template eigenen CSS und JS Angaben sind soweit optimiert, dass diese ohne PHPQuery optimal eingebunden werden, nur noch Drittanbieter durchlaufen die Prozesse)
- weiteres Theme: Darkmode
- Custom-Theme für eine schnelle Anpassung
- config.ini für die Anpassung von eigenen Farben
- Dokumentation, siehe: https://shop.knoell-marketing.de/Doku-Snackys-Template
- Vorgefertiges Child-Template zum Download: https://www.knoell-marketing.de/snackys-child.zip
- Bugfixes

Die aktuelle Version ist unter gleichem Link zum Download mit 14 Tagen Testzeitraum verfügbar.
Zum Template: https://shop.knoell-marketing.de/Snackys-Template
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Welche PayPal Plus Version wird hier verwendet?
Da hatten wir einen Fix eingebaut, gerne prüfen wir das nochmal - das sollte natürlich funktionieren.

Zur Preisgestaltung: Das Template soll 599,00 € netto inkl. 12 Monate Updates kosten, die weitere Subskription wird 50% betragen.
Alle Infos dazu auch unter: https://shop.knoell-marketing.de/Snackys-Template
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Vielen Dank für die Rückmeldung.

Ist behoben - einfach neu herunterladen.
Eigentlich muss im Template nur die snackys/layout/footer.tpl ersetzt werden.

Die Langversion für Interessierte:
Auch in der Version ging es, es war jedoch abhängig davon wie schnell welche JavaScript-Datei nachlädt und ggf. zu früh das JQuery ready() (hier vom PayPal Plugin) ausgelöst wurde.
Sicherlich auch im Sinne weiterer Drittanbieter JavaScripts haben wir eine Lösung eingebaut, die statt nach Dokument laden erst nach "allen JavaScripts laden" (die bei uns ja erst nach dem Seitenaufbau aus Performancegründen geladen werden) ausgeführt wird - sprich wir überschreiben diese JQuery Funktion.
 

Kakal

Aktives Mitglied
17. September 2015
93
14
Auf der artikel detailseite wo man die Menge eintippen kann und in den warenkorb klicken kann, erscheint die Einheit Stück oder Set nicht passend

1546733717848.png
 

seoseed.de

Gut bekanntes Mitglied
20. Oktober 2007
576
1
Buchholz
Vielen Dank für die Rückmeldung.

Ist behoben - einfach neu herunterladen.
Eigentlich muss im Template nur die snackys/layout/footer.tpl ersetzt werden.

Die Langversion für Interessierte:
Auch in der Version ging es, es war jedoch abhängig davon wie schnell welche JavaScript-Datei nachlädt und ggf. zu früh das JQuery ready() (hier vom PayPal Plugin) ausgelöst wurde.
Sicherlich auch im Sinne weiterer Drittanbieter JavaScripts haben wir eine Lösung eingebaut, die statt nach Dokument laden erst nach "allen JavaScripts laden" (die bei uns ja erst nach dem Seitenaufbau aus Performancegründen geladen werden) ausgeführt wird - sprich wir überschreiben diese JQuery Funktion.
Das ging ja schnell. Besten Dank. Im Gesamtpaket ist mir der Preis und die jährliche Subscription doch ein bisschen zu hoch. Bei 500/250 inkl. wäre ich eingestiegen.
 

make-it

Aktives Mitglied
5. Januar 2010
36
2
Gute Tag,
Seoseed:
Immer wieder der Preis, Preis ist mehr dan geregfertigt. Du kannst natürlich auch gerne ein eigenes template erstellen steht jeden frei.
Deine eigene Dienstleistungen sind auch nicht umsonst.
Mit freundlichen Grüßen
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Auf der artikel detailseite wo man die Menge eintippen kann und in den warenkorb klicken kann, erscheint die Einheit Stück oder Set nicht passend

Den Anhang 30934 betrachten
Ist ebenfalls behoben.

Einfach das Template neu einspielen (ZIP neu herunterladen).

Es wurde die Datei /templates/snackys/themes/base/css/details.css geändert, hinzugekommen ist:

CSS:
#buy_form .input-group-addon.unit {
    padding: .75rem .2rem;
    margin-right: 1rem;
}
Bitte in der Doku (im Plugin oder hier: Link Doku) den Punkt " Cache erneuern" beachten damit die Änderungen dargestellt werden.
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Und noch ein Update - erneut Dank der vielen Rückmeldungen.

Wir haben die Lizenzklasse angepasst, sodass nur 1x pro Tag die Lizenz geprüft wird um weiter Ressourcen zu sparen.
Nach dem Download reicht es das Plugin zu updaten (am Template gab es keine Änderungen).
 

hula1499

Sehr aktives Mitglied
22. Juni 2011
4.239
694
Als speed-fanatiker bin ich ja immer an neuen Dingen interessiert :D

Gibts bereits Referenzen die ihr mitteilen dürft? Demo Shops sind bezüglich speed-test/Angaben meist sehr "realitätsfremd". Gerne auch per PM.
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Hallo hula14999,

dann sprechen wir ja die gleiche Sprache :)
Ich habe bisher keine andere Meldung und darf frei sagen: Wir haben z.B. die ersten JTL Shops auf AMP Basis erstellt. (Beispiele: www.freixenet-onlineshop.de oder auch www.ma-bike.com)
Wir lieben Geschwindigkeit.

Zu dem Template haben wir leider noch keine nennbaren Referenzen, dafür ist es einfach zu neu.
Wir haben allerdings 3 Kunden die aktuell an Individualisierung auf Basis dieses Templates überarbeitet werden - sobald diese live sind teilen wir die gerne mit.

Für Kenner lohnt sich jedoch auch ein erster Blick in z.B. webpagetest.org, siehe: https://www.webpagetest.org/result/190107_KQ_c8a4f65a607c26a6df6e84eefb0d8317/
Hier sieht man den Hauptvorteil: Es ist nur das grundlegende HTML notwendig bis die Seite vollständig dargestellt wird.
Gerne kann man auch weitere Werte davon vergleichen, wie z.B: die beinhaltete CSS Größe dieser ersten Anfrage (die die Seite vollständig darstellt. Als CSS laden wir nur die Schrift nach, sonst ist alles bereits ausgeliefert): 68KB !

Im übrigen wird dieses Template auch mit unserem kommenden Plugin AMP kompatibel sein: Die letzten Bytes sparen wir uns dann durch Standard-AMP Funktionen wie den Slider, sowie entfernen von Transitions usw. - ist bereits in der Fertigstellung (AMP Release ist für Anfang Februar geplant).
 
Zuletzt bearbeitet:

hula1499

Sehr aktives Mitglied
22. Juni 2011
4.239
694
AMP für CMS/News -> top
AMP für Artikel/ Shop etc -> unbrauchbar, nicht relevant und auch niemals dafür gedacht/geplant gewesen.

Ok, bin ja jetzt eh Abo von dem Beitrag, mal schaun bis die ersten Seiten mal live sind :)
Demoseiten sind immer nackt, ohne Plugins oder ähnlichem -> da schneidet ja auch noch Evo nicht so schlecht ab ab, gegenüber so manchen Referenzseiten mit Evo - daher leider nicht aussagekräftig.
Gibt ja ne 14 Tage Demo, viell. schau ich mir die mal am DEV an, gibt ja "leider" schon ein paar schlagende Argumente (schon allein der ganze bootstrap mist, wovon eh XX% irrelevant ist)
 

KnoellMarketing

Offizieller Servicepartner
SPBanner
9. Januar 2018
391
132
Es ist ein Update verfügbar.

Leider haben wir in Bezug auf das Child-Template Bugs feststellen müssen, diese wurde behoben.
Ebenso haben wir bereits weitere Entwicklung mit einfließen lassen um nicht nur die Bugbehebung zu realisieren.

In der Version 1.03 von Snackys wurde erledigt:
  • Bugfixing Child Template: Config-Dateien werden nun im Child-Template gesucht, wenn nicht vorhanden aus dem Haupttemplate genutzt, die Haupt JavaScript Dateien werden immer aus dem Haupttemplate genutzt, wenn nicht anders im Child Template angegeben
  • Verbesserung der Performance, durch:
    • JQuery Bibliothek wird nun während dem Seitenaufbau geladen, jedoch erst nach Fertigstellung ausgeführt, die Grundladezeit bleibt identisch, die nachladende Zeit wird minimiert
    • Durch die JQuery Änderung werden nun alle darauffolgenden JavaScripts unmittelbar danach geladen (parallel) - spart ebenfalls 1 Roundtrip
    • Ablauf des Nachladens optimiert
    • Verringern der Domtiefe um 3 Stufen
    • Notwendige Inline-JavaScript dramatisch reduziert
    • DNS Prefetch von Analytics
  • Bugfixing mit PayPal Paymentwall und Käuferschutz
  • Eigene Cachingdateien werden mit dem Leeren des Objectcaches "Template" nun ebenfalls entfernt
  • Das Logo wird nicht mehr nachgeladen, sondern direkt präsentiert, die eine Bilddatei machte in allen Tests keine Schwierigkeiten und sieht schöner aus

Das Ergebnis: 0,1 bis 0,3 Sekunden Performance-Gewinn, aber beachtlich sind die Steigerungen in Pagespeed Insights (hervorgerufen durch besseres Parsing und JS-Verfahren):
Startseite mobil: 98/100 Punkte
Kategorieseite mobil: 100/100 Punkte
Detailseite mobil: 99/100 Punkte

Die Desktopwerte sind alle bei 100/100 geblieben, sorry. ;)

Die Version ist über den gleichen Link verfügbar: https://shop.knoell-marketing.de/zips/snackys.zip
Das Child-Template mit seiner Mindestanforderung gibt es hier: https://www.knoell-marketing.de/snackys-child.zip

P.S.: @hula1499 Der erste Live- Shop ist hier zu sehen: https://www.fitness-and-fun.de - der schnelle Livegang war jedoch auf ein Problem mit der 4.05er und der Serverkonstellation zurückzuführen, sodass hier in den nächsten Tagen sicherlich auch noch einiges hinzukommt. Die anderen beiden bauen wir noch in der Testumgebung bis diese Live gehen werden.
 

make-it

Aktives Mitglied
5. Januar 2010
36
2
Es ist ein Update verfügbar.

Leider haben wir in Bezug auf das Child-Template Bugs feststellen müssen, diese wurde behoben.
Ebenso haben wir bereits weitere Entwicklung mit einfließen lassen um nicht nur die Bugbehebung zu realisieren.

In der Version 1.03 von Snackys wurde erledigt:
  • Bugfixing Child Template: Config-Dateien werden nun im Child-Template gesucht, wenn nicht vorhanden aus dem Haupttemplate genutzt, die Haupt JavaScript Dateien werden immer aus dem Haupttemplate genutzt, wenn nicht anders im Child Template angegeben
  • Verbesserung der Performance, durch:
    • JQuery Bibliothek wird nun während dem Seitenaufbau geladen, jedoch erst nach Fertigstellung ausgeführt, die Grundladezeit bleibt identisch, die nachladende Zeit wird minimiert
    • Durch die JQuery Änderung werden nun alle darauffolgenden JavaScripts unmittelbar danach geladen (parallel) - spart ebenfalls 1 Roundtrip
    • Ablauf des Nachladens optimiert
    • Verringern der Domtiefe um 3 Stufen
    • Notwendige Inline-JavaScript dramatisch reduziert
    • DNS Prefetch von Analytics
  • Bugfixing mit PayPal Paymentwall und Käuferschutz
  • Eigene Cachingdateien werden mit dem Leeren des Objectcaches "Template" nun ebenfalls entfernt
  • Das Logo wird nicht mehr nachgeladen, sondern direkt präsentiert, die eine Bilddatei machte in allen Tests keine Schwierigkeiten und sieht schöner aus

Das Ergebnis: 0,1 bis 0,3 Sekunden Performance-Gewinn, aber beachtlich sind die Steigerungen in Pagespeed Insights (hervorgerufen durch besseres Parsing und JS-Verfahren):
Startseite mobil: 98/100 Punkte
Kategorieseite mobil: 100/100 Punkte
Detailseite mobil: 99/100 Punkte

Die Desktopwerte sind alle bei 100/100 geblieben, sorry. ;)

Die Version ist über den gleichen Link verfügbar: https://shop.knoell-marketing.de/zips/snackys.zip
Das Child-Template mit seiner Mindestanforderung gibt es hier: https://www.knoell-marketing.de/snackys-child.zip

P.S.: @hula1499 Der erste Live- Shop ist hier zu sehen: https://www.fitness-and-fun.de - der schnelle Livegang war jedoch auf ein Problem mit der 4.05er und der Serverkonstellation zurückzuführen, sodass hier in den nächsten Tagen sicherlich auch noch einiges hinzukommt. Die anderen beiden bauen wir noch in der Testumgebung bis diese Live gehen werden.
 
Ähnliche Themen Forum Antworten Erstelldatum des Themas
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 1
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 2
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
Neu NOVA Template Kategorien, etc. auch auf der Startseite Templates für JTL-Shop 1
Neu Merkmal Farbe Template Nova Allgemeine Fragen zu JTL-Shop 2
Gelöst Template-Datei image.tpl - Wo finde ich Slick-Slider-Einstellungen für Bild in Artikeldetails Templates für JTL-Shop 3
Neu Servicepartner für kleine Aufträge rund um Template und Workflow Angelegenheiten gesucht Dienstleistung, Jobs und Ähnliches 2
Neu SASS in NOVA Child-Template überschreiben Templates für JTL-Shop 1
Neu Artikeldetailseite zerschossen - kein Ablegen der Artikel in warenkorb mehr möglich Shop5 / Nova template Allgemeine Fragen zu JTL-Shop 7
Neu EVO Template für Shop 5 Templates für JTL-Shop 0
Neu Nova Template / JTL Header Plugin / Check-Out Templates für JTL-Shop 2
Gelöst Nova Child-Template führt zu einem defekten Shop Templates für JTL-Shop 3
Neu NOVA Template Hintergrundfarbe (main) ändern Templates für JTL-Shop 9
Neu Themes für Nova Template Templates für JTL-Shop 2
Ähnliche Themen