如何将 javascript 添加到 elementor 小部件或编辑现有的 elementor 小部件？

Question

Im trying to add some widgets to elementor, but i cant find good tutorial about it...

i need edit some widgets like (counter), i copied the widget from plugin and edit classes... its load the text and i can edit the texts, but javascript doesn't work !

heres the code

<?php
namespace Widgets;

use Elementor\Widget_Base;
use Elementor\Scheme_Color;
use Elementor\Controls_Manager;
use Elementor\Scheme_Typography;
use Elementor\Group_Control_Typography;

class CounterClass extends Widget_Base {

public function get_name() {
    return 'customCounter';
}

public function get_title() {
    'custom counter';
}

public function get_icon() {
    return 'fa fa-user';
}

public function get_categories(){
    return ['our-category'];
}

public function get_script_depends() {
    return [ 'jquery-numerator' ];
}

protected function _register_controls() {
    $this->start_controls_section(
        'section_counter',
        [
            'label' =>  'Counter',
        ]
    );

    $this->add_control(
        'starting_number',
        [
            'label' =>  'Starting Number',
            'type' => Controls_Manager::NUMBER,
            'default' => 0,
            'dynamic' => [
                'active' => true,
            ],
        ]
    );

    $this->add_control(
        'ending_number',
        [
            'label' =>  'Ending Number',
            'type' => Controls_Manager::NUMBER,
            'default' => 100,
            'dynamic' => [
                'active' => true,
            ],
        ]
    );

    $this->add_control(
        'prefix',
        [
            'label' =>  'Number Prefix',
            'type' => Controls_Manager::TEXT,
            'dynamic' => [
                'active' => true,
            ],
            'default' => '',
            'placeholder' => 1,
        ]
    );

    $this->add_control(
        'suffix',
        [
            'label' =>  'Number Suffix',
            'type' => Controls_Manager::TEXT,
            'dynamic' => [
                'active' => true,
            ],
            'default' => '',
            'placeholder' =>  'Plus',
        ]
    );

    $this->add_control(
        'duration',
        [
            'label' =>  'Animation Duration',
            'type' => Controls_Manager::NUMBER,
            'default' => 2000,
            'min' => 100,
            'step' => 100,
        ]
    );

    $this->add_control(
        'thousand_separator',
        [
            'label' =>  'Thousand Separator',
            'type' => Controls_Manager::SWITCHER,
            'default' => 'yes',
            'label_on' =>  'Show',
            'label_off' =>  'Hide',
        ]
    );

    $this->add_control(
        'thousand_separator_char',
        [
            'label' =>  'Separator',
            'type' => Controls_Manager::SELECT,
            'condition' => [
                'thousand_separator' => 'yes',
            ],
            'options' => [
                '' => 'Default',
                '.' => 'Dot',
                ' ' => 'Space',
            ],
        ]
    );

    $this->add_control(
        'title',
        [
            'label' =>  'Title',
            'type' => Controls_Manager::TEXT,
            'label_block' => true,
            'dynamic' => [
                'active' => true,
            ],
            'default' =>  'Cool Number',
            'placeholder' =>  'Cool Number',
        ]
    );

    $this->add_control(
        'view',
        [
            'label' =>  'View',
            'type' => Controls_Manager::HIDDEN,
            'default' => 'traditional',
        ]
    );

    $this->end_controls_section();

    $this->start_controls_section(
        'section_number',
        [
            'label' =>  'Number',
            'tab' => Controls_Manager::TAB_STYLE,
        ]
    );

    $this->add_control(
        'number_color',
        [
            'label' =>  'Text Color',
            'type' => Controls_Manager::COLOR,
            'scheme' => [
                'type' => Scheme_Color::get_type(),
                'value' => Scheme_Color::COLOR_1,
            ],
            'selectors' => [
                '{{WRAPPER}} .elementor-counter-number-wrapper' => 'color: {{VALUE}};',
            ],
        ]
    );

    $this->add_group_control(
        Group_Control_Typography::get_type(),
        [
            'name' => 'typography_number',
            'scheme' => Scheme_Typography::TYPOGRAPHY_1,
            'selector' => '{{WRAPPER}} .elementor-counter-number-wrapper',
        ]
    );

    $this->end_controls_section();

    $this->start_controls_section(
        'section_title',
        [
            'label' =>  'Title',
            'tab' => Controls_Manager::TAB_STYLE,
        ]
    );

    $this->add_control(
        'title_color',
        [
            'label' =>  'Text Color',
            'type' => Controls_Manager::COLOR,
            'scheme' => [
                'type' => Scheme_Color::get_type(),
                'value' => Scheme_Color::COLOR_2,
            ],
            'selectors' => [
                '{{WRAPPER}} .elementor-counter-title' => 'color: {{VALUE}};',
            ],
        ]
    );

    $this->add_group_control(
        Group_Control_Typography::get_type(),
        [
            'name' => 'typography_title',
            'scheme' => Scheme_Typography::TYPOGRAPHY_2,
            'selector' => '{{WRAPPER}} .elementor-counter-title',
        ]
    );

    $this->end_controls_section();
}

protected function _content_template() {
    ?>
    <div class="elementor-counter">
        <div class="elementor-counter-number-wrapper">
            <span class="elementor-counter-number-prefix">{{{ settings.prefix }}}</span>
            <span class="elementor-counter-number" 
                data-duration="{{ settings.duration }}" 
                data-to-value="{{ settings.ending_number }}" 
                data-delimiter="{{ settings.thousand_separator ? settings.thousand_separator_char || ',' : '' }}"
                >
                {{{ settings.starting_number }}}
                </span>
            <span class="elementor-counter-number-suffix">{{{ settings.suffix }}}</span>
        </div>
        <# if ( settings.title ) {
            #><div class="elementor-counter-title">{{{ settings.title }}}</div><#
        } #>
    </div>
    <?php
}

