Gelöst NOVA Template - Slick Slider macht Probleme - Geladen wird nach 'mouseenter' & 'touchstart'

anonymous

Aktives Mitglied
24. Januar 2019
38
4
Guten Tag zusammen,

wir probieren uns gerade in einem Testshop mit dem neuen JTL Shop 5 und dem Nova Template. Hier ist uns aufgefallen, dass der Slick Slider ziemliche Probleme in der Nutzerfreundlichkeit macht.

Wir erläutern die Problemfindung am Beispiel der Artikeldetailseite und einem Blanko-Testshop:
Möchte man seinen Slider im Shop anpassen, so sind Änderungen in der CSS unumgänglich. Standardmäßig haben die Thumbs z.B. einen schwarzen Rahmen. Wir ändern den Rahmen jetzt mal auf z.B. grün. Nachdem die .css hochgeladen ist (alles natürlich im Child-Template) und man die Seite aufruft, stellt man fest, dass sich die Farbe nicht ändert, bis man mit der Maus über den Slider fährt. Soweit noch kein weltbewegendes Problem. Unser Umkehrschluss war, dass die Elemente also erst nach einem Event geladen werden und alle Slick-Slider betreffen müssen. Nach einem Blick in die jtl.evo.js haben wir entdeckt, dass der Slick-Slider erst nach einem Event generiert wird. Am Desktop ist das 'mouseenter', für mobile Geräte scheinbar 'touchstart'.

Wo macht sich das Problem bemerkbar?

Scrollt man auf der Artikeldetailseite weiter runter, findet man die klassischen Boxen für Produktvorschläge ( X-Selling, Ähnliche Artikel, Kunden kauften auch, usw.). Auch diese Slider, wie alle anderen Slick-Slider im gesamten Shopsystem, werden erst nach Event geladen.

Mobil ergibt sich dadurch, dass man mit dem Finger über den Slider swiped, zunächst aber nichts passiert und man nochmal swipen muss, damit der Slider macht was er machen soll. Man hat also jedes mal wenn man einen Slider nutzt den Eindruck der Shop würde hängen.



Schaut euch dazu mal die folgende Seite im JTL Demoshop an:

https://demo.jtl-shop.blackbike-forest.de/Herren-Cityrad-Uri-28-Zoll

Hier wird das Problem sichtbar. Versucht mal mit dem Smartphone einen der unteren Slider zu nutzen und ihr werdet feststellen, dass er hängt. Auf dem Desktop sieht man das "nachladen" des Sliders, da sich bei Mouseover die Bilder leicht vergrößern (der Slider also für einen ganz kurzen Augenblick ruckelt). Gleiches Ruckeln ergibt sich auch am Desktop beim Artikelbild, sofern es Thumbs hat.

In der jtl.evo.js scheint folgender Code dafür verantwortlich zu sein:

PHP:
        generateSlickSlider: function() {
            let self = this;
            self.initSlick($('.evo-box-slider:not(.slick-initialized)'), 'box-slider');
            self.initSlick($('.evo-slider-half:not(.slick-initialized)'), 'slider-half');
            self.initSlick($('.evo-slider:not(.slick-initialized)'), 'product-slider');
            self.initSlick($('.news-slider:not(.slick-initialized)'), 'news-slider');

            $('.slick-lazy').on('mouseenter', function (e) {
                let mainNode = $(this);
                mainNode.removeClass('slick-lazy');
                if (!mainNode.hasClass('slick-initialized')) {
                    mainNode.find('.product-wrapper').removeClass('m-auto ml-auto mr-auto');
                    self.initSlick(mainNode, mainNode.data('slick-type'));
                }
            });

            document.querySelectorAll('.slick-lazy').forEach(function(slickItem) {
                let startX;
                let supportsPassive = false;
                try {
                    let opts = Object.defineProperty({}, 'passive', {
                        get: function() {
                            supportsPassive = true;
                        }
                    });
                    window.addEventListener("testPassive", null, opts);
                    window.removeEventListener("testPassive", null, opts);
                } catch (e) {}

                slickItem.addEventListener('touchstart', function (e) {
                    startX = e.changedTouches[0].pageX;

                },supportsPassive ? { passive: true } : false);
                slickItem.addEventListener('touchmove', function (e) {
                    let mainNode = $(this);
                    if (!mainNode.hasClass('slick-initialized')
                        && Math.abs(startX - e.changedTouches[0].pageX) > 80
                    ) {
                        mainNode.removeClass('slick-lazy');
                        mainNode.find('.product-wrapper').removeClass('m-auto ml-auto mr-auto');
                        self.initSlick(mainNode, mainNode.data('slick-type'));
                        if(mainNode.slick('getSlick').slideCount > mainNode.slick('slickGetOption', 'slidesToShow')) {
                            mainNode.slick('slickGoTo', 1);
                        }
                    }
                }, supportsPassive ? { passive: true } : false);
            });
        },

Wir würden gerne den Slider generieren lassen, bevor irgendein Event ausgeführt wird. Praktisch sozusagen als ready.
Leider haben wir uns alle Programmierkünste selbst beibringen müssen und kommen hier nicht weiter.

