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:
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
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