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

anonymous

Aktives Mitglied
24. Januar 2019
38
5
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
1.307
439
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
5
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
1.307
439
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: zuhcap und anonymous

anonymous

Aktives Mitglied
24. Januar 2019
38
5
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
5
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 Nova Template Container in Container Boxed Templates für JTL-Shop 2
Neu JTL-Shop 5 Nova-Template / Darstellung der Produktliste teilweise fehlerhaft JTL-Shop - Fehler und Bugs 1
Neu Vorstellung des Avada-Themes für das NOVA-Template Templates für JTL-Shop 2
Neu Nova Farbe ändern Templates für JTL-Shop 14
Neu Nova - Größe der Slides / Anzahl der Artikel bei Cross Selling Slider anpassen Templates für JTL-Shop 1
Neu Social-Media Icon Nova Templates für JTL-Shop 0
Neu nova änderungen Templates für JTL-Shop 13
Neu NOVA, Logo wird in mobiler Ansicht verzerrt dargestellt Templates für JTL-Shop 0
Neu Template anpassen - parallel zum bestehenden, ohne Aktivierung? Templates für JTL-Shop 2
Beantwortet Werte eigener Kundenfelder im Template anzeigen Allgemeine Fragen zu JTL-Shop 0
Neu Template/ Vorlage für Bestellbestätigung gesucht Templates für JTL-Shop 0
Neu Unterstützung bei JTL5-Shop-Überarbeitung gesucht - Template/Plugin uvm. Dienstleistung, Jobs und Ähnliches 1
Neu JTL Shop Template Domain lösen? Allgemeine Fragen zu JTL-Shop 0
Neu How to maintain session value in the portlet template file Technische Fragen zu Plugins und Templates 0
Neu Custom Template für Custom Artikel mit Plugin? Plugins für JTL-Shop 0
Neu Template für Dateinamen hat nicht den gewünschten Effekt Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 6
Neu Eigenes Template sichern Templates für JTL-Shop 1
Neu Datenbankeintrag mit ausgewähltem Template Templates für JTL-Shop 0
Neu Markenshop mit Remake Template Templates für JTL-Shop 7

Ähnliche Themen