i want to create an Elementor-Widget with al slick Slider as JavaScript / Jquery. I can add the elements correctly in ELementor Editor Mode, but the Slider didn`t work there. The Slides will shown among themselves. When i add a alert in the javascript file after the check that the element slider is still there, its not work, before the check its works fine. I think the Element will not load correctly in the editor mode…? Have someone an idea what i can do that the slider works also in the editor-mode?
Here the JavaScript-Code:
$( document ).ready(function() {
if ($(".slider").length) {
alert("Test");
$(".slider").css({"opacity" :"1"});
$(".slider").slick({
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
arrows: true,
speed: 1000,
fade: false,
dots: false,
prevArrow: '<button type="button" class="slick-prev"><i class="arrow fa fa-minus"></i></button>',
nextArrow: '<button type="button" class="slick-next"><i class="arrow fa fa-plus"></i></button>',
responsive: [
{
breakpoint: 992,
settings: {
arrows: false,
dots: true
}
}
]
});
};
Here the Code of the PHP Widget File:
<?php
/**
* Astestimonials class.
*
....
*/
namespace ElementorAstestimonialsWidgets;
use ElementorWidget_Base;
use ElementorControls_Manager;
// Security Note: Blocks direct access to the plugin PHP files.
defined( 'ABSPATH' ) || die();
/**
* Astestimonials widget class.
*
* @since 1.0.0
*/
class Astestimonials extends Widget_Base {
/**
* Class constructor.
*
* @param array $data Widget data.
* @param array $args Widget arguments.
*/
public function __construct( $data = array(), $args = null ) {
parent::__construct( $data, $args );
$plugin = get_plugin_data( __FILE__, false, false );
wp_register_style( 'astestimonialscss', plugins_url( '/assets/css/astestimonials.css', ELEMENTOR_ASTESTIMONIALS ), array(), '1.0.0' );
wp_register_script( 'astestimonialsjs', plugins_url( '/assets/js/astestimonials.js', ELEMENTOR_ASTESTIMONIALS ), array( 'jquery' ), '1.0.0' );
}
/**
* Retrieve the widget name.
*
* @since 1.0.0
*
* @access public
*
* @return string Widget name.
*/
public function get_name() {
return 'astestimonials';
}
/**
* Retrieve the widget title.
*
* @since 1.0.0
*
* @access public
*
* @return string Widget title.
*/
public function get_title() {
return __( 'astestimonials', 'elementor-astestimonials' );
}
/**
* Retrieve the widget icon.
*
* @since 1.0.0
*
* @access public
*
* @return string Widget icon.
*/
public function get_icon() {
return 'eicon-facebook-comments';
}
/**
* Retrieve the list of categories the widget belongs to.
*
* Used to determine where to display the widget in the editor.
*
* Note that currently Elementor supports only one category.
* When multiple categories passed, Elementor uses the first one.
*
* @since 1.0.0
*
* @access public
*
* @return array Widget categories.
*/
public function get_categories() {
return array( 'artisolution-addons' );
}
/**
* Enqueue styles.
*/
public function get_style_depends() {
return array( 'astestimonialscss' );
}
public function get_script_depends() {
return array( 'astestimonialsjs');
}
/**
* Register the widget controls.
*
* Adds different input fields to allow the user to change and customize the widget settings.
*
* @since 1.0.0
*
* @access protected
*/
protected function _register_controls() {
$this->start_controls_section(
'section_content',
array(
'label' => __( 'Content', 'elementor-astestimonials' ),
)
);
$this->add_control(
'slides',
[
'label' => esc_html__( 'Slides', 'elementor-astestimonials' ),
'type' => ElementorControls_Manager::REPEATER,
'fields' => [
[
'name' => 'content',
'label' => __( 'Content', 'elementor-astestimonials' ),
'type' => Controls_Manager::WYSIWYG,
'default' => __( 'Content', 'elementor-astestimonials' ),
],
[
'name' => 'name',
'label' => __( 'Name', 'elementor-astestimonials' ),
'type' => Controls_Manager::TEXT,
'placeholder' => esc_html__( 'Beispielname', 'elementor-astestimonials' ),
'default' => __( 'Name', 'elementor-astestimonials' ),
],
[
'name' => 'job',
'label' => __( 'Job / Company', 'elementor-astestimonials' ),
'type' => Controls_Manager::TEXT,
'placeholder' => esc_html__( 'Beispieljob', 'elementor-astestimonials' ),
'default' => __( 'Job', 'elementor-astestimonials' ),
],
[
'name' => 'image',
'label' => esc_html__( 'Choose Image', 'elementor-astestimonials' ),
'type' => ElementorControls_Manager::MEDIA,
'default' => [
'url' => ElementorUtils::get_placeholder_image_src(),
],
],
],
'default' => [
[
'content' => esc_html__( 'List Item #1', 'elementor-astestimonials' ),
'name' => esc_html__( 'Beispielname #1', 'elementor-astestimonials' ),
'job' => esc_html__( 'Beispiejob #1', 'elementor-astestimonials' ),
],
[
'content' => esc_html__( 'List Item #2', 'elementor-astestimonials' ),
'name' => esc_html__( 'Beispielname #2', 'elementor-astestimonials' ),
'job' => esc_html__( 'Beispiejob #2', 'elementor-astestimonials' ),
],
],
'title_field' => '{{{ name }}}',
]
);
$this->end_controls_section();
}
/**
* Render the widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @since 1.0.0
*
* @access protected
*/
protected function render() {
$settings = $this->get_settings_for_display();
?>
<div class="slider">
<?php foreach ( $settings['slides'] as $index => $item ) : ?>
<div class="slide">
<div class="review-wrap">
<div class="review-text 11">
<?php if ( '' != $item['content'] ) {
echo $item['content'];
} ?>
</div>
<div class="reviewer">
<?php if ( '' != $item['image']['url'] ): ?>
<div class="avatar"
style="background-image: url('<?php echo $item['image']['url']; ?>');"></div>
<?php endif; ?>
<div class="reviewer-info">
<h4 class="name"><?php echo $item['name']; ?></h4>
<p><?php echo $item['job']; ?></p>
</div>
</div><!-- //author -->
</div>
</div>
<?php endforeach; ?>
</div><!-- //review-slider -->
<?php
}
/**
* Render the widget output in the editor.
*
* Written as a Backbone JavaScript template and used to generate the live preview.
*
* @since 1.0.0
*
* @access protected
*/
protected function _content_template() {
?>
<div class="slider">
<#
if ( settings.slides ) {
_.each( settings.slides, function( item, index ) {
#>
<div class="slide">
<div class="review-wrap">
<div class="review-text 11">
<# if ( item.content != '' ) { #>
{{{ item.content }}}
<# } #>
</div>
<div class="reviewer">
<# if ( item.image.url != '' ) { #>
<div class="avatar"
style="background-image: url('{{ item.image.url }}');"></div>
<# } #>
<div class="reviewer-info">
<h4 class="name">{{{ item.name }}}</h4>
<p>{{{ item.job }}}</p>
</div>
</div><!-- //author -->
</div>
</div>
<#
} );
}
#>
</div><!-- //review-slider -->
<?php
}
}
Here the Image of the Editor-Mode:
Image Editor-Mode
Here the Code of the JavaScript file for the Editor:
(function ($, elementor) {
"use strict";
var myDataCollection = {
init: function () {
var widgets = {
"astestimonials": myDataCollection.AsTestimonials,
};
$.each(widgets, function (widget, callback) {
elementor.hooks.addAction("frontend/element_ready/" + widget, callback);
});
},
AsTestimonials: function ($scope) {
$scope.find('.slider').hide();
alert("Test");
},
};
$(window).on("elementor/frontend/init", myDataCollection.init);
})(jQuery, window.elementorFrontend);
2
Answers
Basically, your enqueue Javascript doesn’t load inside the elementor editor. For loading javascript, you have to follow some easy steps.
Enqueue your javascript with dependency elementor-frontend.
wp_enqueue_script( ‘script-handle’, ‘path/to/file.js’, [ ‘elementor-frontend’ ], ‘1.0.0’, true );
Now you will get a javascript hook elementor/frontend/init that loads your javascript inside the elementor.
For snippet code, you can use this.
Explanation of the above code :
I wrote the above code for Back to the top widget. my widget name is back-to-top. First I am taking an Immediately-invoked Function and I take 2 parameters as I enqueue my script with 2 dependency elementor-frontend and jquery so I will get back 2 parameters. For my code reusability, I make an object myDataCollection.otherwise we can do it like that. follow the below code.
It works fine but for multiple widgets, I make the first approach.
inside the object, I take a function init. inside init I take another object widget. widget is responsible for taking widget name and function name. after that I loop through it. so that we don’t need to hook our widget again and again. Now I am explaining my callback function. Inside Callback, you will get a parameter like $scope.$scope is your actual widget. When your widget drags and drops inside the editor you will get the $scope.You will find your widget markup inside $scope.Now write your custom code for your widget and enjoy.
Enqueue your JS file like this.
Now follow the first answer. I hope your problem will be solved.