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

Question

我试图向 elementor 添加一些小部件，但我找不到关于它的好教程......

我需要编辑一些小部件，例如（计数器），我从插件和编辑类中复制了小部件...它加载文本，我可以编辑文本，但 javascript 不起作用！

这是代码

<?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
}

}

对不起我的英语不好;）

此行用于 stackoverflow 更详细的错误：|

Answer 1

这不是完整的代码。 很难理解确切的场景。 只需检查几件事-

1. 替换这个

   命名空间小部件；

和

namespace Elementor;

2. 请检查“jquery-numerator”脚本是否已注册。

3. 如果脚本已注册，请确保 JavaScript 代码如下所示 -

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

希望你能得到你的解决方案。

Answer 2

您需要在排队之前注册脚本。 WordPress 必须知道你的js代码在哪里才能使用

代替

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

经过

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

另见https://developers.elementor.com/add-javascript-to-elementor-widgets/