Änderungen Produkt Slider

Hallo,

wie muss ich den Produktslider anpassen, damit 4 statt 3 Elemente angezeigt werden? Bin schon über die cms-element-product-slider.html.twig und die product-slider.plugin.js gestolpert, habe mit den Änderungen aber keinen Erfolg gehabt.

Gruß

Lucas

Hi.

Ich hänge mich hier mal mit dran. Stehe aktuell vor dem gleichen Problem :frowning:

Habe bereits das Twig Template cms-elements-product-slider.html.twig extended und die Slider Options wie folgt angepasst:

{% set productSliderOptions = {
        productboxMinWidth: sliderConfig.elMinWidth.value ? sliderConfig.elMinWidth.value : '',
        slider: {
            gutter: 30,
            autoplayButtonOutput: false,
            nav: false,
            mouseDrag: false,
            controls: sliderConfig.navigation.value ? true : false,
            autoplay: sliderConfig.rotate.value ? true : false,
            responsive: {
                sm: {
                    items: 3
                },
                md: {
                    items: 4
                }
            }
        }
    } %}

Die neuen Optionen werden auch korrekt als data-Attribut beim Element class=base-slider ausgegeben. Leider ändert sich aber die Anzahl der gezeigten Items nicht…

Hi,

habe dasselbe Problem.

Ihr wisst sicher, dass Ihr in den Erlebniswelten die minimale Weite der einzelnen Elemente des Sliders definieren könnt. Somit könnt Ihr mehr oder weniger Element anzeigen.

Jedoch habe ich das Problem (ihr wahrscheinlich auch), dass dies nicht Viewport abhängig eingestellt werden kann… die Konfigurationen, die Ihr vorgeschlagen habt, habe ich auch ohne Erfolg versucht. Dies liegt aus meiner Sicht daran, dass die productBoxMinWidth auf den default wert 350px gesetzt wird falls man ihn nicht setzt. Diese productBoxMinWidth könnte deinen Versuch verhindern.

Wäre cool wenns diesbezüglich Hilfe vom Shopware Team gäbe. Kann mir nicht vorstellen, dass es gewünscht ist nur eine breiten Angabe machen zu könne die dann für alle Displays funktionieren soll… Als vorübergehende Lösung habe ich mehrere Product Slider mit unterschiedlichen minimalen Weiten erstellt die in den unterschiedlichen Viewports ein/ausgeblendet werden… (Performance lässt grüssen)

Hier noch der Link zu der verwendeten Library… vllt findet ja sonst wer was raus:

Der Hintergrund warum bei den Produktslidern die Konfiguration der Items nicht funktioniert liegt im entsprechenden JS Plugin (src/plugins/slider/product-slider.plugin.js)

In der Funnktion _addItemLimit wird der von euch übergebene Wert überschrieben. Shopware berechnet hier die nötige Produktanzahl ähnlich wie bereits in SW 5.

Jedoch wäre es zu einfach, wenn man die Optionen einfach generell im JS Plugin oder dem enrsprechenden Template des Produkt-Sliders überschreiben könnte (element/cms-element-product-slider.html.twig).

Beispiel Crossselling-Slider auf der Produktdetailseite (page/product-detail/cross-selling/tabs.html.twig):

Hier wird in der mitgegebenen Config die Eigenschaft „elMinWidth“ wieder auf 300px gesetzt. Letztlich hat bei mir das anpassen dieser Eigenschaft zum erfolg geführt.

Ich hab es zwar an anderen Stellen nicht geprüft, geh aber aktuell aus, dass dies dort ähnlich gelöst ist.

Hoffe ich konnte helfen.

Welchen Wert hast du da bei dir verwendet? Hast du nur die eine Datei bzw. den Wert von 300 abgeändert oder auch die JS Datei verändert?
Ich bräuchte ebenfalls 4 Elemente aus dem CMS Product Slider Element anstatt 3.

Hey, wenn du es generell brauchst, kannst du beide anpassen.

Der Wert im Theme überschreibt jedoch den Default-Wert aus der JS Definition.

Sprich wenn du es für alle Slider entsprechend haben möchtest, würde ich die Anpassungen sowohl im Theme als auch im JS vornehmen.

1 Like

Danke dir, probiere ich mal aus.