Kann uns jemand helfen und sagen, was wir ändern müssen?

Vielen lieben Dank an alle, die sich unserem Problem annehmen und uns helfen. Danke :)

P.S.: Ja, wir wissen, dass es auf Kosten der Performance und Ladezeiten gehen wird
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
778
204
Hallo @anonymous

dass der Slider mobil nicht direkt losscrollt ist als Bug einzustufen.
Ich werde gleich ein Ticket dazu machen..

Bezüglich der CSS-Anpassungen ist es leider so, dass man für manche Dinge die 2 Versionen stylen muss: "slick initialisiert", "slick nicht initialisert".

Viele Grüße
Michael

Edit: Meine vorgeschlagene Lösung macht bei dem News-Slider Probleme, daher habe ich sie entfernt. Das Ticket wird aber in der 5.0.1 gelöst sein.
Hier der Merge Request zum Ticket:
https://gitlab.com/jtl-software/jtl-shop/core/-/merge_requests/1577/diffs
 
Zuletzt bearbeitet:

anonymous

Aktives Mitglied
24. Januar 2019
38
4
Hi @MHillmann,

danke für das schnelle Feedback.

Dass der Slider hängt und dass das in der 5.0.1 gelöst werden soll ist schon einmal sehr gut. Hierzu aber auch die Frage, wann denn die 5.0.1. erscheinen soll?!

Unser grundlegendes Problem ist, dass sich durch das verspätete Laden des Sliders ganz andere Probleme ergeben. Unser eigenes Template ist darauf angewiesen, dass der Slider sofort in voller Montur da ist.

Auch Änderungen der Slick-Eigenschaften, die ja in der jtl.evo.js gesetzt werden, werden logischerweise erst nachträglich geladen. Setzt man z.B. arrows = true oder dots = true, so erscheinen die Pfeile oder Dots ebenfalls erst nachdem der Slider 'initialisiert' wurde.

Die Hauptfrage ist also, wie kann man das 'mouseenter'- und 'touchstart'-Event umgehen, damit der Slider nicht lazy, sondern umgehend beim Seitenaufbau geladen wird?

Vielen Dank und beste Grüße :)
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
778
204
Hey,

Hierzu aber auch die Frage, wann denn die 5.0.1. erscheinen soll?!
Die QA wird wahrscheinlich diese Woche starten, dann dauert es noch ein paar Tage, da wir natürlich ordentlich testen müssen. Nach so einem großen Release wie der 5.0.0 gibt es verständlicherweise viele Supportanfragen wodurch sich die QA auch etwas verlängert. Wir geben aber unser Bestes, schnellstmöglich den Patch zu releasen.

Die Hauptfrage ist also, wie kann man das 'mouseenter'- und 'touchstart'-Event umgehen, damit der Slider nicht lazy, sondern umgehend beim Seitenaufbau geladen wird?

Du müsstest eigentlich nur den Code kopieren der die Slider bei mouseneter initialisiert, also so in der Art:
JavaScript:
            $('.slick-lazy').each(function () {
                let mainNode = $(this);
                mainNode.removeClass('slick-lazy');
                if (!mainNode.hasClass('slick-initialized')) {
                    mainNode.find('.product-wrapper').removeClass('m-auto ml-auto mr-auto');
                    self.initSlick(mainNode, mainNode.data('slick-type'));
                }
            });

Viele Grüße
Michael
 
  • Gefällt mir
Reaktionen: anonymous

anonymous

Aktives Mitglied
24. Januar 2019
38
4
Danke @MHillmann,

das war genau das was wir gesucht haben! Jetzt lädt der Slider sofort, CSS ist sofort da und auch der Touch springt beim ersten Touch an.

Vielen lieben Dank für deine Hilfe!
 

a.timke

Aktives Mitglied
18. April 2019
2
0
Hallo,

wir haben hier leider das gleiche Problem, aber trotz der Änderung in der jtl.evo.js hängt der Slider immer noch, gibt es hier noch etwa anderes zu beachten?

Gruß Andreas
 

anonymous

Aktives Mitglied
24. Januar 2019
38
4
Hi @a.timke ,

war das deine erste Änderung in den .js-Dateien? Falls ja solltest du überprüfen ob deine template.xml richtig ist und die Änderungen auch übernommen werden.

