Elementor custom widget’s js file is not working with editor but works in frontend

Question

I am practicing how to create an Elementor widget, so in the loader class i have registered my styles/scripts

/**
 * Constructor
 *
 * @since 1.0.0
 *
 * AccessPress Themes public
 */
public function __construct() {

    add_action( 'init', [ $this, 'i18n' ] );
    add_action( 'plugins_loaded', [ $this, 'init' ] );
    add_action( 'elementor/editor/before_enqueue_scripts', [ $this, '_scripts' ] );
    add_action( 'elementor/frontend/after_register_scripts', [ $this, '_scripts' ] );
    add_action( 'elementor/editor/before_enqueue_styles', [ $this, '_styles' ] );
    add_action( 'elementor/frontend/after_register_styles', [ $this, '_styles' ] );
}
/**
 * Register widgets style
 */
public function _styles(){
        
    $styles = array(
        'owl-menu' => 'owl-menu',
        'posts-grid' => 'posts-grid',
        'slick-vtext' => 'slick-vtext-slider',
    );
        
    $styles_libs = [
        'circle' => 'circle',
        'slick' => 'slick',
        'heapshot' => 'heapshot',
        'owl.carousel' => 'owl.carousel.min',
        'font-awesome-5-all' => 'all',
    ];
    
    $styles = array_merge($styles, $styles_libs);

    foreach($styles as $style => $file_name){
        
        $handle = in_array($style, array_keys($styles_libs)) ? $style : 'anoel-' . $style;
        
        wp_register_style( 
            $handle, 
            ANOEL_URI . 'assets/css/'.$file_name.'.css', 
            false,
            filemtime(
                wp_normalize_path(ANOEL_DIR . 'assets/css/'.$file_name.'.css' )
            ) 
        );
    }

}

/**
 * Register widgets scripts
 */
public function _scripts(){
    
    wp_enqueue_script( 'jquery' );
    
    $scripts = array(
        'slick-vtext' => 'slick-vtext-slider',
        'headpshot-init' => 'headpshot-init',
    );
    
    $libs_scripts = [
        'circle' => 'circle',
        'slick' => 'slick.min',
        'heapshot' => 'jquery.heapshot',
        'imagesloaded' => 'jquery.imagesloaded.min',
        'jQueryRotate' => 'jQueryRotate.min',
        'owl.carousel' => 'owl.carousel.min'
    ];
    
    $scripts = array_merge($scripts, $libs_scripts);

    foreach($scripts as $script => $file_name){

        
        $handle = in_array($script, array_keys($libs_scripts) ) ? $script : 'anoel-' . $script;
        
        $registered = wp_register_script( 
            $handle , 
            ANOEL_URI . 'assets/js/'.$file_name.'.js' ,
            ['jquery'],
            filemtime(
                wp_normalize_path(ANOEL_DIR . 'assets/js/'.$file_name.'.js' )
            ), 
            true 
        );
        
        
    }
    
    
}

Then in the widget class i called required scripts/style

/**
 * Get scripts dependancies
 * @return type
 */
public function get_script_depends(){
    
    return ['slick','anoel-slick-vtext'];
}

/**
 * Get style dependancies
 * @return type
 */
public function get_style_depends(){
    
    return ['slick','anoel-slick-vtext'];
}

Now these files are loaded and working normally on the frontend but only in the editor, script files is not working while they are loaded into the footer (When i check browser inspector ).

0
Mohamed Omar 2 months 0 Answers 7 views 0

Leave an answer