Reload canva script when block dropped and it's depend on script.

[aidenchong95]

Hi, one of the block i created is product slider which depends on the script. The block only well-rendered after i save and reload the page (re-initiate everything). But the solution i need is the block rendered properly without save and reload the page.

This is the after save and reload the page

But after i drag and drop the product slider block is not rendered. (Because the script not loaded)

I have tried using editor.refresh() or the code below but still not working
editor.on('block:drag:stop', model => { console.log('dropped block') editor.refresh() editor.trigger('test:canvasOffset'); editor.trigger('frame:updated'); })

[artf]

Please, show the code of the custom component used for the slider.

[aidenchong95]

Here is the script which need to reload everytime i add new component
var editor = grapesjs.init({ canvas: { styles: ['https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', '/assets/app/css/tooplate-main.css', '/assets/app/css/owl.css', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css'], scripts: ['https://code.jquery.com/jquery-3.3.1.slim.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js', '/assets/app/js/owl.js','/assets/app/js/template/default/custom.js'] },

I create a new block for the slider component
`
// load data from api
editor.on('storage:load', function(e) {

editor.setComponents(e.page.html);

    editor.setStyle(e.page.css);

   //Static component for testing

    product_grid_html = '<div class="featured-items"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="section-heading"> <div class="line-dec"></div><h1>Featured Items</h1> </div></div><div class="col-md-12"> <div class="owl-carousel owl-theme"> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-01.jpg" alt="Item 1"> <h4>Proin vel ligula</h4> <h6>$15.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-02.jpg" alt="Item 2"> <h4>Erat odio rhoncus</h4> <h6>$25.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-03.jpg" alt="Item 3"> <h4>Integer vel turpis</h4> <h6>$35.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-04.jpg" alt="Item 4"> <h4>Sed purus quam</h4> <h6>$45.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-05.jpg" alt="Item 5"> <h4>Morbi aliquet</h4> <h6>$55.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-06.jpg" alt="Item 6"> <h4>Urna ac diam</h4> <h6>$65.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-04.jpg" alt="Item 7"> <h4>Proin eget imperdiet</h4> <h6>$75.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-05.jpg" alt="Item 8"> <h4>Nullam risus nisl</h4> <h6>$85.00</h6> </div></a> <a href="single-product.html"> <div class="featured-item"> <img src="assets/images/item-06.jpg" alt="Item 9"> <h4>Cras tempus</h4> <h6>$95.00</h6> </div></a> </div></div></div></div></div>';

    blockManager.add('product-gird', {
        label: 'Product Grid',
        category: {
            label: 'Basic',
            order: 1,
            open: true
        },
        attributes: {class: 'fa fa-th'},
        content: product_grid_html
    });

});`