Beste Grüße
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu JTL 5 Shop -> Slick Slider auf der Startseite im Nova Template verändern Templates für JTL-Shop 2
Neu NOVA Template Weiß nach Update 4.06 => 5 Installation / Updates von JTL-Shop 7
Nova Template - Artikelübersicht - Verfügbarkeit anzeigen Einrichtung JTL-Shop5 3
Neu Bestand pro Lager bei mehrern Lägern ausblenden im Nova Template nur Ampel anzeigen in Artikelbeschreibung Templates für JTL-Shop 2
Neu NOVA Template Artikelsticker ändern Templates für JTL-Shop 6
Weiße Seite beim NOVA-Template, EVO geht Upgrade JTL-Shop4 auf JTL-Shop5 2
Neu Template Anpassung im Child Theme via JTL Theme Editor -> my-nova.scss Templates für JTL-Shop 0
Neu NOVA Template Farbänderung in verschiedenen Bereichen Templates für JTL-Shop 5
Neu JTL SHOP 5.0.1 / NOVA-Template UVP/Rabattanzeige Artikelübersichten Allgemeine Fragen zu JTL-Shop 5
Neu JTL5.1.1 Nova-Template mit Child Mobiles Menü Templates für JTL-Shop 6
Neu Template Nova/layout/header_nav_search.tpl <li>? JTL-Shop - Fehler und Bugs 5
Neu NOVA Template linke Navigation? Templates für JTL-Shop 2
Neu Animations Balken im Nova Template Farbe ändern Templates für JTL-Shop 2
Neu NOVA Template lässt sich nicht aktivieren JTL-Shop - Fehler und Bugs 4
Neu Shop 5 NOVA Template - Menü ohne Kategorien Allgemeine Fragen zu JTL-Shop 4
Neu EU Energielabel Nova Template Templates für JTL-Shop 2
Neu NOVA Template - Megamenu Oberkategorie Link entfernen Templates für JTL-Shop 2
Neu NOVA Template - dunkler Hintergrund bei ausklappendem Megamenu Templates für JTL-Shop 4
Neu NOVA Template Preisspannen Slider noUI-touch-area sekundäre Farbe ändern Templates für JTL-Shop 2
Neu NOVA Template JTL Shop 5 eigenen Content-Block zwischen Footer und Produktdetailsseiten Technische Fragen zu Plugins und Templates 2
Neu Schriftgröße des Menüs im Nova Child Template vergrößern Templates für JTL-Shop 2
Inhalte auf der Startseite bearbeiten im Nova Tenmlate Einrichtung JTL-Shop5 2
Neu JTL Shop 5 - Anpassung Nova Child Theme - Benachrichtigungsfunktion Dienstleistung, Jobs und Ähnliches 0
Neu Alternative für NOVA wie die freien Evo Themes von bootswatch.com? Templates für JTL-Shop 1
Neu Nova vs Drittanbieter Templates? Templates für JTL-Shop 9
Neu nova update nach Shop Update 5.1.1 Templates für JTL-Shop 1
Neu Shop 5.1.1 > Nova > Bestseller | Logo Templates für JTL-Shop 3
Shop 5: Nova / Lieferzeitenangabe für Kinderartikel passt nicht Einrichtung JTL-Shop5 0
Beantwortet Einstellungen Megamenü Nova Einrichtung JTL-Shop5 2
Neu Slider verkleinern im NOVA Templates für JTL-Shop 3
Neu Header Box im Shop 5 Nova / Evo.. Templates für JTL-Shop 3
Neu NOVA: Hauptmenü Dropdown Anpassungen Templates für JTL-Shop 2
Neu Nova Child wie _buttons.scss bearbeiten? Templates für JTL-Shop 1
Neu Produktbilder-Slider soll vertikal im Nova sein Templates für JTL-Shop 2
Neu NOVA Farbe untere Footer-Leiste Templates für JTL-Shop 3
Neu NOVA > Cache Dauer für Browsercache einstellen Templates für JTL-Shop 2
Neu NOVA Child: Artikeldetailseite Tabs werden untereinander dargestellt anstatt zu faden Templates für JTL-Shop 2
Neu Shop5 NOVA - SWATCH-Image - PopUp deaktivieren Templates für JTL-Shop 5
Neu Shop5 NOVA - Galerieansicht Bilder vergrößern Templates für JTL-Shop 2
Neu Produktdaten für rich snippets werden von Shop5 (NOVA) nicht geliefert Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop 5 - Anpassung Nova Child Theme Dienstleistung, Jobs und Ähnliches 0
Neu Child Template HTML Code mit CSS Dateien anzeigen lassen Templates für JTL-Shop 3
Neu Im Template per 'if' einen Wert aus einem Array auslesen User helfen Usern - Fragen zu JTL-Wawi 1
Neu Shop 5.1.1 und Evo-Template 5.1.0: Fehlerhafte Bildergalerie- und Preisaktualisierung bei Variationen in Artikel-Übersicht und Artikel-Detailseite JTL-Shop - Fehler und Bugs 3
Neu Kritisch: JTL Shop 5.1 Bugs: Template: blackline, Demo-Dateien, Composer und co. JTL-Shop - Fehler und Bugs 22
Neu Mod Pagespeed webp konvertiung zerschiesst template Technische Fragen zu Plugins und Templates 0
Neu Bug: Template Datein des Child-Templates werden nicht bei include anweisungen geladen JTL-Shop - Fehler und Bugs 2
Fragen zum Update von 4 zu 5 - Template Migration Upgrade JTL-Shop4 auf JTL-Shop5 2
Neu Ebay Angebotsaktualisierung Evo Template bei neuem Artikelbild? User helfen Usern - Fragen zu JTL-Wawi 0
Neu Template Anpassung UVP größer als VK Templates für JTL-Shop 1

Ähnliche Themen