Trigger url changes into the preview frame

[alessandrotesoro]

Hi there,

I'm building an advanced integration between Elementor and my plugin https://wordpress.org/plugins/wp-user-manager/. My plugin provides frontend profiles for all users so each user has it's own profile on the frontend. Each profile also has a tabbed section, the content of the section is displayed through custom urls ( query vars ).

Through Elementor I've made it so, that if enabled the profile page can be entirely customized. However I haven't come up with a solution for the profile tabs. So I was thinking of overriding the query vars that my plugin detects through the iframe preview URL.

I've noticed there's a button control that triggers a js event https://developers.elementor.com/elementor-controls/button-control/ - is it possible through this event to change the preview url?

Regards.

[bainternet]

@alessandrotesoro

Yes that would work, you can set the event you want to trigger and listen to it on the client ex:

$this->add_control(
    'apply_preview',
    [
        'type' => Controls_Manager::BUTTON,
        'label' => '',
        'text' => __( 'Apply Preview' ),
        'separator' => 'none',
        'event' => 'wpUserManager:changePreview',
    ]
);

and on the client side something like this:

elementor.channels.editor.on( 'wpUserManager:changePreview', function() {
    elementor.$preview[0].contentWindow.location = 'XXX';
} );

its not tested but you get the idea.