[Bug] Get REPLACE_TO_ID instead a Id number with custom basic widget

[dam62500]

Hi,

I created a basic widget that inherits from WP_Widget, a normal widget without elementor. it works perfectly well without elementor but when I want to add my custom widget from the editor of elementor in a page, I can't get a unique ID, I have instead "REPLACE_TO_ID" for $number.

Do you have any ideas for fixing this bug?

[bainternet]

@dam62500

paste your widget code, I'll try to help.

[dam62500]

thank you for your help @bainternet
That's part of my widget, in normal case, I get a unique id with wordpress but with elementor, i have REPLACE_TO_ID

class Contact_Number_Gtag_Widget extends WP_Widget
{
    public function __construct()
    {
 
        parent::__construct(
                'contact-number-gtag',
                'Numéro de Téléphone Gtag',
                ['description' => 'Affiche un bouton "Afficher le numéro" pour gtag']
        );

        $this->PATH_WIDGET = get_template_directory_uri()."/widgets/wordpress/contact-number-gtag";
        $this->_javascript();
    }

    public function widget($args, $instance)
    {
        ?>
        <style>
            .<?php echo $this->id; ?> .contact-number-gtag {
                background: <?php echo $instance['bgcolor']; ?>;
                color: <?php echo $instance['txtcolor']; ?>;
                padding: 10px 20px;
                font-size: 22px;
            }

            .<?php echo $this->id; ?> .contact-number-gtag:hover, <?php echo $this->id; ?> .contact-number-gtag:focus{
                background: <?php echo $this->_darken($instance['bgcolor']); ?>;
                color: <?php echo $instance['txtcolor']; ?>;
            }
        </style>
        <div class="<?php echo $this->id; ?>">
            <a class="contact-number-gtag" href="#contact-number-gtag" data-number="<?php echo $instance['number']; ?>" data-bgcolor="<?php echo $instance['bgcolor']; ?>" data-txtcolor="<?php echo $instance['txtcolor']; ?>" >
                <i class="icon icon-right icon-tel"></i>
                <span>
                    Afficher le numéro
                </span>
            </a>
        </div>
        <?php
    }


    public function form($instance)
    {
        // Initialisation des variables
        $number = isset($instance['number']) ? $instance['number'] : '';
        $bgcolor = isset($instance['bgcolor']) ? $instance['bgcolor'] : '#2c6c9b';
        $txtcolor = isset($instance['txtcolor']) ? $instance['txtcolor'] : '#ffffff';

        ?>

        <!-- Form load -->
        <p>
            <label for="<?php echo $this->get_field_name( 'number' ); ?>"><?php _e( 'Numéro de Téléphone:' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" type="text" value="<?php echo $number; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_name( 'bgcolor' ); ?>"><?php _e( 'Background Color:' ); ?></label>
            <input class="widefat" data-type="bgcolor" id="<?php echo $this->get_field_id( 'bgcolor' ); ?>" name="<?php echo $this->get_field_name( 'bgcolor' ); ?>" type="text" value="<?php echo $bgcolor; ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_name( 'txtcolor' ); ?>"><?php _e( 'Text Color:' ); ?></label>
            <input class="widefat" data-type="txtcolor" id="<?php echo $this->get_field_id( 'txtcolor' ); ?>" name="<?php echo $this->get_field_name( 'txtcolor' ); ?>" type="text" value="<?php echo $txtcolor; ?>" />
        </p>
        <!-- /Form load -->
        <?php

    }

problem from elementor ../plugins/elementor/includes/widgets/wordpress.php

/**
* Retrieve WordPress/Pojo widget instance.
 *
* Returns an instance of WordPress widget, to be used in Elementor.
*
* @since 1.0.0
* @access public
*
* @return \WP_Widget
*/
public function get_widget_instance() {
		if ( is_null( $this->_widget_instance ) ) {
			global $wp_widget_factory;

			if ( isset( $wp_widget_factory->widgets[ $this->_widget_name ] ) ) {
				$this->_widget_instance = $wp_widget_factory->widgets[ $this->_widget_name ];
				$this->_widget_instance->_set( 'REPLACE_TO_ID' );
			} elseif ( class_exists( $this->_widget_name ) ) {
				$this->_widget_instance = new $this->_widget_name();
				$this->_widget_instance->_set( 'REPLACE_TO_ID' );
			}
		}
		return $this->_widget_instance;
	}

i don't know how to fix my problem.. if you have any idae, i'll take it.. :)

[bainternet]

Ok, I see what you mean, And in that case, you will not get it to work this way.

What you can try, as a workaround is to use a different property which is a random string for example:

