如何使用 ajax 调用重新渲染 Elementor 帖子小部件

Question

我正在 WordPress 中使用 Elementor。我使用帖子小部件显示我的自定义帖子类型。我创建了一个 AJAX 过滤器，它还可以按不同的值过滤我的帖子 - 到目前为止，该过滤器有效。

现在我面临的问题是无法重新渲染 elementor post 小部件。为了在小部件中获取过滤结果，这是必需的，因为 elementor 默认情况下仅允许服务器站点过滤。

我正在使用自定义查询过滤器 ( https://developers.elementor.com/custom-query-filter/ ) 将过滤器结果推送到 elementor post 小部件中。

基本上我的问题是是否有一个 elementor 函数，我可以使用 ajax 调用它来重新渲染 elementor 小部件。

Answer 1

我花了一段时间才弄清楚这一点，但我有一个有效的方法：

1. 您需要将当前帖子 ID 和小部件 ID 传递给 AJAX 方法：

小部件的 ID：可以在小部件的包装 div 的data-id属性中找到。

帖子 ID： Elementor 实际上已经将其存储在 javascript 全局中：window.elementorFrontendConfig.post.id

2. 在 AJAX 操作中，使用以下函数从指定的 Post ID 和 Widget ID 渲染小部件：

function render_element($postid, $elementid)
{
    $document = \Elementor\Plugin::$instance->documents->get( $postid );

    if ( ! $document ) {
        return new \WP_Error(
            'document_not_exist',
            __( 'Document doesn\'t exist', 'elementor-pro' ),
            [ 'status' => 404 ]
        );
    }

    $element_data = $document->get_elements_data();
    $widget = \Elementor\Utils::find_element_recursive( $element_data, $elementid );

    if ( empty( $widget ) ) {
        return new \WP_Error(
            'Element_not_exist',
            __( 'Posts widget doesn\'t exist', 'elementor-pro' ),
            [ 'status' => 404 ]
        );
    }

    // Override the global $post for the render.
    query_posts(
        [
            'p' => $postid,
            'post_type' => 'any',
        ]
    );

    \Elementor\Plugin::$instance->documents->switch_to_document( $document );
    $html = $document->render_element($widget);

    //Not sure if this is needed in AJAX context:
    // \Elementor\Plugin::$instance->documents->restore_document();
    // \wp_reset_query();

    return [
        'content' => $html,
    ];
}