Question

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

我需要编辑一些小部件，例如（counter），我从插件复制了小部件并编辑类... 它会加载文本，我可以编辑文本，但是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

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

替换此

命名空间小部件；

使用

namespace Elementor;

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

如果已注册脚本，请确保如下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);

希望您会得到解决方案。

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

1 个答案: