Last Updated
Viewed 31 Times

I have some post which have custom field values. So when showing the posts using the Elemetor Pro posts widget I want to add the values of some custom field in the same post.

I have a requirement where I need to create a custom widget to Elementor. I will have two text fields and a button on this widget and when I click on Button. I have to trigger an event.

But, I am not getting any button Id on the HTML page when I tried to create a button using this code.

          'submit_content',
          [
            //'label' => __( 'Submit Content', 'plugin-name' ),
            'type' => \Elementor\Controls_Manager::BUTTON,
            'separator' => 'before',
            'button_type' => 'success',
            'text' => __( 'Submit Product', 'plugin-domain' ),
            'event' => 'namespace:editor:submit',
          ]
        );

Is there any way, I can create any id with this button? Or any way I can use this button on click event at javascript or PHP side?

The ultimate goal is to have a widget for Elementor in Wordpress that can create multiple buttons inside of tabs. So I want a repeater inside of a repeater.

I do not have all the functionality or styling yet, just the very basic set up that lists each input on the page. The code I have does not work. The plugin displays correctly, however all the elementor controls disappear.

Screenshot of Wordpress page

Here is the code:

<?php
namespace Elementor;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Elementor iatabs widget.
 *
 * Elementor widget that displays vertical or horizontal iatabs with different
 * pieces of content.
 *
 * @since 1.0.0
 */
class Widget_AltTabs extends Widget_Base {

    	/**
	 * Get widget name.
	 *
	 * Retrieve iatabs widget name.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'alttabs';
	}

	/**
	 * Get widget title.
	 *
	 * Retrieve tabs widget title.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'AltTabs', 'elementor' );
	}

	/**
	 * Get widget icon.
	 *
	 * Retrieve tabs widget icon.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'eicon-tabs';
	}

protected function _register_controls() {

$this->start_controls_section(
    'content_section',
    [
        'label' => __( 'Content', 'elementor' ),
        'tab' => Controls_Manager::TAB_CONTENT,
    ]
);

$this->add_control(
    'list',
    [
        'label' => __( 'Repeater List', 'elementor' ),
        'type' => Controls_Manager::REPEATER,
        'fields' => [
            [
                'name' => 'list_title',
                'label' => __( 'Title', 'elementor' ),
                'type' => Controls_Manager::TEXT,
                'default' => __( 'List Title' , 'elementor' ),
                'label_block' => true,
            ],
            [
                'name' => 'list_content',
                'label' => __( 'Content', 'elementor' ),
                'type' => Controls_Manager::WYSIWYG,
                'default' => __( 'List Content' , 'elementor' ),
                'show_label' => false,
            ],
            [
                'name' => 'list_buttons',
                'label' => __( 'List Buttons', 'elementor' ),
                'type' => Controls_Manager::REPEATER,
                'fields' => [
                    [
                        'name' => 'button_text',
                        'label' => __( 'Button Text', 'elementor' ),
                        'type' => Controls_Manager::TEXT,
                        'default' => __( 'Click' , 'elementor' ),
                        'label_block' => true,
                    ],
                ],
                'default' => [
                    [
                        'button_text' => __( 'Button #1', 'elementor' ),
                    ],
                    [
                        'button_text' => __( 'Button #2', 'elementor' ),
                    ],
                ],
            ],  
        ],
        'default' => [
            [
                'list_title' => __( 'Title #1', 'elementor' ),
                'list_content' => __( 'Item content. Click the edit button to change this text.', 'elementor' ),
            ],
            [
                'list_title' => __( 'Title #2', 'elementor' ),
                'list_content' => __( 'Item content. Click the edit button to change this text.', 'elementor' ),
            ],
        ],
        'title_field' => '{{{ list_title }}}',
    ]
);

$this->end_controls_section();

}

protected function render() {
    $settings = $this->get_settings_for_display();
    if ( $list ) {
        echo '<dl>';
        foreach (  $settings['list'] as $item ) {
            echo '<dt class="repeater-' . $item['_id'] . '">' . $item['list_title'] . '</dt>';
            echo '<dd>' . $item['list_content'] . '</dd>';
            foreach ($item['list_buttons'] as $button) {
                echo $button['button_text'];
            }
        }
        echo '</dl>';
    }
}

	/**
	 * Render tabs 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() { ?>
        <# if ( settings.list ) { #>
            <dl>
            <# _.each( settings.list, function( item ) { #>
                <dt class="repeater-{{ item._id }}"> {{ item.list_title }} </dt>
                <dd> {{ item.list_content }} </dd>
                <dd> {{ item.list_buttons[0].button_text }} </dd>

                <# if ( item.list_buttons ) { #>
                    <dl>
                    <# _.each( item.list_buttons, function( i ) { #>
                        <dt class="repeater-{{ i._id }}"> </dt>
                        <dd> {{ i.button_text }} </dd>
                    <# }); #>
                    </dl>
                <# } #>

            <# }); #>
            </dl>
        <# } #>
        <?php
        }

    }
Plugin::instance()->widgets_manager->register_widget_type( new Widget_AltTabs ); ?>

Here is an example of the error messages that I am getting:

Uncaught TypeError: Cannot read property 'each' of undefined at Object. (editor.min.js?ver=2.0.15:2) at Function.each (load-scripts.php?c=0&load[]=underscore,shortcode,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=4.9:10) at n.getStyleControls (editor.min.js?ver=2.0.15:2) at editor.min.js?ver=2.0.15:2 at Function.m.each.m.forEach (load-scripts.php?c=0&load[]=underscore,shortcode,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=4.9:5) at e.Collection.each (load-scripts.php?c=0&load[]=underscore,shortcode,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=4.9:18) at Object. (editor.min.js?ver=2.0.15:2) at Function.each (load-scripts.php?c=0&load[]=underscore,shortcode,utils,jquery-core,jquery-migrate,backbone,wp-util,wp-backbone,media-models,moxiejs,plupload,wp-plupload,jqu&load[]=ery-ui-core,jquery-ui-widget,jquery-ui-mouse,jquery-ui-sortable&ver=4.9:10) at n.getStyleControls (editor.min.js?ver=2.0.15:2) at n.renderStyles (editor.min.js?ver=2.0.15:2)<

I am pretty new to writing Elementor widget/plugins so I am stumped here. I would appreciate any help. Thank you!

I want to create a elementor widget and add it to basic elementor menu. I find and do this according to this tutorial but it s not working(not appear in basic menu): https://develowp.com/build-a-custom-elementor-widget/ enter image description here. I use debug and I think maybe the cause is this code: "add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ] );" Can anybody help me fix this problem or anybody have other code run correctly?

Similar Question 5 (2 solutions) : How to create widget category of elementor on wordpress

Similar Question 9 (1 solutions) : Elementor Pro - Custom Query

cc