Elementor 3.6+ ; how to listen for changes in Repeater control when Add, Duplicate and Delete Item events occur?

[oooh-boi]

'use strict';

( function ( $, w ) {
    
    var $window = $( w ); 

    $window.on( 'elementor/frontend/init', function() {

        var ModuleHandler = elementorModules.frontend.handlers.Base, 
        Whatever; 

        Whatever = ModuleHandler.extend( {

            onInit: function() {
                // do stuff...
            },

            onElementChange: function( changedProp ) {

                /* this is how we can listen for changes in editor */
                if( changedProp === 'some_option' ) {
                    // do stuff...
                } 

                // HOW TO LISTEN FOR CHANGES IN REPEATER, LIKE Add Item, Duplicate and Delete Item?

            }, 

	    bindEvents: function() { 
                // do stuff...
	    }, 

            run: function() {
                // do stuff...
            }, 

        } );

        var handlersList = {
            'container': Interactor, 
            'widget': Interactor, 
        };

        $.each( handlersList, function( widgetName, handlerClass ) {

            elementorFrontend.hooks.addAction( 'frontend/element_ready/' + widgetName, function( $scope ) {
                elementorFrontend.elementsHandler.addHandler( handlerClass, { $element: $scope } );
            } );

        } );

    } ); 


} ( jQuery, window ) );

I am up to create a new panel under the Advanced settings/tab in the Elementor editor. The extension includes REPEATER control plus some other ones.
The problem I have relates to the onElementChange() method which works fine for every other option but the REPEATER control.
More precisely, my goal is to :

a) listen for an ADD, DUPLICATE and DELETE repeater items
b) re-render the target Widget or the Container in the editor preview upon any of these changes.