protected function render() {
    $settings = $this->get_settings_for_display();

    $this->add_render_attribute( 'counter', [
        'class' => 'elementor-counter-number',
        'data-duration' => $settings['duration'],
        'data-to-value' => $settings['ending_number'],
        'data-from-value' => $settings['starting_number'],
    ] );

    if ( ! empty( $settings['thousand_separator'] ) ) {
        $delimiter = empty( $settings['thousand_separator_char'] ) ? ',' : $settings['thousand_separator_char'];
        $this->add_render_attribute( 'counter', 'data-delimiter', $delimiter );
    }
    ?>
    <div class="elementor-counter">
        <div class="elementor-counter-number-wrapper">
            <span class="elementor-counter-number-prefix"><?php echo $settings['prefix']; ?></span>
            <span <?php echo $this->get_render_attribute_string( 'counter' ); ?>><?php echo $settings['starting_number']; ?></span>
            <span class="elementor-counter-number-suffix"><?php echo $settings['suffix']; ?></span>
        </div>
        <?php if ( $settings['title'] ) : ?>
            <div class="elementor-counter-title"><?php echo $settings['title']; ?></div>
        <?php endif; ?>
    </div>
    <?php
}

}

sorry for my english;)

this line for stackoverflow more detail error:|

Answer 1

This isn't full code. It's hard to understand the exact scenario. Just check a few things -

1. Replace this

   namespace Widgets;

with

namespace Elementor;

2. Please check 'jquery-numerator' script is registered or not.

3. If the script registered then make sure JavaScripts code like below -

    ;(function($){ "use strict"; customCounter: function ($scope, $) { // your code here }; $(window).on('elementor/frontend/init', function () { if( elementorFrontend.isEditMode() ) { editMode = true; } elementorFrontend.hooks.addAction('frontend/element_ready/customCounter.default', customCounter); })(jQuery);

Hope you'll get your solutions.

Answer 2

You need to register the script before enqueueing it. WordPress must know where is your js code to use it

Replace

public function get_script_depends() {
   return [ 'jquery-numerator' ];
}

by

public function get_script_depends() {
   wp_register_script( 'jquery-numerator', 'path/to/file.js', [ 'elementor-frontend' ], '1.0.0', true );
   return [ 'jquery-numerator' ];
}

See also https://developers.elementor.com/add-javascript-to-elementor-widgets/