Produkt-Slider 3 Artikel Anpassung ohne Anzeige (fehlende Höhe)

Shopware 5 Themes & Design
1

Hallo Zusammen,

ich habe mich für den addPlugin Ansatz entschieden um den Produkt-Slider auf 3 Artikel zu beschränken. Dafür wird die Breite der Elemente angepasst. (https://forum.shopware.com/discussion/35179/geloest-artikel-slider-mit-3-statt-5-artikeln?)

// Initialisierung ueber den StateManager
window.StateManager.addPlugin(
‚.product-slider–item‘,
‚swProductSlider‘,
{ itemMinWidth: 350 }
);

Mein Problem ist damit nur, dass die Styles für die Höhe dann nicht passen. Es ist leider auch bereits im aktuellen Responsive Theme so.
Die einzelnen Slider Items und deren Eltern-Elemente besitzen alle die Eigenschaft height: 100%;
Die Höhe des Slider Wrappers wird ja über das Element, mit der Klasse emotion–sizer-xl, gesetzt.
Eine Höhe von 100% kann aber soweit ich weiß nur erreicht werden, wenn ein Eltern Element auch eine feste Höhe besitzt.

Muss man beim Plugin noch einen default Wert übergeben?
Übersehe ich etwas?
Oder muss ich die Höhe des wrappers nun tatsächlich per css änderun und mir somit die Option nehmen, die Höhe in der Einkaufswelt definieren zu können?

Beste Grüße

v0id

2

Ich habe nun eine Lösung, auch wenn ich das Verhalten nicht verstehe.

Für alle die das gleiche Problem haben: In der frontend/_includes/product_slider.tpl kann man an das Element mit der Klasse .product-slider das Attribut data-itemMinWidth=„300“ hinzufügen. Damit werden dann 3 Artikel angezeigt und auch die Höhe korrekt gesetzt.

Wieso folgende Anpassung der item min width sich anders verhält, würde mich jedoch interessieren.

(function ($, window) {
// Change slider item min width
$.subscribe(‚plugin/swEmotionLoader/onInitEmotion‘, function (me) {
window.StateManager.addPlugin(
‚.slider-home‘,
‚swProductSlider‘,
{
itemMinWidth: 300
}
);
});
})(jQuery, window);

 

Kann es jemand nachvollziehen und vielleicht erklären?