I believe that I have to add the listener to the REPEATER control manually but I have no clue how to do that.
(This post is something that doesn't work any longer)

So, the above code is a pretty-much basic structure and it would be awesome if someone is willing to let me know how things work with adding the listeners to Repeater and how to re-render the widget/container in the editor preview.

Thanks a lot!

[udidol]

Hi @oooh-boi,

First of all, the code above you is used in the Front End, not the editor, so that is not the way to go.
Front End handlers are executed in the Editor's Preview iFrame, not in the top level frame of the editor, which is where the panel and the controls are.

Generally, you can only force a remote render on elements that don't have a JS template.
Flex Container elements, for example, have a JS template:

elementor/includes/elements/container.php

Lines 115 to 139 in 02fb2b7

	protected function content_template() {
	?>
	<#
	if ( settings.background_video_link ) {
	let videoAttributes = 'autoplay muted playsinline';
	if ( ! settings.background_play_once ) {
	videoAttributes += ' loop';
	}
	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
	if ( ! settings.background_play_on_mobile ) {
	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
	}
	#>
	<div {{{ view.getRenderAttributeString( 'background-video-container' ) }}}>
	<div class="elementor-background-video-embed"></div>
	<video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
	</div>
	<# } #>
	<div class="elementor-shape elementor-shape-top"></div>
	<div class="elementor-shape elementor-shape-bottom"></div>
	<?php
	}

The reason for this is that when Elementor sends a re-render command when any element is changed, it first looks for a JS template, and only fetches from the server if it doesn't find one. Since Flex Containers have a JS template (created in the content_template() PHP method), it will always re-render it from the template and not the server.

However, you can listen to add/duplicate/remove actions of repeaters using our JS API hook system.
Are you familiar with our JS Hooks?

You can see the repeater hooks here:
https://github.com/elementor/elementor/tree/master/assets/dev/js/editor/document/repeater/commands

You can add hook callbacks for 'document/repeater/insert', 'document/repeater/remove', 'document/repeater/duplicate', and in your hook's apply() method you can check for your relevant control IDs and run your action that way.

If at this point what you want to do is run a hook callback that will call a server-side re-rendering, you could potentially achieve it through the following course of action:

Disclaimer: I have never done something like the following, and I really DO NOT recommend doing this though because of any number of unknown and unintended side-effects such an action could cause.

Once you get your relevant element's JS Container object (there should be a container property in the args parameter passed to the apply() method), you can check if it has a renderer, and if it does, you can call it and render from the server like so:

if ( ! container.renderer ) {
	return;
}

const editModel = container.renderer.view.getEditModel()

editModel.renderRemoteServer();

[oooh-boi]

Thank you for taking the time to put this together Udi!

I'm not a core developer and mostly understand things to a certain degree.
So the code I've posted initially is a more or less standard structure for extending controls of the existing widget - JS part.

With what you wrote about, how to do it practically?

How do I add a JS hook for the repeater?

Cheers!

[oooh-boi]

I've come up with the following but not sure how to go on...

onInit: function() {

    ModuleHandler.prototype.onInit.apply( this, arguments );

    elementor.hooks.addAction( 'panel/open_editor/widget', function( panel, model, view ) { 

            var container = view.getContainer();
            var repeater_cid = container.repeaters._ob_i_props_repeater.model.cid; // repeater ID is _ob_i_props_repeater

            console.log( repeater_cid ); // OK

            /* add listener JS hook */

    } );

    /* ... */

}

[udidol]

@oooh-boi

This (#9063 (comment)) code should point you to the right direction. Despite what you said, it does work... similar code is used in Elementor Pro.

But - Note that this code has to run in the Editor's top frame.
To make sure that happens, your JS should be enqueued using the elementor/editor/after_enqueue_scripts PHP hook.

The elementor object used in the code example above is only available in the Editor's top frame. It does not exist in the front end, and that includes the Editor's Preview iFrame.

[oooh-boi]

I'm sorry but wouldn't it be simpler and easier for both of us if you provided an example code?

Yes, my JS is enqueued via the elementor/editor/after_enqueue_scripts PHP hook.

Do I need another hook to run the code, like the 'panel:init' or so? I did the following but the code fails because
getCurrentPageView() is null
...and thus everything else fails.

elementor.on( 'panel:init', function() { 

        // Helper to get the control by id
        const getEditorControlView = function( id ) {

            const editor = elementor.getPanelView().getCurrentPageView(); // -----> this in NULL
            return editor.children.findByModelCid( this.getEditorControlModel( id ).cid );
            
        };
        // Get the repeater control named "CONTORL_ID" view
        const repeaterControlView = getEditorControlView( '_ob_i_props_repeater' );

        // Attach your listeners
        repeaterControlView.collection
            .on( 'change', model => console.log( 'change:', model ) )
            .on( 'update', ( collection, update ) => {
                if ( update.add ) {
                    return console.log( 'true add:', collection, update );
                }
                return console.log( 'add on sort:', collection, update );
            } )
            .on( 'remove', model => console.log( 'removed:', model ) );

} );

Could you please provide an example that might work? I'm sorry, I just don't have any other option but to beg for a bit of help. If you can't help, could you recommend anyone else?

[udidol]

@oooh-boi
Elementor has a JS hook system that you can add your own hooks into.
There are hooks for repeater add/duplicate/remove/move actions.

To do that, you create three files:

1. Hook Component file:

import * as hooks from './hooks/';

export default class Component extends $e.modules.ComponentBase {
	getNamespace() {
		return 'your-namespace-here';
	}

	defaultHooks() {
		return this.importHooks( hooks );
	}
}

Replace 'your-namespace-here' with a namespace of your choice.

2. If you have one single hook, you can create a single hook.js file. If you have multiple hooks, which is your scenario (I will explain), you should create a hooks directory and add your hooks there:

hooks
   |_ repeater-remove.js
   |_ repeater-duplicate.js
   |_ repeater-add.js
   |_ repeater-move.js
   |_ index.js

3. Your index.js file should look like this:

export { TriggerRerenderOnRepeaterRemove } from './repeater-remove';
export { TriggerRerenderOnRepeaterAdd } from './repeater-add';
export { TriggerRerenderOnRepeaterDuplicate } from './repeater-duplicate';

Note that if you create a single hook file, you still need to do a NAMED export from that single hook file, because the Component's importHooks() method expects an object.

4. Now we are at the most important part - your hooks themselves. Your hook files should look like this:

export class TriggerRerenderOnRepeaterAdd extends $e.modules.hookUI.After {
	getCommand() {
		return 'document/repeater/insert';
	}

	getId() {
		return 'your-hook-id-here'; // For example, 'oooh-boi-rerender-on-repeater-add'
	}

	getContainerType() {
		return 'document';
	}

	getConditions( args ) {
		// Here you can add Boolean checks that need to be met for your hook to run.
		// For example, you know your repeater's control ID, so you can make sure this hook runs only on your repeater.
		return args.name && 'oooh-boi-repeater-id' !== args.name;
	}

	apply( args ) {
		const { containers = [ args.container ] } = args;

		// Run your code here.
		// For example, I believe this code would re-render your repeaters when a repeater item is added:
		containers.forEach( ( container ) => {
			if ( ! container.renderer ) {
				return;
			}

			const editModel = container.renderer.view.getEditModel();

			editModel.renderRemoteServer();
		}
	}
}

export default TriggerRerenderOnRepeaterAdd;

5. The hook names you need to return from the getCommands() method are as follows:

• Repeater Add: 'document/repeater/insert'
• Repeater Remove: 'document/repeater/remove'
• Repeater Duplicate: 'document/repeater/duplicate'
• Repeater Move: 'document/repeater/move'

6. To make this whole thing run, you need to register your component. To do that, you listen to the elementor/init-components event:

import Component from './component';

window.addEventListener( 'elementor/init-components', () => {
	$e.components.register( new Component() );
} );

[oooh-boi]

OK, thanks a lot for your time!

It doesn't look like we are on the same frequency. I'm talking from the point of view of an Elementor add-on and what you have provided as a general guideline here.

$e is undefined, that's for sure.
How to reach the $e from my plugin's JS file?

Where does the new code meet the previously suggested one this?

Is there a way to monitor changes in the editor's history and perhaps avoid creating hooks?
I've noticed that bindEvents() registers Add, Duplicate and Delete repeater events...

Do you have any other suggestions on how to simplify all of this?

Thanks a lot!

[udidol]

Hi @oooh-boi,
I believe we DO understand each other.
This JS API that I shared with you is not documented in the link you sent. I agree that it should be, and that is a work in progress.

The code I have given you should work for a 3rd party addon, no reason for it not to.

As long as you use this event listener to register your component, $e should be defined:

window.addEventListener( 'elementor/init-components', () => {
	$e.components.register( new Component() );
} );

As per your question on repeater events registered in the repeater file's bindEvents() method - those are marionette event listeners and as far as I know, it's not possible attach a listener to them from outside, unless the view instance is available to you... I'm not sure if it is exposed.

[oooh-boi]

Unfortunately, I'm ending up with "Uncaught SyntaxError: import declarations may only appear at top level of a module".

I thought that adding the type="module" attribute to the SCRIPT file might help but there's actually no legal way to enqueue js file in WordPress along with the attribute. Tried to filter it with the script_loader_tag and it raised some weird TinyMCE errors.

Apart from that, here's what the folder structure looks like :

elementor/init-components is being fired from 'ob-steroids-editor.js' file which is enqueued via the elementor/editor/after_enqueue_scripts action.

The files you told me to add:

[udidol]

Do you not compile your code into one main file using a bundler like webpack?

[oooh-boi]

No

[udidol]

Then don't use import/export. Manually put them all in the same file 🤷‍♂️

[oooh-boi]

I don't think I know how, sorry. Maybe better to forget about all this.

Thank you for all your help!!!

[saurab1996]

 elementor.hooks.addAction('panel/open_editor/widget/{widget_name}', ( panel, model, view ) => {
            // Bind 'before:remote:render' event to trigger option updates before the view is rendered
            model.on('before:remote:render', onSettingChange);
 });