https://developers.shopware.com/designe … ry-plugins gibt’s da ne möglichkeit auch ein defaults von eine plugin zu ändern? zbs. ich möchte das swImageSlider defaults.swipeToSlide auf false setzen.
Stehe vor dem gleichen Problem, die default-Werte zu ändern. Beispiel: Möchte im Product-Slider die Mindestweite der Artikel verändern. Default-Wert: itemMinWidth: 350; Mit unterem Code habe ich die init bereits erfolgreich erweitert. $.overridePlugin('swProductSlider', { init: function () { var me = this; me.superclass.init.apply(this, arguments); /\* Irgendwelcher neuer Code \*/ } }); Das hier hingegen mit default zu machen führt nicht zum erfolg… $.overridePlugin('swProductSlider', { default: function () { /\*\* \* The minimal width a slider item should have. \* Used for horizontal sliders. \* \* @property itemMinWidth \* @type {Number} \*/ itemMinWidth: 350; var me = this; me.superclass.default.apply(this, arguments); } }); Weiß jemand mehr?
Ich würde jetzt mal vermuten, da die default werte keine methods sind, sondern parameter kannst du diese nicht mit override überschreiben, da es nur bei methods geht.
Dann kann man sowas nur in der entsprechenden .tpl-Datei mit einem Data-Attribut lösen? Meine da mal was gelesen zu haben? Wenn Shopware die Möglichkeit der Overrides bietet… warum dann nicht auch bei sowas Elementarem, wie die default-Werte?
die default Werte kannst du beim Aufrufen des Plugins in der jquery.shopware-responsive.js (etwas unglücklich gewählter Name für die zentrale JS-Datei) anpassen.
z.B. kannst du da
// Default product slider .addPlugin('\*[data-product-slider="true"]', 'swProductSlider')
durch
.addPlugin('\*[data-product-slider="true"]', 'swProductSlider', { itemMinWidth: 350 })
ersetzen. Da der productSlider mehrfach benutzt wird, musst du entsprechend alle Aufrufe von
.addPlugin(..., 'swProductSlider')
entsprechend anpassen.
1 „Gefällt mir“
Hallo,
grundsätzlich können die Default Optionen auch über die overridePlugin Methode überschrieben werden. Man sollte dabei allerdings beachten, dass diese dann auch wirklich die neuen Default-Werte für dieses Plugin darstellen und sich daher auch auf alle Instanzen des Plugins auswirken. Die Default Optionen sind außerdem ein Object. Wenn man dieses überschreibt, sollte man auch alle verfügbaren Properties übernehmen. Am besten wäre es, einzelne Optionen in der init() Methode zu überschreiben. Natürlich wird dann die Option global überschrieben.
$.overridePlugin('swProductSlider', {
init: function () {
var me = this;
me.opts.itemMinWidth = 300;
me.superclass.init.apply(this, arguments);
}
});
Der deutlich bessere Weg wäre daher wirklich die Einstellung bei Initialisierung des Plugins als Option reinzureichen.
// Klassische Initialisierung
$('.dein-selektor').swProductSlider({
itemMinWidth: 300
});
// Initialisierung über den StateManager
window.StateManager.addPlugin(
'.dein-selektor',
'swProductSlider',
{ itemMinWidth: 300 }
);
Man kann die Options auch direkt über ein Data-Attribut auf dem DOM Element setzen:
// ...
Weitere Infos zu den jQuery Plugins findet Ihr auch hier:
https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/
Sonnige Grüße,
Phil
3 „Gefällt mir“
Die globale Überschreibung habe ich verstanden. Die andere leider nicht.
Was ist „dein-selektor“? Wie sorge ich dafür, dass der swProductSlider bei einer bestimmten Displaygröße einen eigenen selektor hat?
Hey,
das “dein-selektor” im Code ist natürlich nur ein Platzhalter für das Beispiel. Da sollst Du Deine eigene Klasse eintragen 
LG,
Phil
Danke. Aber wie bekomme ich die eigene Klasse in den swProductSlider (bei einer bestimmten Displaygröße)? Es nutzt ja nichts, wenn dieser eigene Klassenselektor bei allen swProductSlider vorkommt. Dann kann ich auch gleich die globale Überschreibung nutzen. Sorry für die Frage. Mir ist klar, dass sie mit diesem Thema hier nur zufällig zusammenhängt. Tatsächlich ergibt der Thread und deine sehr gute Antwort aber eben nur mit diesem mir fehlenden Grundwissen Sinn.
Hallo,
Du würdest für Deinen eigenen Selektor eine neue Registrierung des Plugins am StateManager machen, so wie in dem Beispiel oben. Hier kann man als weiteren Parameter die Viewports angeben, für welche das Plugin aktiv sein soll.
z.B:
// Initialisierung über den StateManager
window.StateManager.addPlugin(
'.dein-selektor',
'swProductSlider',
{ itemMinWidth: 300 },
['m', 'l', 'xl']
);
Weitere Infos findest Du auch in der Doku:
jQuery plugins and the StateManager
Sonnige Grüße,
Phil
Danke für deine Hilfe. Ich frage es nochmal so: Wieso klappt es mit “.product-slider” dann nicht. Oder wenn ich in einer Einkaufswelt ein code-Element einfüge und ihm eine css-klasse “mein-selektor” gebe und die in die addPlugin methode einsetze, sehe ich auch nichts.
window.StateManager.addPlugin(
'.product-slider',
'swProductSlider',
{ itemMinWidth: 300 },
['m', 'l', 'xl']
);
Hallo,
also wenn Du das Ganze in den Einkaufswelten machst, musst Du natürlich beachten, dass die Einkaufswelt per Ajax nachgeladen wird. Dein JavaScript ist daher möglicherweise schon ausgeführt wenn die Elemente in den DOM eingefügt werden. Hier kannst Du Dich zum Beispiel auf folgendes Event subscriben:
'plugin/swEmotionLoader/onInitEmotion'
Sonnige Grüße,
Phil
Hallo
Wie und wo muss ich die Einstellung einbinden?
// Klassische Initialisierung
$('.dein-selektor').swProductSlider({
itemMinWidth: 300
});
// Initialisierung über den StateManager
window.StateManager.addPlugin(
'.dein-selektor',
'swProductSlider',
{ itemMinWidth: 300 }
);
LG Mirko
Hi,
ich möchte diesen Thread nochmal rauskramen. Ich stehe gerade auch vor dert Problematik, ich möchte nicht an die DOM Elemente um möglichst wenig templateseitig einzugreifen. Folgendes Ziel:
Ich möchte ohne DOM-Anpassungen (==data attr) die Konfigwerte der regulären Slider aus dem RWD Template nur auf der Detailseite anpassen können. Um beim Beispiel zu bleiben möchte ich ansich das der Shop die vorhandenen Slider so ausgibt als hätte ich sie folgend getriggert:
aber dabei nicht im Template data-itemMinWidth="350" bzw die includes Variable nachpflegen müssen. Ich habe versucht mich an irgendwelche events wie zB onInitSlider zu hängen um zB Rückgabewerte zu manipulieren leider ohne erfolg (ich habe in den Objects auch keine opts gefunden meine funktionen liefen aber sicher). Ich habe versucht per jQuery in einer schleife die Werte im DOM nachzutragen:
$(this).find('.product-slider').attr('data-itemMinWidth', 400);
die Werte wurden auch nachgetragen aber vermutlich zu spät zumindest wirken Sie sich nicht aus. Ich habe versucht mit der overridePlugin methoode wie hier oder auch in der dev doku werte zu verändern auch das hat leide rnicht funktioniert (und wenn ich es richtig verstanden habe ja wenn eh nur global). Gibt es keine einfache möglichkeit die Defaults bzw auch mögliche Customwerte "von aussen" zu manipulieren?
Ich könnte ja bestimmt auch per:
// Initialisierung über den StateManager
window.StateManager.addPlugin(
'.dein-selektor',
'swProductSlider',
{ itemMinWidth: 300 }
);
den Wert wie hier beschrieben neu übergeben, sicher kann ich dann auch eine Einschränkung vornehmen anhand des Klassennamen zB.:
// Initialisierung über den StateManager
window.StateManager.addPlugin(
'.detail .meineklasse .dein-selektor',
'swProductSlider',
{ itemMinWidth: 300 }
);
Da ich per tpl anpassung eh eine eigene Klasse im DOM habe wäre das theoretisch auch alles so möglich, nur sind diese Slider Elemente ja bereits anhand des data-attrs data-Product-Slider initialisiert. Ich habe das Gefühl das ich hier die BestPractice einfach nicht sehe bzw. nicht verstehe. Ich finde die grundsätzliche js einbindung sehr gut gelungen und habe auch schon einiges an anpassungen vorgenommen oder kleinere Plugins geschrieben, aber hier stehe ich irgendwie total auf dem Schlauch. Ich hoffe irgendwer kann mir helfen.
Viele GrüßeHallo
Wie und wo muss ich die Einstellung einbinden?
// Klassische Initialisierung
$(‚.dein-selektor‘).swProductSlider({
itemMinWidth: 300
});// Initialisierung über den StateManager
window.StateManager.addPlugin(
‚.dein-selektor‘,
‚swProductSlider‘,
{ itemMinWidth: 300 }
);LG Mirko
Hi,
beides würde theoretisch in nem, eigenen js file landen was idealer weise Shopware konform mit ins main js kompiliert wird. Brauchen würdest du aber nur entweder oder. Der erste Block bewirkt das Shopweit alle elemente mit der Klasse .dein-selektor in einen Slider gewandelt werden (daher sollten dann auch die Daten vorhanden sein) welcher nur den Parameter itemMinWidth=300 besitzt. Im zweiten Block würde das Element mit der Klasse .dein-selektor über den Statemanager initialisiert werden. Im Beispiel endet das in der gleichen Situation, man könnte hier aber zB optionale Parameter anhängen um auf verschiedenen Devices js seitig unterschiedlich reagieren zu können.
vg
Hi,
nochmal gibt es den wirklich keine Möglichkeit diese optionen anzupassen ohne das DOM zu bearbeiten?
Viele Grüße