Reflow Shopping Cart does not work in modal

Bug Reports
1

I added a shopping cart in a modal, it doesn’t display anything when I call the modal to popup, but if I add an item to the shopping cart and then call the modal immediately after that, the shopping cart shows up. does anyone know, why? or if there’s a work around, or some other way to trigger a refresh the shopping cart upon calling a modal?

2

This is due to an optimization in the toolkit - components are not rendered unless they are visible. You can work around this by executing Reflow.scan() when you are showing the modal.

1 Like
3

Thanks @martin for the reply but the suggest did not work, I even tried executing after 1 second pause

const modal1   =document.getElementById('modal');
modal1.addEventListener('show.bs.modal', function(event) { 
    setTimeout(function() {
        Reflow.scan;
    }, 1000);
});
4

I think the Reflow.scan() is a function so you can try with this

const modal1 = document.getElementById('modal');
modal1.addEventListener('show.bs.modal', function() { 
    setTimeout(function() {
        Reflow.scan();
    }, 1000);
});

or without the timeOut like this

const modal1 = document.getElementById('modal');
modal1.addEventListener('shown.bs.modal', function() { 
        Reflow.scan();
});
5

hi @kuligaposten
It’s not a function, but I tried it still, did not work.

6

It appears that there is a problem with the scan method. The workaround is to create the cart div only before calling Reflow.scan(). It will be something like this:

let modalBody = modal.querySelector('.modal-body');
modalBody.innerHTML = '<div data-reflow-type="shopping-cart"></div>';
Reflow.scan();
1 Like
7

thanks @martin, saved me a lot of time