    public function __construct() {
          $this->my_fake_id = uniqid();
          ...
    }

    public function widget($args, $instance)
    {
        ?>
        <style>
            .<?php echo $this->my_fake_id; ?> .contact-number-gtag {
                background: <?php echo $instance['bgcolor']; ?>;
                color: <?php echo $instance['txtcolor']; ?>;
                padding: 10px 20px;
                font-size: 22px;
            }

            .<?php echo $this->my_fake_id; ?> .contact-number-gtag:hover, <?php echo $this->my_fake_id; ?> .contact-number-gtag:focus{
                background: <?php echo $this->_darken($instance['bgcolor']); ?>;
                color: <?php echo $instance['txtcolor']; ?>;
            }
        </style>
        <div class="<?php echo $this->my_fake_id; ?>">
            <a class="contact-number-gtag" href="#contact-number-gtag" data-number="<?php echo $instance['number']; ?>" data-bgcolor="<?php echo $instance['bgcolor']; ?>" data-txtcolor="<?php echo $instance['txtcolor']; ?>" >
                <i class="icon icon-right icon-tel"></i>
                <span>
                    Afficher le numéro
                </span>
            </a>
        </div>
        <?php
    }

But for the best support and a solution that will work 100%, you can code your widget as Elementor Widget which will take care of the CSS for you !!! see this.

Hope this helps.

[dam62500]

Because I'm looking for a good way to do it, yes i think i'll make as a Elementor Widget too
trhank

[winstein]

I just ran into this problem today. Very interesting. My widget allows multiple instances in different positions. I use widget id's to allow users set different styles for each instances. But this breaks under Elementor. Sure I could use a random number string instead, but it still has a small chance for id collision. WordPress sets widget id as "widget-name-3", Ideally, Elementor could set the id as "widget-name-e-3" instead of just "REPLACE_TO_ID".

[csalzano]

Hello in 2021. Why is this issue closed? I do not think it should be closed.

• Elementor removes widgets ability to access their own widget instance ID

I believe this is a bug. It breaks any widget that localizes instance settings for use in JavaScript, for example.

[DesignInvento]

Ok, I see what you mean, And in that case, you will not get it to work this way.

What you can try, as a workaround is to use a different property which is a random string for example:

    public function __construct() {
          $this->my_fake_id = uniqid();
          ...
    }

    public function widget($args, $instance)
    {
        ?>
        <style>
            .<?php echo $this->my_fake_id; ?> .contact-number-gtag {
                background: <?php echo $instance['bgcolor']; ?>;
                color: <?php echo $instance['txtcolor']; ?>;
                padding: 10px 20px;
                font-size: 22px;
            }

            .<?php echo $this->my_fake_id; ?> .contact-number-gtag:hover, <?php echo $this->my_fake_id; ?> .contact-number-gtag:focus{
                background: <?php echo $this->_darken($instance['bgcolor']); ?>;
                color: <?php echo $instance['txtcolor']; ?>;
            }
        </style>
        <div class="<?php echo $this->my_fake_id; ?>">
            <a class="contact-number-gtag" href="#contact-number-gtag" data-number="<?php echo $instance['number']; ?>" data-bgcolor="<?php echo $instance['bgcolor']; ?>" data-txtcolor="<?php echo $instance['txtcolor']; ?>" >
                <i class="icon icon-right icon-tel"></i>
                <span>
                    Afficher le numéro
                </span>
            </a>
        </div>
        <?php
    }

But for the best support and a solution that will work 100%, you can code your widget as Elementor Widget which will take care of the CSS for you !!! see this.

Hope this helps.

it does not make any sense, you people have removed the ability to access widget id and instance number in side custom methods, if it does make sense then explain how would you access widget instance inside custom methods?