Javascript event when boxes are updated

[EricNiedergang]

Hello,

I'm facing a theming problem using boxes.

I have some partials that rely on third party assets. Swiper to not name it.

I use the feature to include external CSS and JS assets to load Swiper and I added the initialization code in my slider box partial :

{% put scripts %}
    <script>
        const swiper = new Swiper('.swiper', {
            speed: 400,
            spaceBetween: 100,
        });
    </script>
{% endput %}

It works well, except when I update the page. If I add a new box, or reorder the box order, boxes plugin refresh the page preview zone using ajax and it break my swiper.

I think I need to reinitialize swiper after the ajax refresh, but I didn't find the event I need to use in order to do it. The documentation don't mention any javascript events to call to handle that problem.

Any help would be really appreciated.

Thank you

[tobias-kuendig]

Version 2.0.59 added a new offline.boxes.editorRrefreshed event:

// Register this event in any JS file that is available in the context of the editor.
window.document.addEventListener('offline.boxes.editorRefreshed', function (e) {
    // Re-initialize your dependencies here.
    initSliders();
});

Docs: https://docs.boxes.offline.ch/use-cases/editor-customization.html#injecting-additional-css-or-js