Displaying a page built with Elementor using the REST API [closed]

Question

I'm new to working with the REST API, and I can't seem to wrap my head around this issue.

I have several static pages that I created using the Elementor page builder. Since I am trying to integrate a continuous music player the site I'm working on, I want to replace the content of a page with the content of a different page whenever I click a link in the menu. All pages share a header and footer that is already rendered when I open the page in the first place, so I thought I could suffice by replacing the content with the content of the page belonging to the link I clicked.

I would assume that clicking a link should fire off a javascript function that makes an GET call to my-site.domain/wp-json/wp/v2/pages/pageid. When I try this in my browser, the rendered content in the json object is correct, but incomplete. It displays all the content and its html tags, but none of the Elementor classes. When I load the page normally, the first part of the content starts with a bunch of elementor rows, containers, widgets, etc, that position and style the content. The first actual content is this:

<h1 class="elementor-heading-title elementor-size-default"> TITLE </h1>

However, when I make an api call, the rendered content has none of the Elementor divs or classes or styling and shows up as follows:

<h1> TITLE </h1>

My question is, how can I get all of this other content into the json object? I assume this has something to do with the way Elementor stores its data? It seems to be stored in the _postmeta table in some json format, so I suspect the actual content is normally rendered by some php file belonging to the elementor plugin. Can I render this myself using a custom endpoint, before I inject the content onto an already rendered page using javascript? Or am I fundamentally using the REST API in the wrong way?

Answer 1

you can create a new endpoint with the following code and you can retrieve the elementor content on URL wp-json/MyPlugin/v1/pages/PAGE_ID/contentElementor

add_action("rest_api_init", function () {

    register_rest_route(
          "MyPlugin/v1"
        , "/pages/(?P<id>\d+)/contentElementor"
        , [
            "methods" => "GET",
            "callback" => function (\WP_REST_Request $req) {

                $contentElementor = "";

                if (class_exists("\\Elementor\\Plugin")) {
                    $post_ID = $req->get_param("id");

                    $pluginElementor = \Elementor\Plugin::instance();
                    $contentElementor = $pluginElementor->frontend->get_builder_content($post_ID);
                }


                return $contentElementor;

            },
        ]
    );


});