Simone Conti
Simone Conti

Reputation: 379

Using Isotope library on Elementor editor/preview

Good morning. I'm tying to show the Isotope effect both on the frontend and the backend of my Elementor widget.

These are the related parts of the code of my plugin.php file:

class ElementorKoolfolioPlugin {
  public function widget_scripts() {
    wp_enqueue_script('imagesLoaded', plugins_url( '/assets/js/imagesloaded.pkgd.min.js', __FILE__ ), array(), '4.1.4', true);
    wp_enqueue_script('isotope', plugins_url( '/assets/js/isotope.pkgd.min.js', __FILE__ ), array('imagesLoaded'), '3.0.6', true);
    wp_enqueue_script('koolfolio-main', plugins_url( '/assets/js/main.js', __FILE__ ),array('jquery','isotope'), '1.0', true);
  }


  public function __construct() {
    // Register widget scripts
    add_action( 'elementor/frontend/after_register_scripts', [ $this, 'widget_scripts' ] );
    add_action( 'elementor/editor/after_enqueue_scripts', [ $this, 'widget_scripts' ] );
    add_action( 'elementor/preview/enqueue_scripts', [ $this, 'widget_scripts' ] );

    // Register widget styles
    add_action( 'elementor/frontend/after_register_styles', [ $this, 'widget_styles' ] );

    // Register widgets
    add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ] );
  }
}

Everything works fine in frontend, but the backend shows only a vertical column of elements (with the correct css).

What's the matter? Maybe I hooked the script at the wrong time?

Thanks

Upvotes: 0

Views: 55

Answers (0)

Related Questions