Hallo zusammen,
ich habe zur Vergrößerung des Bildes im Listing einen Link eingefügt, der die Lightbox öffnet. Beim normalen Laden der Seite funktioniert er auch problemlos. Wenn allerdings neue Artikel via Ajax nachgeladen werden funktioniert der Link nicht mehr. Ich denke, es liegt daran, weil das javascript der Lightbox zur beim Laden der Seite greift. Hat jemand eine Idee, wie ich das Problem lösen kann? Vielen Dank!
Eingebauter Link:
ich vermute hier wird die lightbox jquery plugin an die html elemente gebunden shopware/jquery.shopware-responsive.js at aac0e5c964ac58b33cb95a6583285df2042d2ade · shopware/shopware · GitHub (und ich vermute es wird nur einmal ausgeführt, nach laden der seite)
also nehme ich an du musst diese nochmal selber machen…
ps. „jquery plugins an ajax elemente verbinden“ klingt nach ne feature was jeder will, also müsste dafür eigentlich ne einfache lösung geben.
pps. hmm, wenn ich richtig innere, wenn man artikel varianten wechselt, wird die neue halbe seite auch über ajax geladen, und alle javascript dinger funktionieren weiterhin/wieder. wie ist das gelöst?
Bei den im ursprünglichen Seitenaufruf enthaltenen Artikeln funktioniert die Lightbox auch nach dem Laden via Ajax, lediglich bei den neu hinzugefügten Artikeln funktioniert die Lightbox nicht. Habe versucht die Lightbox nochmals einzubauen, zum Beispiel in jquery.infinite-scrolling.js , allerdings erfolglos.
der javascript (zum einbinden der jquery plugin an html element) muss in der ajax antwort drin sein, und hoffen das diese javascript auch ausgeführt wird.
zbs. versuche es in die template zu addieren.
ps. ich hoffe immernoch das jemand der besser damit auskennt die einfacherer lösung postet.
Kann sonst keiner weiterhelfen?
Hatte noch versucht das einzubauen, leider ohne Auswirkung.
StateManager.addPlugin('*[data-image-gallery="true"]', 'swImageGallery');
@wontfix vielen Dank für dein Feedback. So, habe endlich die Lösung gefunden.
In der ajax_listing.tpl folgenden Code packen und es klappt:
$('*[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);
}
});
nur so am rande, hab gefunden wie die artikel varianten ajax wechsel, die jquery plugins nochmal lädt.
es lädt manche plugins manuell noch mal in die statemanager (und dadurch wird wohl automagisch diese plugins in die html elemente verbunden): shopware/jquery.ajax-variant.js at 5.4 · shopware/shopware · GitHub
StateManager.addPlugin('*[data-image-slider="true"]', 'swImageSlider')
.addPlugin('.product--image-zoom', 'swImageZoom', 'xl')
.addPlugin('*[data-image-gallery="true"]', 'swImageGallery')
.addPlugin('*[data-add-article="true"]', 'swAddArticle')
.addPlugin('*[data-modalbox="true"]', 'swModalbox');
und andere plugins sollten wohl ähnliches machen mit event ‘plugin/swAjaxVariant/onRequestData’: shopware/jquery.ajax-variant.js at 5.4 · shopware/shopware · GitHub
// Plugin developers should subscribe to this event to update their plugins accordingly
$.publish('plugin/swAjaxVariant/onRequestData', [me, response, values, stateObj.location]);
und nein, all diese ist kein nutzen für das problem in diese post, wollte es nur mal aufschreiben. (oder, hat der ajax ding in dieser post auch so eine feature?)
ps. hab oberes gefunden weil ich folgendes in eine 3rdparty theme fixen musste: wenn die template für oben genannte ajax antwort keine id=“footer–js-inline” in der script tag hat, wird diese javascript nicht ausgeführt… (bzw. wird die javascript garnicht in die seite addiert?)