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" ><i ></i></button>',
nextArrow: '<button type="button" ><i ></i></button>',
responsive: [
{
breakpoint: 992,
settings: {
arrows: false,
dots: true
}
}
]
});
};
Here the Code of the PHP Widget File:
<?php
/**
* Astestimonials class.
*
....
*/
namespace ElementorAstestimonials\Widgets;
use Elementor\Widget_Base;
use Elementor\Controls_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' => \Elementor\Controls_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' => \Elementor\Controls_Manager::MEDIA,
'default' => [
'url' => \Elementor\Utils::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 >
<?php foreach ( $settings['slides'] as $index => $item ) : ?>
<div >
<div >
<div >
<?php if ( '' != $item['content'] ) {
echo $item['content'];
} ?>
</div>
<div >
<?php if ( '' != $item['image']['url'] ): ?>
<div
style="background-image: url('<?php echo $item['image']['url']; ?>');"></div>
<?php endif; ?>
<div >
<h4 ><?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 >
<#
if ( settings.slides ) {
_.each( settings.slides, function( item, index ) {
#>
<div >
<div >
<div >
<# if ( item.content != '' ) { #>
{{{ item.content }}}
<# } #>
</div>
<div >
<# if ( item.image.url != '' ) { #>
<div
style="background-image: url('{{ item.image.url }}');"></div>
<# } #>
<div >
<h4 >{{{ 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
CodePudding user response：
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.
(function ($, elementor) {
"use strict";
var myDataCollection = {
init: function () {
var widgets = {
"back-to-top.default": myDataCollection.Back_To_Top,
};
$.each(widgets, function (widget, callback) {
elementor.hooks.addAction("frontend/element_ready/" widget, callback);
});
},
Back_To_Top: function ($scope) {
$scope.find('.BackTo').on('click', function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 1500)
});
$(window).on("scroll", function () {
var scrolltop = $(window).scrollTop(),
docHeight = $(document).height() / 2;
if (scrolltop > docHeight) {
$scope.fadeIn("slow");
} else {
$scope.fadeOut("slow");
}
});
},
};
$(window).on("elementor/frontend/init", myDataCollection.init);
})(jQuery, window.elementorFrontend);CodePudding user response：
Thank you really much for your help. The registering for the Script works fine and to load the javascript file is also good, but the rest of the script i don`t understand. Please have a look to my changes:
(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);
(function ($, elementor) {
"use strict";
var myDataCollection = {
init: function () {
var widgets = {
"back-to-top.default": myDataCollection.Back_To_Top,
};
$.each(widgets, function (widget, callback) {
elementor.hooks.addAction("frontend/element_ready/" widget, callback);
});
},
Back_To_Top: function ($scope) {
$scope.find('.BackTo').on('click', function (e) {
e.preventDefault();
$('body, html').animate({
scrollTop: 0
}, 1500)
});
$(window).on("scroll", function () {
var scrolltop = $(window).scrollTop(),
docHeight = $(document).height() / 2;
if (scrolltop > docHeight) {
$scope.fadeIn("slow");
} else {
$scope.fadeOut("slow");
}
});
},
};
$(window).on("elementor/frontend/init", myDataCollection.init);
})(jQuery, window.elementorFrontend);