Servus,
ich möchte in der EInkaufswelt die Lightbox verwenden. Dies funktioniert nicht, da die Einkaufswelt per Ajax nachgeladen wird. Dank eines Forum-Beitrags konnte ich die Modalbox erfolgreich einbinden, die Lightbox jedoch nicht, obwohl sie ja eigentlich auf der Modalbox basiert.
Hier der Forum-Beitrag zur Modalbox:
https://forum.shopware.com/discussion/28731/modal-box-in-einkaufswelt
Was ich gemacht habe (Quick and dirty im Responsive Theme):
In_ /themes/Frontend/Responsive/frontend/_public/src/js/jquery.emotion.js_ habe ich swModalbox und swLightbox im Bereich [SUCHE: Initializes special elements and their needed plugins] hinzugefügt:
StateManager.updatePlugin('*[data-product-slider="true"]', 'swProductSlider');
StateManager.updatePlugin('*[data-image-slider="true"]', 'swImageSlider');
StateManager.updatePlugin('*[data-modalbox="true"]', 'swModalbox');
StateManager.updatePlugin('*[data-lightbox="true"]', 'swLightbox');
Effekt:
die Modalbox funktioniert nun auch in der EInkaufswelt, die Lightbox nicht.
Aufruf der Modalbox in der Einkaufswelt (funktioniert):
Aufruf der Lightbox in der Einkaufswelt (funktioniert NICHT):
;
Weiß nicht mehr weiter…
Hab ich was falsch gemacht? Was übersehen? Muss der Aufruf der Lgithbox anders aussehen? Kann mir wer helfen?
Hallo,
die Lightbox wurde bisher nur als Singleton umgesetzt und ist nicht am StateManager registriert. Es gibt nur einen kleinen Aufruf in der jquery.shopware-responsive.js um das Plugin auch über Data-Attribute zu verwenden. Die entsprechende Stelle findest Du hier:
shopware/jquery.shopware-responsive.js at 5.2 · shopware/shopware · GitHub
Du müsstest hier den Aufruf noch einmal selbst durchführen. Statt das Ganze direkt in dem Standard-Theme zu machen, solltest Du Dich besser auf das passende Event registrieren. Das könnte dann so aussehen:
$.subscribe('plugin/swEmotion/onInitElements', function(event, emotionPlugin) {
window.StateManager.updatePlugin('*[data-modalbox="true"]', 'swModalbox');
emotionPlugin.$el.find('*[data-lightbox="true"]').on('click.lightbox', function (event) {
var $el = $(this),
target = ($el.is('[data-lightbox-target]')) ? $el.attr('data-lightbox-target') : $el.attr('href');
event.preventDefault();
if (target.length) {
$.lightbox.open(target);
}
});
});
Sonnige Grüße,
Phil
Hallo Phil
vielen Dank für deine Antwort. Leider bin ich in Javascript nicht wirklich firm. Was mir klar ist, dass ich das eigentlich nicht im Responsive Theme machen sollte nur weiß ich nicht wie genau wie…
Ich habe 3 Dinge versucht:
-
den Code, den du gepostet hast mit dem Codeblock im jquery.shopware-responsive.js ersetzt --> keine Auswirkung
-
eine eigene .js Datei angelegt mit deinem Code und in das Theme eingebunden --> auch keine Auswirkug (liegt vermutlich daran, dass ich was falsch mache)
3. den Code in jquery.emotion.js reinkopiert im Bereich [SUCHE: Initializes special elements and their needed plugins] --> funktioniert
initElements: function() {
var me = this;
$.each(me.$bannerElements, function(index, item) {
$(item).swEmotionBanner();
});
$.each(me.$videoElements, function(index, item) {
$(item).swEmotionVideo();
});
StateManager.updatePlugin('*[data-product-slider="true"]', 'swProductSlider');
StateManager.updatePlugin('*[data-image-slider="true"]', 'swImageSlider');
StateManager.updatePlugin('*[data-modalbox="true"]', 'swModalbox');
//StateManager.updatePlugin('*[data-lightbox="true"]', 'swLightbox');
$.subscribe('plugin/swEmotion/onInitElements', function(event, emotionPlugin) {
window.StateManager.updatePlugin('*[data-modalbox="true"]', 'swModalbox');
emotionPlugin.$el.find('*[data-lightbox="true"]').on('click.lightbox', function (event) {
var $el = $(this),
target = ($el.is('[data-lightbox-target]')) ? $el.attr('data-lightbox-target') : $el.attr('href');
event.preventDefault();
if (target.length) {
$.lightbox.open(target);
}
});
});
Wie kann ich in einer externen .js Datei nur diesen Bereich überschreiben?
Ich hab nun eine lightbox-enabler.js angelegt mit folgendem Inhalt und über theme.php eingebunden, aber es funktioniert nicht…
$.overridePlugin('swEmotion', {
$.subscribe('plugin/swEmotion/onInitElements', function(event, emotionPlugin) {
window.StateManager.updatePlugin('*[data-modalbox="true"]', 'swModalbox');
emotionPlugin.$el.find('*[data-lightbox="true"]').on('click.lightbox', function (event) {
var $el = $(this),
target = ($el.is('[data-lightbox-target]')) ? $el.attr('data-lightbox-target') : $el.attr('href');
event.preventDefault();
if (target.length) {
$.lightbox.open(target);
}
});
});
});
Hallo,
das Überschreiben eines Plugins und der globale Event Observer sind zwei unterschiedliche Dinge. So wie Du das kombinieren möchtest ist es falsch. Grundsätzlich reicht es hier mit dem Event Observer zu arbeiten, so wie ich es Dir bereits gepostet habe.
Event Observer:
jQuery plugins and the StateManager
Plugin überschreiben:
Modify jQuery plugins
Es reicht wenn Du in Deinem eigenen Theme eine eigene JS Datei anlegst und diese über die Theme.php einbindest. Hier kannst Du Dich mit $.subscribe() auf verschiedene Events aus den bestehenden Plugins registrieren, um zusätzliche Logik auszuführen.
LG,
Phil
Nochmals vielen Dank Phil für deine Geduld.
Ich habe nochmals versucht deinen Code, so wie du in gepostet hast als eigene .js Datei in meinem Theme anzulegen und diese in theme.php einzubinden…
1. lightbox-enabler.js in /themes/Frontend/meintheme/frontend/_public/src/js/lightbox-enabler.js angelegt mit folgendem Inhalt
$.subscribe('plugin/swEmotion/onInitElements', function(event, emotionPlugin) {
window.StateManager.updatePlugin('*[data-modalbox="true"]', 'swModalbox');
emotionPlugin.$el.find('*[data-lightbox="true"]').on('click.lightbox', function (event) {
var $el = $(this),
target = ($el.is('[data-lightbox-target]')) ? $el.attr('data-lightbox-target') : $el.attr('href');
event.preventDefault();
if (target.length) {
$.lightbox.open(target);
}
});
});
2. Änderungen in Theme.php vorgenommen:
/** Javascripts einbinden */
protected $javascript = [
/** Scroll to top */
'src/js/scroll.js',
/** Einkaufswelt Erweiterungen */
'src/js/lightbox-enabler.js'
];
3. Cache im Backend gelöscht und Theme kompiliert.
Es funktioniert nicht… 
Vieleicht liegt es an der Einkaufswelt???
Hmm,
das lässt sich so schwer sagen. Du müsstest nun mal debuggen wo der Fehler liegt. Z.b. könntst Du in dem Event-Subscriber mal ein console.log() machen, um zu testen, ob das Event überhaupt richtig geworfen wird. Da kann ich Dir von hier aus leider schlecht weiter helfen. Das beste ist sich Schritt für Schritt ranzutasten.
Wurde die Datei richtig eingebunden -> Wird das Event aufgerufen -> Wird der Event-Callback richtig aufgerufen -> funktioniert der Code im Event-Callback … usw.
Sonnige Grüße,
Phil
1 „Gefällt mir“
OK - ich hab keine Ahnung was ich falsch gemacht habe - aber es funktioniert jetzt so wie du´s beschrieben hast.
Nochmals vielen Dank!