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
2 months
0 Answers
7 views
0
Leave an answer
You must login or register to add a new answer .