Hallo liebe community,
wir haben seit geraumer Zeit das Problem, dass die mobile Darstellung des Produktsliders fehlerhaft ist. Es werden mobil zu viele Elemente/Items angezeigt und wenn man die Navigation benutzt, werden zu viele Elemente/Items geswiped.
Seltsamerweise wird nach einer Änderung der Auflösung im Browser der Swiper korrekt gesetzt (Window Resize). Es liegt hier also nur ein Fehler bei der Initialisierung vor. Ich habe schon versucht, diverse resize Events per Javascript anzustoßen, aber alle waren ohne Erfolg:
// per jQuery
$(window).trigger('resize');
// per modern dispatch
window.dispatchEvent(new Event('resize'));
Im Quelltext findet befindet sich hier das Basis-Slider Javascript: Resources/app/storefront/src/plugin/slider/base-slider.plugin.js
Leider weiß ich nicht, wie ich nachfolgende Zeile triggern kann:
document.addEventListener('Viewport/hasChanged', () => this.rebuild(ViewportDetection.getCurrentViewport()));
Zur Frage:
Hat jemand einen Tip, wie man den Slider manuell reinitialisieren kann, damit die Darstellung auf Mobilgeräten korrekt ist (rebuild)? Oder wie kann ich das Event aus dem Codebeispiel triggern?
Man kann sich das ganze hier anschauen:
Der Slider befindet sich auf der Homepage direkt unter " Topsellers"
PS:
Folgende Codezeile führt ebenfalls nicht zum Ziel:
window.dispatchEvent(new Event('Viewport/hasChanged'));