Hallo, habe eine kurze Frage:
Wie kann man beim Artikel-Slider (Einkaufsweltenelement) die Ansicht von 5 auf 3 Artikel reduzieren?
Geht das noch in Less oder smarty oder muss man da die jquery.product-slider.js überladen?
Über einen Hinweis, wo genau ich ansetzen muss, wäre ich sehr dankbar…
Kuck mal in die Einstellungen des Artikel-Sliders…
Hallo,
danke für den Input, im Backend habe ich natürlich als erstes reingeschaut 
Du meinst sicherlich die “Max Anzahl” -Einstellung: Diese legt aber nur fest, wieviele Artikel überhaupt durch den Slider erreicht werden können. Setzt man diese auf 1, so erhält man einen “Slider” mit 5 Plätzen, von denen nur einer befüllt ist.
Die Zahl der Plätze scheint durch die Breite festgelegt zu sein, die der Slider in der Einkaufswelt einnimmt: Über die ganze Breite werden immer (egal welcher Viewport) 5 Artikel gleichzeitig angezeigt. Wenn ich eine 3-er Rasterung habe und den Slider über 2 Raster breit mache, werden 3 Artikel gleichzeitig angezeigt, und bei 1 Raster Breite immer nur 1 Artikel.
Hat jemand eine Idee?
Ah Ok, jetzt ist das schon klarer.
Da solltest du mal anfangen dir die Styles anzusehen. Ich weiß da auch nicht bescheid und müsste das selber analysieren. Aber grundsätzlich sollte sowas ja über die Styles geregelt werden können.
Chrome Developer Tools mittels F12 nutzen und ein bischen rumspielen.
Also, mit den Styles (width von product-slider–item) kann man tatsächlich die Größe der Artikel anpassen und z.B. mit width=167% statt 5 nur noch 3 Items anzeigen. Dann muss man mit etwas mehr css noch die restlichen Infos ein bisschen “zusammenrücken”.
Jedoch bleibt ein entscheidenes Problem: Es werden die letzten Artikel des Sliders nicht angezeigt, da durch dieses Verfahren der Slider ja einfach über den sichtbaren Bereich rausgedehnt wird. Ich denke hier muss eine Lösung her, die tiefer greift und schon bei Aufruf der Funktion nur 3 Artikel-Plätze generiert…
Ich dachte nur, dass hier jemand vielleicht schon mal dasselbe Problem hatte und mir etwas Recherchearbeit sparen könnte. Nun denn, ich habe mir die js mal genauer angeschaut:
Die Übergabeparameter an die .js-Funktion sind ja überschaubar: Hier finde ich nur das bereits erähnte data-ajaxmaxshow:
In der jquery finde ich weitere Parameter, ...
mode: 'local',
orientation: 'horizontal',
itemMinWidth: 220,
itemMinHeight: 240,
itemsPerSlide: 1,
autoSlide: false,
autoSlideDirection: 'next',
autoSlideSpeed: 4,
autoScroll: false,
autoScrollDirection: 'next',
autoScrollSpeed: 1,
scrollDistance: 350,
animationSpeed: 800,
arrowControls: true,
arrowAction: 'slide',
wrapperCls: 'product-slider',
horizontalCls: 'is--horizontal',
verticalCls: 'is--vertical',
arrowCls: 'product-slider--arrow',
prevArrowCls: 'arrow--prev',
nextArrowCls: 'arrow--next',
containerSelector: '.product-slider--container',
itemSelector: '.product-slider--item',
ajaxCtrlUrl: null,
ajaxCategoryID: null,
ajaxMaxShow: 30,
ajaxShowLoadingIndicator: true,
ajaxLoadingIndicatorCls: 'js--loading-indicator indicator--absolute',
ajaxLoadingIndicatorIconCls: 'icon--default',
initOnEvent: null
Hier scheint mir am versprechensten "itemminwidth" zu sein. Ich werde morgen mal anfangen, damit zu spielen.
Wie gesagt, falls jemand doch schon einmal mein Problem gelöst hat, wäre ich um einen Hinweis dankbar... man kann ja so einiges an Zeit sparen...So, für alle, die dasselbe Problem haben:
Die Lösung liegt wie vermutet bei itemminwidth. Details gibt in folgendem Thread: http://forum.shopware.com/discussion/32574/overrideplugin-defaults.
Oder man nutzt ohne .js-Anpassungen eine zweite Einkaufswelt im Masonary Modus, denn da sind die Proportionen des Sliders besser.
Hallo,
grundsätzlich hast Du das richtig erkannt. Das jQuery Plugin für den Product-Slider arbeitet bei der Anzeige der Produkte automatisch. Es wird anhand der Breite des Sliders und der Einstellung itemMinWidth berechnet, wie viele Produkte in den Slider passen. Dadurch ist der Slider auch responsive. Die Anzahl an Produkten kann daher über die Einstellung verändert werden.
Grundsätzlich kannst Du die Einstellungen eines jQuery Plugins beim Initialisieren des Plugins einstellen.
// Klassische Initialisierung
$('.dein-selektor').swProductSlider({
itemMinWidth: 300
});
// Initialisierung über den StateManager
window.StateManager.addPlugin(
'.dein-selektor',
'swProductSlider',
{ itemMinWidth: 300 }
);
Oder durch Setzen eines Data-Attribut auf dem HTML-Element, auf welches das Plugin angewendet wird.
// ...
Weitere Infos zu den jQuery Plugins findest Du auch hier:
jQuery plugins and the StateManager
Sonnige Grüße,
Phil
Danke, Phil, dass Du das noch einmal zusammenfasst, ich setze den Topic mal auf gelöst. Schade nur, dass es für mich einen Tag zu spät kommmt 
Als Ergänzung für alle, die in den EKW (und nicht in ihren eigenen Templates) die Einstellungen modifizieren wollen: In meinem zuvor aufgeführten Link ist beschrieben, wie man die Default-Werte verändert.
Gruß, Marco
// …
Hi Phil! Danke für die Hinweise - allerdings scheint bei mir das data Attribut nicht zu greifen. Ich habe das Data Attribute in meine product_slider_item.tpl hinzugefügt, sehe das auch im Quellcode aber leider zeigt es keine Wirkung. Was mache ich falsch?
Hi Marco,
ich hatte ein ähnliches Problem: ich wollte statt der standardmäßigen 5 Artikel die anzeige auf 6 Artikel setzen.
Diese Lösung führte bei mir nicht zum gewünschten Ergebnis und ich konnte meinen Fehler nicht finden.
Meine Lösung:
In den Einkaufswelten beim Artikel-Slider-Element eine CSS-Klasse (Bsp. home-news-slider) hinterlegen.
Im Less auf diese Klasse beziehen und bei .product-slider–item die breite anpassen.
.home-news-slider .product-slider–item {
width: 16.666667% !important;
}
Viele Grüße
David
Hi zusammen,
stehe vor der gleichen Aufgabe. Deswegen hol ich das hier nochmal hoch. Es muss doch hier eine gute Lösung geben?
Wollen auch nur 3 Artikel im Slider (auf der Detailsseite) anzeigen, also am Besten (vorerst) alles unberührt lassen.
Mittels des Developer Guides klappt es zwar, das es eingebunden wird…
// Klassische Initialisierung
$('.product-slider--item').swProductSlider({
itemMinWidth: 350
});
// Initialisierung ueber den StateManager
window.StateManager.addPlugin(
'.product-slider--item',
'swProductSlider',
{ itemMinWidth: 350 }
);
Aber die width in
verhindert eine richtige Darstellung.
Weiß jmd Rat?
Zudem, falls es jmd weiß, kann man das productBoxLayout irgendwo für den Slider festlegen?
Haben das gerade relativ unschön in der frontend/_includes/product_slider_items.tpl "hardcore" reingeschrieben.
{include file="frontend/listing/box_article.tpl" sArticle=$article productBoxLayout="image" fixedImageSize=$fixedImageSize}
VG und DankeDa die Anpassungen nicht so richtig wollten, haben wir es vorerst mittels überladen der Responsive/frontend/_public/src/js/jquery.product-slider.js gelöst. Nicht schön, aber funktioniert vorerst.
Die jquery.product-slider.js in’s eigene Theme gepackt und über die Theme.php eingebunden.
...
protected $javascript = array('src/js/jquery.slider-config.js');
...
Dann die itemMinWidth auf die 340 im JS gesetzt und die restlichen Anpassungen für die 3 Artikel-Anzeige im LESS vorgenommen.
Falls hier irgendwann jemand drüber stolpert und nochmal genauer sagen kann, warum die schlankere Version nicht greifen möchte, wäre das perfekt. Evtl. hilft auch meine Version jmd weiter.
Meine Lösung:
In den Einkaufswelten beim Artikel-Slider-Element eine CSS-Klasse (Bsp. home-news-slider) hinterlegen.
Im Less auf diese Klasse beziehen und bei .product-slider–item die breite anpassen.
.home-news-slider .product-slider–item {
width: 16.666667% !important;
}
DAS war die eleganteste, schnellste und einfachste Lösung. DANKE!