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);