Integration / API Question

You just have to be a little creative by looking at the whole of developer documentation and not just the API part. Here is the link to the API documentation but it sounds like you’ve already skimmed through this – https://code.elementor.com/classes/elementor-api/

The big clue that this won’t help in your circumstance is spelled out right in the beginning…

“Elementor API handler class is responsible for communicating with Elementor remote servers retrieving templates data and to send uninstall feedback.”

It’s all external GET requests which won’t help in your case.

Based on your description I’d suggest maybe tapping into an action or filter.

For example, you could include your own notification library like popper.js and trigger an event based on an editor action such as elementor/editor/after_save – https://code.elementor.com/php-hooks/#Editor_Actions

• This reply was modified 5 years, 5 months ago by pingram. Reason: re-clarify what API actually does

Thanks for the reply, unfortunately there doesn’t appear to be a way to call a javascript function following save so I am kind of at a loss for how the after_save hook is going to help. I looked for an equivalent JS hook but couldn’t find one.

I just inspect the tools they provide and follow the bread crumbs. The first thing I looked at was editor.min.js which is loaded with many hooks and events that we can use.

Some but not all can be found here https://code.elementor.com/js-hooks/

Here’s how I went about it…

1) I load up my page in the Elementor editor.

2) I open chrome dev tools (right-click inspect)

3) I click on the Sources tab and locate /wp-content/plugins/elementor/assets/js/editor.min.js and click on the file name to reveal it in the preview and expose the code for that file

4) The code is minified, in chrome dev tools there is a “pretty print” button that looks like {} in the bottom right corner of the preview window, clicking it will un-minify the code and make it much easier to read

5) I click anywhere in the code in the preview window and press CTRL+F to open the search/find dialog just below the code preview window

6) I search for “save” initially and see there there is two event listeners that look interesting, before:save and after:save which are listened via the elementor.saver.on method.

7) I then include a simple script in my footer by using the wp_footer action that WordPress provides like so:

//triger javascript events on editor save
add_action( 'wp_footer', function() {
  if ( ! defined( 'ELEMENTOR_VERSION' ) ) {
    return;
  }
  ?>
  <script>
  jQuery( function( $ ) {
    elementor.saver.on( 'before:save', function() {
      alert('Event before changes are saved');
    } );

    elementor.saver.on( 'after:save', function() {
      alert( 'Event after changes are saved' );
    } );
  } );
  </script>
  <?php
} );

p.s. You don’t have to wrap it in a jQuery wrapper, I just included it so that it allows the use of jQuery since it’s bundled w/ WordPress anyway and most designers are familiar with it.

p.s.s. I take that back, the “on” method is exclusive to jQuery so it DOES need to be wrapped like I provided.

• This reply was modified 5 years, 5 months ago by pingram. Reason: jQuery disclaimer
• This reply was modified 5 years, 5 months ago by pingram. Reason: clarify false statement

Thank you very much! I never thought to look in the developer console. This should work perfectly.

No problem and happy to help. Now I also have a code snippet I might use in a future project =)

When it comes to javascript the code is run in the client’s browser so using the browser developer console just makes sense imo. One can troubleshoot right in the browser like a sandbox.

If you really want to have some fun check out the “window” object and see all of the objects attached to it and how they change when you manipulate things in the editor, especially after ajax calls. i.e. console.log( window );

The result will let you expand the window object’s tree to expose all kinds of child object attached to it such as Cookies, the “elementor” object, the “Document”, clipboard etc.

You can manipulate these objects as needed to fit your application’s needs too.

Another cool one is getEventListeners(window); and getEventListeners(document);

Best of luck and success to you!